Add custom theme support

Author: florianduros

res/css/_common.pcss

@@ -603,7 +603,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ),
+    ):not(.mx_ThemeChoicePanel_CustomTheme_container button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -623,14 +623,14 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):last-child {
+    ):not(.mx_ThemeChoicePanel_CustomTheme_container button):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme_container button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -642,7 +642,7 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ),
+    ):not(.mx_ThemeChoicePanel_CustomTheme_container button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -653,7 +653,9 @@ legend {
 .mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons
-    button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button),
+    button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
+        .mx_ThemeChoicePanel_CustomTheme_container button
+    ),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -669,7 +671,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme_container button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/views/settings/_ThemeChoicePanel.pcss

@@ -62,6 +62,7 @@ limitations under the License.
 
 .mx_ThemeChoicePanel_ThemeSelectors {
     display: flex;
+    flex-wrap: wrap;
     /* Override form default style */
     flex-direction: row !important;
     gap: var(--cpd-space-4x) !important;
@@ -87,3 +88,41 @@ limitations under the License.
         }
     }
 }
+
+.mx_ThemeChoicePanel_CustomTheme_header {
+    margin-block: 0;
+    margin-top: var(--cpd-space-2x);
+    border-bottom: 1px solid var(--cpd-color-alpha-gray-400);
+    padding-bottom: var(--cpd-space-2x);
+    width: 100%;
+}
+
+.mx_ThemeChoicePanel_CustomTheme_container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-4x);
+
+    .mx_ThemeChoicePanel_CustomTheme_EditInPlace input:focus {
+        // When the input is focused, the border is growing
+        // We need to move it a bit to avoid the left border to be under the left panel
+        margin-left: 2px;
+    }
+
+    .mx_ThemeChoicePanel_CustomThemeList {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .mx_ThemeChoicePanel_CustomThemeList_name {
+            font: var(--cpd-font-body-sm-semibold);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .mx_ThemeChoicePanel_CustomThemeList_delete {
+            color: var(--cpd-color-icon-critical-primary);
+        }
+    }
+}

src/components/views/settings/ThemeChoicePanel2.tsx

@@ -14,8 +14,18 @@
  * limitations under the License.
  */
 
-import React, { Dispatch, JSX, useRef, useState } from "react";
-import { InlineField, ToggleControl, Label, Root, RadioControl } from "@vector-im/compound-web";
+import React, { ChangeEvent, Dispatch, JSX, useMemo, useRef, useState } from "react";
+import {
+    InlineField,
+    ToggleControl,
+    Label,
+    Root,
+    RadioControl,
+    Text,
+    EditInPlace,
+    IconButton,
+} from "@vector-im/compound-web";
+import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
@@ -27,7 +37,9 @@ import dis from "../../../dispatcher/dispatcher";
 import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload";
 import { Action } from "../../../dispatcher/actions";
 import { useTheme } from "../../../hooks/useTheme";
-import { findHighContrastTheme, getOrderedThemes } from "../../../theme";
+import { findHighContrastTheme, getOrderedThemes, CustomTheme as CustomThemeType, ITheme } from "../../../theme";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { logger } from "../../../../../matrix-js-sdk/src/logger";
 
 /**
  * Interface for the theme state
@@ -49,9 +61,13 @@ function useThemeState(): [ThemeState, Dispatch<React.SetStateAction<ThemeState>
     return [themeState, setThemeState];
 }
 
+/**
+ * Panel to choose the theme
+ */
 export function ThemeChoicePanel(): JSX.Element {
     const [themeState, setThemeState] = useThemeState();
     const themeWatcher = useRef(new ThemeWatcher());
+    const customThemeEnabled = useSettingValue<boolean>("feature_custom_themes");
 
     return (
         <SettingsSubsection heading={_t("common|theme")} newUi={true}>
@@ -68,6 +84,7 @@ export function ThemeChoicePanel(): JSX.Element {
                 disabled={themeState.systemThemeActivated}
                 onChange={(theme) => setThemeState((_themeState) => ({ ..._themeState, theme }))}
             />
+            {customThemeEnabled && <CustomTheme />}
         </SettingsSubsection>
     );
 }
@@ -121,7 +138,7 @@ interface ThemeSelectorProps {
  * Component to select the theme
  */
 function ThemeSelectors({ theme, disabled, onChange }: ThemeSelectorProps): JSX.Element {
-    const orderedThemes = useRef(getThemes());
+    const themes = useThemes();
 
     return (
         <Root
@@ -151,51 +168,183 @@ function ThemeSelectors({ theme, disabled, onChange }: ThemeSelectorProps): JSX.
                 dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme, forceTheme: newTheme });
             }}
         >
