Implement changing theme color option

Author: AuroraLS3

Plan/react/dashboard/src/components/modal/ColorSelectorModal.jsx

@@ -11,18 +11,25 @@ import ThemeOption from "../theme/ThemeOption.jsx";
 import {useAuth} from "../../hooks/authenticationHook.jsx";
 import AddThemeButton from "../theme/AddThemeButton.jsx";
 
-const ColorSelectorButton = ({color, setColor, disabled, active}) =>
-    <button className={`btn color-chooser ${disabled ? "disabled" : ''} ${active ? 'active' : ''}`}
-            style={{
-                color: nameToContrastCssVariable(color),
-                backgroundColor: nameToCssVariable(color)
-            }}
-            id={"choose-" + color}
-            disabled={disabled}
-            onClick={() => setColor(color)}
-    >
-        <Fa icon={faPalette}/>
-    </button>
+const ColorSelectorButton = ({color, setColor, disabled, active}) => {
+    const validCssColor = color => {
+        return color === 'theme' ? 'reference-colors-theme' : color;
+    }
+    return (
+        <button className={`btn color-chooser ${disabled ? "disabled" : ''} ${active ? 'active' : ''}`}
+                style={{
+                    color: nameToContrastCssVariable(validCssColor(color)),
+                    backgroundColor: nameToCssVariable(validCssColor(color))
+                }}
+                id={"choose-" + color}
+                disabled={disabled}
+                onClick={() => setColor(color)}
+        >
+            <Fa icon={faPalette}/>
+        </button>
+    )
+}
+
 
 const ColorSelectorModal = () => {
     const {t} = useTranslation();

Plan/react/dashboard/src/components/theme/ThemeStyleCss.jsx

@@ -1,11 +1,11 @@
 import {addToObject, flattenObject} from '../../util/mutator';
-import {getContrastColor} from '../../util/colors';
+import {getContrastColor, nameToCssVariable} from '../../util/colors';
 import {getColorConverter} from "../../util/Color.js";
 import {useThemeEditContext} from "../../hooks/context/themeEditContextHook.jsx";
 import {useThemeStorage} from "../../hooks/context/themeContextHook.jsx";
 
 // Function to generate CSS variables from theme data
-const generateThemeCSS = ({applyToClass, colors, nightColors, useCases, nightModeUseCases}) => {
+const generateThemeCSS = ({applyToClass, colors, nightColors, useCases, nightModeUseCases, color}) => {
     const baseVariables = [];
     const nightModeVariables = [];
 
@@ -39,7 +39,9 @@ const generateThemeCSS = ({applyToClass, colors, nightColors, useCases, nightMod
     // });
 
     // Add night mode use case variables
-    const flattenedNightUseCases = addToObject(flattenObject(nightModeUseCases), nightModeUseCases.referenceColors);
+    let flattenedNightUseCases = addToObject(flattenObject(nightModeUseCases), nightModeUseCases.referenceColors);
+    // Override with user selected theme color
+    if (color && color !== 'theme') flattenedNightUseCases = addToObject(flattenedNightUseCases, {theme: nameToCssVariable(color)});
     Object.entries(flattenedNightUseCases).forEach(([key, value]) => {
         if (typeof value === 'string' && value.startsWith('var(--color-')) {
             const referencedColor = value.replace('var(--color-', '').replace(')', '');
@@ -50,7 +52,9 @@ const generateThemeCSS = ({applyToClass, colors, nightColors, useCases, nightMod
 
     const nightModeKeys = Object.keys(flattenedNightUseCases);
     // Add use case variables
-    const flattenedUseCases = addToObject(flattenObject(useCases), useCases.referenceColors);
+    let flattenedUseCases = addToObject(flattenObject(useCases), useCases.referenceColors);
+    // Override with user selected theme color
+    if (color && color !== 'theme') flattenedUseCases = addToObject(flattenedUseCases, {theme: nameToCssVariable(color)});
     Object.entries(flattenedUseCases).forEach(([key, value]) => {
         if (typeof value === 'string' && value.startsWith('var(--color-')) {
             const referencedColor = value.replace('var(--color-', '').replace(')', '');
@@ -80,13 +84,13 @@ ${applyToClass ? `.${applyToClass}.night-mode-colors,.${applyToClass} .night-mod
 
 export const ThemeStyleCss = ({editMode, applyToClass}) => {
     const {
-        loaded,
+        loaded, color,
         currentColors: colors, currentNightColors: nightColors,
         currentUseCases: useCases, currentNightModeUseCases: nightModeUseCases
     } = editMode ? useThemeEditContext() : useThemeStorage();
 
     if (!loaded) return <></>
     return (
-        <style>{generateThemeCSS({applyToClass, colors, nightColors, useCases, nightModeUseCases})}</style>
+        <style>{generateThemeCSS({applyToClass, colors, nightColors, useCases, nightModeUseCases, color})}</style>
     )
 }

Plan/react/dashboard/src/hooks/context/themeContextHook.jsx

@@ -42,7 +42,9 @@ export const ThemeStorageContextProvider = ({children}) => {
     const saveUploadedThemeLocally = (name, themeJson) => {
         const locallyStoredThemes = getLocallyStoredThemes();
         window.localStorage.setItem(`locally-stored-theme-${name}`, JSON.stringify(themeJson));
-        locallyStoredThemes.push(name);
+        if (!locallyStoredThemes.includes(name)) {
+            locallyStoredThemes.push(name);
+        }
         window.localStorage.setItem(`locally-stored-themes`, JSON.stringify(locallyStoredThemes));
     }
 
@@ -77,11 +79,21 @@ export const ThemeStorageContextProvider = ({children}) => {
     }, [theme.loaded, currentTheme]);
 
     const sharedState = useMemo(() => {
+        const themeOptions = (theme.nightModeEnabled
+            ? currentNightModeUseCases?.themeColorOptions
+            : currentUseCases?.themeColorOptions) || [];
+        const colorExistsAsOption = themeOptions.includes(color);
         return {
-            loaded, name: currentTheme, currentColors, currentNightColors, currentUseCases, currentNightModeUseCases,
+            loaded,
+            name: currentTheme,
+            color: colorExistsAsOption ? color : undefined,
+            currentColors,
+            currentNightColors,
+            currentUseCases,
+            currentNightModeUseCases,
             cloneThemeLocally, saveUploadedThemeLocally, deleteThemeLocally, reloadTheme
         }
-    }, [name, currentColors, currentNightColors, currentUseCases, currentNightModeUseCases, loaded]);
+    }, [name, color, currentColors, currentNightColors, currentUseCases, currentNightModeUseCases, loaded, theme.nightModeEnabled]);
     return (<ThemeStorageContext.Provider value={sharedState}>
             {children}
         </ThemeStorageContext.Provider>