Added colorblind theme

Refactored other themes & theming in general

src/main/frontend/components/theming/ThemePreview.tsx

@@ -1,18 +1,23 @@
 import {Theme} from "Frontend/theming/theme";
 import {Tooltip} from "@nextui-org/react";
 
-export default function ThemePreview({theme, mode, isSelected}: {
+export default function ThemePreview({theme, isSelected}: {
     theme: Theme,
-    mode: "light" | "dark",
     isSelected?: boolean
 }) {
     return (
         <Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
-            <div className={`
+            <div className={`flex flex-col flex-grow aspect-square border-2 rounded-large overflow-hidden
-                ${theme.name}-${mode}
+                ${theme.name}-dark
-                bg-primary p-6 border-2 rounded-full
+                ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}>
-                ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
+                <div className="flex-1 bg-primary"/>
-            />
+                <div className="basis-1/4 flex flex-row">
+                    <div className="flex-1 bg-secondary"/>
+                    <div className="flex-1 bg-success"/>
+                    <div className="flex-1 bg-warning"/>
+                    <div className="flex-1 bg-danger"/>
+                </div>
+            </div>
         </Tooltip>
     );
 }

src/main/frontend/components/theming/ThemeSelector.tsx

@@ -1,7 +1,6 @@
 import {useTheme} from "next-themes";
-import React, {useLayoutEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
-import {Switch} from "@nextui-org/react";
+import {Button, Card, Divider, Select, Selection, SelectItem} from "@nextui-org/react";
-import {Moon, SunDim} from "@phosphor-icons/react";
 import {themes} from "Frontend/theming/themes";
 import {Theme} from "Frontend/theming/theme";
 import ThemePreview from "Frontend/components/theming/ThemePreview";
@@ -9,47 +8,68 @@ import ThemePreview from "Frontend/components/theming/ThemePreview";
 export function ThemeSelector() {
 
     const {theme, setTheme} = useTheme();
-    const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
+    const [selectedTheme, setSelectedTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
-    const [currentTheme, setCurrentTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
+    const [selectedMode, setSelectedMode] = useState<Selection>();
 
-    useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
+    useEffect(() => {
+        if (!selectedMode)
+            setSelectedMode(new Set([theme?.split('-').pop() ?? "dark"]));
+    }, [theme]);
 
-    function mode(): "light" | "dark" {
+    useEffect(updateTheme, [selectedTheme, selectedMode]);
-        return isSelected ? "light" : "dark";
+
+    function updateTheme() {
+        if (selectedMode instanceof Set)
+            setTheme(`${selectedTheme}-${selectedMode.values().next().value}`)
     }
 
     return (
-        <div className="flex flex-col size-full items-center">
+        <div className="flex flex-col items-center gap-8">
-            <div className="w-full flex flex-row items-center justify-center gap-4 mb-16">
+            <Select label="Theme mode" className="max-w-xs"
-                <Switch
+                    disallowEmptySelection
-                    size="lg"
+                    selectionMode={"single"}
-                    startContent={<SunDim size={32}/>}
+                    defaultSelectedKeys={selectedMode}
-                    endContent={<Moon size={32}/>}
+                    onSelectionChange={setSelectedMode}
-                    isSelected={isSelected}
+                    selectedKeys={selectedMode}>
-                    onValueChange={() => {
+                <SelectItem key="light">
-                        setIsSelected(!isSelected);
+                    Light
-                    }}
+                </SelectItem>
-                />
+                <SelectItem key="dark">
-
+                    Dark
-            </div>
+                </SelectItem>
-            <div className="grid grid-flow-col auto-cols-auto auto-cols-max-4 gap-8">
+            </Select>
+            <div className="grid grid-flow-row grid-cols-8 gap-8">
                 {
                     //min-w-[468px]
                     themes.map(((t: Theme) => (
-                        <div
+                        <div className="size-[10vh] min-h-[50px] min-w-[50px]"
-                            key={t.name}
+                             key={t.name}
-                            onClick={() => {
+                             onClick={() => setSelectedTheme(t.name)}>
-                                setCurrentTheme(t.name);
-                                setTheme(`${t.name}-${mode()}`);
-                            }}>
                             <ThemePreview
                                 theme={t}
-                                mode={mode()}
+                                isSelected={selectedTheme === t.name}/>
-                                isSelected={currentTheme === t.name}/>
                         </div>
                     )))
                 }
             </div>
+            <p className="text-2xl font-semibold mt-8">Preview</p>
+            <Divider/>
+            <div className="flex flex-row gap-8 items-baseline">
+                <div className="flex flex-row gap-4">
+                    <Button color="primary">Primary</Button>
+                    <Button color="secondary">Secondary</Button>
+                    <Button color="success">Success</Button>
+                    <Button color="warning">Warning</Button>
+                    <Button color="danger">Danger</Button>
+                </div>
+                <Card className="flex flex-row gap-4 p-4">
+                    <Button color="primary">Primary</Button>
+                    <Button color="secondary">Secondary</Button>
+                    <Button color="success">Success</Button>
+                    <Button color="warning">Warning</Button>
+                    <Button color="danger">Danger</Button>
+                </Card>
+            </div>
         </div>
     )
 }

src/main/frontend/theming/theme.ts

@@ -1,21 +1,26 @@
+type ColorPalette = {
+    100: string,
+    200: string,
+    300: string,
+    400: string,
+    500: string,
+    600: string,
+    700: string,
+    800: string,
+    900: string,
+    DEFAULT: string
+}
+
 export type Theme = {
     name?: string,
     colors: {
         background?: string,
         foreground?: string,
-        primary: {
+        primary: ColorPalette,
-            50: string,
+        secondary?: ColorPalette,
-            100: string,
+        success?: ColorPalette,
-            200: string,
+        warning?: ColorPalette,
-            300: string,
+        danger?: ColorPalette,
-            400: string,
-            500: string,
-            600: string,
-            700: string,
-            800: string,
-            900: string,
-            DEFAULT: string
-        },
         focus?: string,
     }
 }

src/main/frontend/theming/themes.ts

@@ -10,6 +10,7 @@ import {Blue} from "./themes/blue";
 import {Yellow} from "./themes/yellow";
 import {Violet} from "./themes/violet";
 import {Orange} from "./themes/orange";
+import {Colorblind} from "./themes/colorblind";
 import {Theme} from "./theme";
 import {ConfigTheme, ConfigThemes} from "@nextui-org/react";
 
@@ -43,4 +44,4 @@ export function themeNames(): string[] {
     return Object.keys(compileThemes(themes));
 }
 
-export const themes: Theme[] = [GameyfinBlue, GameyfinViolet, GameyfinClassic, Neutral, Slate, Red, Rose, Orange, Purple, Blue, Yellow, Violet];
+export const themes: Theme[] = [GameyfinBlue, GameyfinViolet, GameyfinClassic, Neutral, Slate, Red, Rose, Orange, Purple, Blue, Yellow, Violet, Colorblind];

src/main/frontend/theming/themes/blue.ts

@@ -4,7 +4,7 @@ export const Blue: Theme = {
     name: 'blue',
     colors: {
         primary: {
-            50: '#e3eeff',
+            DEFAULT: '#2563EB',
             100: '#b6cdfe',
             200: '#88abf7',
             300: '#5b8af1',
@@ -13,8 +13,19 @@ export const Blue: Theme = {
             600: '#0b3da4',
             700: '#052c77',
             800: '#001a4a',
-            900: '#00091e',
+            900: '#00091e'
-            DEFAULT: '#2563EB'
+        },
+        secondary: {
+            DEFAULT: '#d29613',
+            100: '#faebcc',
+            200: '#f5d898',
+            300: '#f1c465',
+            400: '#ecb132',
+            500: '#d29613',
+            600: '#a87810',
+            700: '#7e5a0c',
+            800: '#543c08',
+            900: '#2a1e04'
         }
     }
 };

src/main/frontend/theming/themes/colorblind.ts

@@ -0,0 +1,67 @@
+import {Theme} from '../theme';
+
+export const Colorblind: Theme = {
+    name: 'colorblind',
+    colors: {
+        primary: {
+            DEFAULT: '#cc79a7',
+            900: '#2f1222',
+            800: '#5f2444',
+            700: '#8e3666',
+            600: '#bb4b88',
+            500: '#cc79a7',
+            400: '#d795b9',
+            300: '#e1afca',
+            200: '#ebcadc',
+            100: '#f5e4ed'
+        },
+        secondary: {
+            DEFAULT: '#0072b2',
+            900: '#001724',
+            800: '#002d47',
+            700: '#00446b',
+            600: '#005a8f',
+            500: '#0072b2',
+            400: '#009bf5',
+            300: '#38b6ff',
+            200: '#7aceff',
+            100: '#bde7ff'
+        },
+        success: {
+            DEFAULT: '#009e73',
+            900: '#002017',
+            800: '#003f2e',
+            700: '#005f46',
+            600: '#007e5d',
+            500: '#009e73',
+            400: '#00e4a8',
+            300: '#2cffc7',
+            200: '#72ffd9',
+            100: '#b9ffec'
+        },
+        warning: {
+            DEFAULT: '#e69f00',
+            900: '#2e1f00',
+            800: '#5c3f00',
+            700: '#8a5e00',
+            600: '#b87d00',
+            500: '#e69f00',
+            400: '#ffb81f',
+            300: '#ffca57',
+            200: '#ffdb8f',
+            100: '#ffedc7'
+        },
+        danger: {
+            DEFAULT: '#d55e00',
+            900: '#2b1300',
+            800: '#562500',
+            700: '#813800',
+            600: '#ab4a00',
+            500: '#d55e00',
+            400: '#ff7912',
+            300: '#ff9a4e',
+            200: '#ffbc89',
+            100: '#ffddc4'
+        }
+    }
+};

src/main/frontend/theming/themes/gameyfin-blue.ts

@@ -4,7 +4,7 @@ export const GameyfinBlue: Theme = {
     name: 'gameyfin-blue',
     colors: {
         primary: {
-            50: '#e7eaff',
+            DEFAULT: '#2332c8',
             100: '#bdc3f9',
             200: '#919bee',
             300: '#6672e5',
@@ -13,8 +13,19 @@ export const GameyfinBlue: Theme = {
             600: '#1a2699',
             700: '#101b6f',
             800: '#070f45',
-            900: '#02041d',
+            900: '#02041d'
-            DEFAULT: '#2332c8'
+        },
+        secondary: {
+            DEFAULT: '#c3b422',
+            100: '#f7f3cf',
+            200: '#eee6a0',
+            300: '#e6da70',
+            400: '#ddce40',
+            500: '#c3b422',
+            600: '#9c8f1c',
+            700: '#756b15',
+            800: '#4e480e',
+            900: '#272407',
         }
     }
 };

src/main/frontend/theming/themes/gameyfin-classic.ts

@@ -4,7 +4,7 @@ export const GameyfinClassic: Theme = {
     name: 'gameyfin-classic',
     colors: {
         primary: {
-            50: '#e1ffec',
+            DEFAULT: '#16A34A',
             100: '#b8f7cf',
             200: '#8ef0b2',
             300: '#62ea94',
@@ -13,8 +13,19 @@ export const GameyfinClassic: Theme = {
             600: '#159d47',
             700: '#0b7032',
             800: '#02431d',
-            900: '#001804',
+            900: '#001804'
-            DEFAULT: '#16A34A'
+        },
+        secondary: {
+            DEFAULT: '#ca208d',
+            100: '#f8cfe9',
+            200: '#f0a0d3',
+            300: '#e970bc',
+            400: '#e140a6',
+            500: '#ca208d',
+            600: '#a21970',
+            700: '#7a1354',
+            800: '#510d38',
+            900: '#29061c'
         }
     }
 };

src/main/frontend/theming/themes/gameyfin-violet.ts

@@ -4,7 +4,7 @@ export const GameyfinViolet: Theme = {
     name: 'gameyfin-violet',
     colors: {
         primary: {
-            50: '#f3ebff',
+            DEFAULT: '#6441a5',
             100: '#d5c7ed',
             200: '#b7a4dd',
             300: '#9a7fce',
@@ -13,8 +13,19 @@ export const GameyfinViolet: Theme = {
             600: '#4e3281',
             700: '#37235d',
             800: '#21153a',
-            900: '#0d0519',
+            900: '#0d0519'
-            DEFAULT: '#6441a5'
+        },
+        secondary: {
+            DEFAULT: '#82a541',
+            100: '#e7efd7',
+            200: '#cedfaf',
+            300: '#b6cf87',
+            400: '#9dbf5f',
+            500: '#82a541',
+            600: '#688334',
+            700: '#4e6227',
+            800: '#34421a',
+            900: '#1a210d'
         }
     }
 };

src/main/frontend/theming/themes/neutral.ts

@@ -4,7 +4,7 @@ export const Neutral: Theme = {
     name: 'neutral',
     colors: {
         primary: {
-            50: '#fceff2',
+            DEFAULT: '#525252',
             100: '#ddd7d9',
             200: '#c1bfbf',
             300: '#a6a6a6',
@@ -13,8 +13,19 @@ export const Neutral: Theme = {
             600: '#595959',
             700: '#413f40',
             800: '#292526',
-            900: '#16090d',
+            900: '#16090d'
-            DEFAULT: '#525252'
+        },
+        secondary: {
+            DEFAULT: '#8d8d8d',
+            100: '#e8e8e8',
+            200: '#d1d1d1',
+            300: '#bababa',
+            400: '#a3a3a3',
+            500: '#8d8d8d',
+            600: '#707070',
+            700: '#545454',
+            800: '#383838',
+            900: '#1c1c1c'
         }
     }
 };

src/main/frontend/theming/themes/orange.ts

@@ -4,7 +4,7 @@ export const Orange: Theme = {
     name: 'orange',
     colors: {
         primary: {
-            50: '#ffedde',
+            DEFAULT: '#EA580C',
             100: '#ffcdb2',
             200: '#fbac84',
             300: '#f78c54',
@@ -13,8 +13,19 @@ export const Orange: Theme = {
             600: '#ab3f07',
             700: '#7a2d03',
             800: '#4b1900',
-            900: '#1f0600',
+            900: '#1f0600'
-            DEFAULT: '#EA580C'
+        },
+        secondary: {
+            DEFAULT: '#0b93da',
+            100: '#caebfc',
+            200: '#94d6f9',
+            300: '#5fc2f7',
+            400: '#2aadf4',
+            500: '#0b93da',
+            600: '#0975ae',
+            700: '#075783',
+            800: '#053a57',
+            900: '#021d2c'
         }
     }
 };

src/main/frontend/theming/themes/purple.ts

@@ -4,7 +4,7 @@ export const Purple: Theme = {
     name: 'purple',
     colors: {
         primary: {
-            50: '#ffe6ff',
+            DEFAULT: '#DD62ED',
             100: '#f2b9f9',
             200: '#e78df3',
             300: '#dc5fed',
@@ -13,8 +13,19 @@ export const Purple: Theme = {
             600: '#9012a0',
             700: '#670b73',
             800: '#3f0547',
-            900: '#19001b',
+            900: '#19001b'
-            DEFAULT: '#DD62ED'
+        },
+        secondary: {
+            DEFAULT: '#2ecd1a',
+            100: '#d2f9cd',
+            200: '#a6f29c',
+            300: '#79ec6a',
+            400: '#4de538',
+            500: '#2ecd1a',
+            600: '#26a215',
+            700: '#1c7a10',
+            800: '#13510b',
+            900: '#092905'
         }
     }
 };

src/main/frontend/theming/themes/red.ts

@@ -4,7 +4,7 @@ export const Red: Theme = {
     name: 'red',
     colors: {
         primary: {
-            50: '#ffe5e5',
+            DEFAULT: '#DC2626',
             100: '#f9bbbb',
             200: '#ef9090',
             300: '#e76464',
@@ -13,8 +13,19 @@ export const Red: Theme = {
             600: '#9b1718',
             700: '#6f0f11',
             800: '#450708',
-            900: '#1e0000',
+            900: '#1e0000'
-            DEFAULT: '#DC2626'
+        },
+        secondary: {
+            DEFAULT: '#20c6c6',
+            100: '#cff7f7',
+            200: '#9fefef',
+            300: '#6ee7e7',
+            400: '#3ee0e0',
+            500: '#20c6c6',
+            600: '#1a9e9e',
+            700: '#137676',
+            800: '#0d4f4f',
+            900: '#062727'
         }
     }
 };

src/main/frontend/theming/themes/rose.ts

@@ -4,7 +4,7 @@ export const Rose: Theme = {
     name: 'rose',
     colors: {
         primary: {
-            50: '#ffe4ed',
+            DEFAULT: '#E11D48',
             100: '#fbb9c8',
             200: '#f28da4',
             300: '#ec607f',
@@ -13,8 +13,19 @@ export const Rose: Theme = {
             600: '#9f1233',
             700: '#730b23',
             800: '#470415',
-            900: '#1e0006',
+            900: '#1e0006'
-            DEFAULT: '#E11D48'
+        },
+        secondary: {
+            DEFAULT: '#1acba4',
+            100: '#cdf9ef',
+            200: '#9cf2df',
+            300: '#6aecd0',
+            400: '#38e5c0',
+            500: '#1acba4',
+            600: '#15a284',
+            700: '#107a63',
+            800: '#0b5142',
+            900: '#052921'
         }
     }
 };

src/main/frontend/theming/themes/slate.ts

@@ -4,7 +4,7 @@ export const Slate: Theme = {
     name: 'slate',
     colors: {
         primary: {
-            50: '#eaf3ff',
+            DEFAULT: '#475569',
             100: '#cfd7e4',
             200: '#b2bdcd',
             300: '#95a3b7',
@@ -13,8 +13,19 @@ export const Slate: Theme = {
             600: '#48566a',
             700: '#323e4d',
             800: '#1d2531',
-            900: '#040d17',
+            900: '#040d17'
-            DEFAULT: '#475569'
+        },
+        secondary: {
+            DEFAULT: '#88775e',
+            100: '#e8e4de',
+            200: '#d1c9bd',
+            300: '#baae9c',
+            400: '#a3937b',
+            500: '#88775e',
+            600: '#6c5f4b',
+            700: '#514738',
+            800: '#363026',
+            900: '#1b1813'
         }
     }
 };

src/main/frontend/theming/themes/violet.ts

@@ -4,7 +4,7 @@ export const Violet: Theme = {
     name: 'violet',
     colors: {
         primary: {
-            50: '#f2e7ff',
+            DEFAULT: '#6D28D9',
             100: '#d4bdf8',
             200: '#b592ee',
             300: '#9867e5',
@@ -13,8 +13,19 @@ export const Violet: Theme = {
             600: '#4b1a99',
             700: '#36126e',
             800: '#200944',
-            900: '#0d021c',
+            900: '#0d021c'
-            DEFAULT: '#6D28D9'
+        },
+        secondary: {
+            DEFAULT: '#84c322',
+            100: '#e8f7cf',
+            200: '#d0eea0',
+            300: '#b9e670',
+            400: '#a1dd40',
+            500: '#84c322',
+            600: '#6b9c1c',
+            700: '#507515',
+            800: '#354e0e',
+            900: '#1b2707'
         }
     }
 };

src/main/frontend/theming/themes/yellow.ts

@@ -4,7 +4,7 @@ export const Yellow: Theme = {
     name: 'yellow',
     colors: {
         primary: {
-            50: '#fffadb',
+            DEFAULT: '#FACC15',
             100: '#feefae',
             200: '#fce47f',
             300: '#fbd94e',
@@ -13,8 +13,19 @@ export const Yellow: Theme = {
             600: '#af8c00',
             700: '#7d6400',
             800: '#4c3c00',
-            900: '#1c1400',
+            900: '#1c1400'
-            DEFAULT: '#FACC15'
+        },
+        secondary: {
+            DEFAULT: '#0531e1',
+            100: '#c8d3fe',
+            200: '#91a7fd',
+            300: '#5a7afc',
+            400: '#234efb',
+            500: '#0531e1',
+            600: '#0427b4',
+            700: '#031d87',
+            800: '#02135a',
+            900: '#010a2d'
         }
     }
 };

src/main/frontend/views/SetupView.tsx

@@ -36,7 +36,10 @@ function WelcomeStep() {
 
 function ThemeStep() {
     return (
-        <ThemeSelector/>
+        <div className="flex flex-col flex-grow gap-6 items-center">
+            <p className="text-2xl font-bold">Choose your style</p>
+            <ThemeSelector/>
+        </div>
     );
 }
 
@@ -88,7 +91,7 @@ function SetupView() {
     const navigate = useNavigate();
 
     return (
-        <div className="flex flex-row flex-grow items-center justify-center gradient-primary">
+        <div className="flex flex-row size-full items-center justify-center gradient-primary">
             <Card className="w-3/4 h-3/4 min-w-[500px] p-8">
                 <Wizard
                     initialValues={{username: '', email: '', password: '', passwordRepeat: ''}}