-            {orderedThemes.current.map((_theme) => (
-                <InlineField
-                    className={classNames("mx_ThemeChoicePanel_themeSelector", {
-                        [`mx_ThemeChoicePanel_themeSelector_enabled`]: !disabled && theme === _theme.id,
-                        [`mx_ThemeChoicePanel_themeSelector_disabled`]: disabled,
-                        // We need to force the compound theme to be light or dark
-                        // The theme selection doesn't depend on the current theme
-                        // For example when the light theme is used, the dark theme selector should be dark
-                        "cpd-theme-light": _theme.id.includes("light"),
-                        "cpd-theme-dark": _theme.id.includes("dark"),
-                    })}
-                    name="themeSelector"
-                    key={`${_theme.id}_${disabled}`}
-                    control={
-                        <RadioControl
-                            name="themeSelector"
-                            defaultChecked={!disabled && theme === _theme.id}
-                            disabled={disabled}
-                            value={_theme.id}
-                        />
-                    }
-                >
-                    <Label className="mx_ThemeChoicePanel_themeSelector_Label">{_theme.name}</Label>
-                </InlineField>
-            ))}
+            {themes.map((_theme) => {
+                return (
+                    <InlineField
+                        className={classNames("mx_ThemeChoicePanel_themeSelector", {
+                            [`mx_ThemeChoicePanel_themeSelector_enabled`]: !disabled && theme === _theme.id,
+                            [`mx_ThemeChoicePanel_themeSelector_disabled`]: disabled,
+                            // We need to force the compound theme to be light or dark
+                            // The theme selection doesn't depend on the current theme
+                            // For example when the light theme is used, the dark theme selector should be dark
+                            "cpd-theme-light": !_theme.isDark,
+                            "cpd-theme-dark": _theme.isDark,
+                        })}
+                        name="themeSelector"
+                        key={`${_theme.id}_${disabled}`}
+                        control={
+                            <RadioControl
+                                name="themeSelector"
+                                defaultChecked={!disabled && theme === _theme.id}
+                                disabled={disabled}
+                                value={_theme.id}
+                            />
+                        }
+                    >
+                        <Label className="mx_ThemeChoicePanel_themeSelector_Label">{_theme.name}</Label>
+                    </InlineField>
+                );
+            })}
         </Root>
     );
 }
 
 /**
- * Get the themes
- * @returns The themes
+ * Return all the available themes
  */
-function getThemes(): ReturnType<typeof getOrderedThemes> {
-    const themes = getOrderedThemes();
+function useThemes(): Array<ITheme & { isDark: boolean }> {
+    const customThemes = useSettingValue<CustomThemeType[] | undefined>("custom_themes");
+    return useMemo(() => {
+        const themes = getOrderedThemes();
+        // Put the custom theme into a map
+        // To easily find the theme by name when going through the themes list
+        const customThemeMap = customThemes?.reduce(
+            (map, theme) => map.set(theme.name, theme),
+            new Map<string, CustomThemeType>(),
+        );
+
+        // Separate the built-in themes from the custom themes
+        // To insert the high contrast theme between them
+        const builtInThemes = themes.filter((theme) => !customThemeMap?.has(theme.name));
+        const otherThemes = themes.filter((theme) => customThemeMap?.has(theme.name));
+
+        const highContrastTheme = makeHighContrastTheme();
+        if (highContrastTheme) builtInThemes.push(highContrastTheme);
+
+        const allThemes = builtInThemes.concat(otherThemes);
+
+        // Check if the themes are dark
+        return allThemes.map((theme) => {
+            const customTheme = customThemeMap?.get(theme.name);
+            const isDark = (customTheme ? customTheme.is_dark : theme.id.includes("dark")) || false;
+            return { ...theme, isDark };
+        });
+    }, [customThemes]);
+}
 
-    // Currently only light theme has a high contrast theme
+/**
+ * Create the light high contrast theme
+ */
+function makeHighContrastTheme(): ITheme | undefined {
     const lightHighContrastId = findHighContrastTheme("light");
     if (lightHighContrastId) {
-        const lightHighContrast = {
+        return {
             name: _t("settings|appearance|high_contrast"),
             id: lightHighContrastId,
         };
-        themes.push(lightHighContrast);
     }
+}
+
+/**
+ * Add and manager custom themes
+ */
+function CustomTheme(): JSX.Element {
+    const [customTheme, setCustomTheme] = useState<string>("");
+    const [error, setError] = useState<string>();
 
-    return themes;
+    return (
+        <>
+            <Text className="mx_ThemeChoicePanel_CustomTheme_header" as="h4" size="lg" weight="semibold">
+                {_t("settings|appearance|custom_themes")}
+            </Text>
+            <div className="mx_ThemeChoicePanel_CustomTheme_container">
+                <EditInPlace
+                    className="mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+                    label={_t("settings|appearance|custom_theme_add")}
+                    saveButtonLabel={_t("settings|appearance|custom_theme_add")}
+                    // TODO
+                    savingLabel={_t("settings|appearance|custom_theme_downloading")}
+                    helpLabel={_t("settings|appearance|custom_theme_help")}
+                    error={error}
+                    value={customTheme}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        setError(undefined);
+                        setCustomTheme(e.target.value);
+                    }}
+                    onSave={async () => {
+                        // The field empty is empty
+                        if (!customTheme) return;
+
+                        // Get the custom themes and do a cheap clone
+                        // To avoid to mutate the original array in the settings
+                        const currentThemes =
+                            SettingsStore.getValue<CustomThemeType[]>("custom_themes").map((t) => t) || [];
+
+                        try {
+                            const r = await fetch(customTheme);
+                            // XXX: need some schema for this
+                            const themeInfo = await r.json();
+                            if (
+                                !themeInfo ||
+                                typeof themeInfo["name"] !== "string" ||
+                                typeof themeInfo["colors"] !== "object"
+                            ) {
+                                setError(_t("settings|appearance|custom_theme_invalid"));
+                                return;
+                            }
+                            currentThemes.push(themeInfo);
+                        } catch (e) {
+                            logger.error(e);
+                            setError(_t("settings|appearance|custom_theme_error_downloading"));
+                            return;
+                        }
+
+                        // Reset the error
+                        setError(undefined);
+                        setCustomTheme("");
+                        await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
+                    }}
+                    onCancel={() => {
+                        setError(undefined);
+                        setCustomTheme("");
+                    }}
+                />
+                <CustomThemeList />
+            </div>
+        </>
+    );
+}
+
+/**
+ * List of the custom themes
+ * @constructor
+ */
+function CustomThemeList(): JSX.Element {
+    const customThemes = useSettingValue<CustomThemeType[]>("custom_themes") || [];
+
+    return (
+        <>
+            {customThemes.map((theme) => {
+                return (
+                    <div key={theme.name} className="mx_ThemeChoicePanel_CustomThemeList">
+                        <span className="mx_ThemeChoicePanel_CustomThemeList_name">{theme.name}</span>
+                        <IconButton
+                            onClick={async () => {
+                                // Get the custom themes and do a cheap clone
+                                // To avoid to mutate the original array in the settings
+                                const currentThemes =
+                                    SettingsStore.getValue<CustomThemeType[]>("custom_themes").map((t) => t) || [];
+
+                                // Remove the theme from the list
+                                const newThemes = currentThemes.filter((t) => t.name !== theme.name);
+                                await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, newThemes);
+                            }}
+                        >
+                            <DeleteIcon className="mx_ThemeChoicePanel_CustomThemeList_delete" />
+                        </IconButton>
+                    </div>
+                );
+            })}
+        </>
+    );
 }