Finish theming implementation (finally...)

frontend/theming/theme.ts

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

frontend/theming/themes.ts

@@ -0,0 +1,46 @@
+import {GameyfinClassic} from "./themes/gameyfin-classic";
+import {GameyfinBlue} from "./themes/gameyfin-blue";
+import {GameyfinViolet} from "./themes/gameyfin-violet";
+import {Purple} from "./themes/purple";
+import {Neutral} from "./themes/neutral";
+import {Slate} from "./themes/slate";
+import {Red} from "./themes/red";
+import {Rose} from "./themes/rose";
+import {Blue} from "./themes/blue";
+import {Yellow} from "./themes/yellow";
+import {Violet} from "./themes/violet";
+import {Orange} from "./themes/orange";
+import {Theme} from "./theme";
+import {ConfigTheme, ConfigThemes} from "@nextui-org/react";
+
+
+function light(c: Theme): ConfigTheme {
+    let t: Theme = structuredClone(c);
+    delete t.name;
+    (t as ConfigTheme).extend = "light";
+    return t;
+}
+
+function dark(c: Theme): ConfigTheme {
+    let t: Theme = structuredClone(c);
+    delete t.name;
+    (t as ConfigTheme).extend = "dark";
+    return t;
+}
+
+export function compileThemes(themes: Theme[]): ConfigThemes {
+    let compiledThemes: any = {};
+
+    themes.forEach((c: Theme) => {
+        compiledThemes[`${c.name}-light`] = light(c);
+        compiledThemes[`${c.name}-dark`] = dark(c);
+    })
+
+    return compiledThemes;
+}
+
+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];

frontend/theming/themes/blue.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Blue: Theme = {
+    name: 'blue',
+    colors: {
+        primary: {
+            50: '#e3eeff',
+            100: '#b6cdfe',
+            200: '#88abf7',
+            300: '#5b8af1',
+            400: '#2d69ec',
+            500: '#134fd2',
+            600: '#0b3da4',
+            700: '#052c77',
+            800: '#001a4a',
+            900: '#00091e',
+            DEFAULT: '#2563EB'
+        }
+    }
+};

frontend/theming/themes/gameyfin-blue.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const GameyfinBlue: Theme = {
+    name: 'gameyfin-blue',
+    colors: {
+        primary: {
+            50: '#e7eaff',
+            100: '#bdc3f9',
+            200: '#919bee',
+            300: '#6672e5',
+            400: '#3c4add',
+            500: '#2231c3',
+            600: '#1a2699',
+            700: '#101b6f',
+            800: '#070f45',
+            900: '#02041d',
+            DEFAULT: '#2332c8'
+        }
+    }
+};

frontend/theming/themes/gameyfin-classic.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const GameyfinClassic: Theme = {
+    name: 'gameyfin-classic',
+    colors: {
+        primary: {
+            50: '#e1ffec',
+            100: '#b8f7cf',
+            200: '#8ef0b2',
+            300: '#62ea94',
+            400: '#38e476',
+            500: '#20ca5d',
+            600: '#159d47',
+            700: '#0b7032',
+            800: '#02431d',
+            900: '#001804',
+            DEFAULT: '#16A34A'
+        }
+    }
+};

frontend/theming/themes/gameyfin-violet.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const GameyfinViolet: Theme = {
+    name: 'gameyfin-violet',
+    colors: {
+        primary: {
+            50: '#f3ebff',
+            100: '#d5c7ed',
+            200: '#b7a4dd',
+            300: '#9a7fce',
+            400: '#7d5abe',
+            500: '#6441a5',
+            600: '#4e3281',
+            700: '#37235d',
+            800: '#21153a',
+            900: '#0d0519',
+            DEFAULT: '#6441a5'
+        }
+    }
+};

frontend/theming/themes/neutral.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Neutral: Theme = {
+    name: 'neutral',
+    colors: {
+        primary: {
+            50: '#fceff2',
+            100: '#ddd7d9',
+            200: '#c1bfbf',
+            300: '#a6a6a6',
+            400: '#8c8c8c',
+            500: '#737373',
+            600: '#595959',
+            700: '#413f40',
+            800: '#292526',
+            900: '#16090d',
+            DEFAULT: '#525252'
+        }
+    }
+};

frontend/theming/themes/orange.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Orange: Theme = {
+    name: 'orange',
+    colors: {
+        primary: {
+            50: '#ffedde',
+            100: '#ffcdb2',
+            200: '#fbac84',
+            300: '#f78c54',
+            400: '#f46c25',
+            500: '#da520b',
+            600: '#ab3f07',
+            700: '#7a2d03',
+            800: '#4b1900',
+            900: '#1f0600',
+            DEFAULT: '#EA580C'
+        }
+    }
+};

frontend/theming/themes/purple.ts

@@ -0,0 +1,20 @@
+import {Theme} from "../theme";
+
+export const Purple: Theme = {
+    name: 'purple',
+    colors: {
+        primary: {
+            50: '#ffe6ff',
+            100: '#f2b9f9',
+            200: '#e78df3',
+            300: '#dc5fed',
+            400: '#d132e6',
+            500: '#b91acd',
+            600: '#9012a0',
+            700: '#670b73',
+            800: '#3f0547',
+            900: '#19001b',
+            DEFAULT: '#DD62ED'
+        }
+    }
+};

frontend/theming/themes/red.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Red: Theme = {
+    name: 'red',
+    colors: {
+        primary: {
+            50: '#ffe5e5',
+            100: '#f9bbbb',
+            200: '#ef9090',
+            300: '#e76464',
+            400: '#df3939',
+            500: '#c62020',
+            600: '#9b1718',
+            700: '#6f0f11',
+            800: '#450708',
+            900: '#1e0000',
+            DEFAULT: '#DC2626'
+        }
+    }
+};

frontend/theming/themes/rose.ts

@@ -0,0 +1,20 @@
+import {Theme} from "../theme";
+
+export const Rose: Theme = {
+    name: 'rose',
+    colors: {
+        primary: {
+            50: '#ffe4ed',
+            100: '#fbb9c8',
+            200: '#f28da4',
+            300: '#ec607f',
+            400: '#e5345b',
+            500: '#cb1a41',
+            600: '#9f1233',
+            700: '#730b23',
+            800: '#470415',
+            900: '#1e0006',
+            DEFAULT: '#E11D48'
+        }
+    }
+};

frontend/theming/themes/slate.ts

@@ -0,0 +1,20 @@
+import {Theme} from "../theme";
+
+export const Slate: Theme = {
+    name: 'slate',
+    colors: {
+        primary: {
+            50: '#eaf3ff',
+            100: '#cfd7e4',
+            200: '#b2bdcd',
+            300: '#95a3b7',
+            400: '#7788a1',
+            500: '#5e6f88',
+            600: '#48566a',
+            700: '#323e4d',
+            800: '#1d2531',
+            900: '#040d17',
+            DEFAULT: '#475569'
+        }
+    }
+};

frontend/theming/themes/violet.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Violet: Theme = {
+    name: 'violet',
+    colors: {
+        primary: {
+            50: '#f2e7ff',
+            100: '#d4bdf8',
+            200: '#b592ee',
+            300: '#9867e5',
+            400: '#7b3cdd',
+            500: '#6122c3',
+            600: '#4b1a99',
+            700: '#36126e',
+            800: '#200944',
+            900: '#0d021c',
+            DEFAULT: '#6D28D9'
+        }
+    }
+};

frontend/theming/themes/yellow.ts

@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Yellow: Theme = {
+    name: 'yellow',
+    colors: {
+        primary: {
+            50: '#fffadb',
+            100: '#feefae',
+            200: '#fce47f',
+            300: '#fbd94e',
+            400: '#face1e',
+            500: '#e1b505',
+            600: '#af8c00',
+            700: '#7d6400',
+            800: '#4c3c00',
+            900: '#1c1400',
+            DEFAULT: '#FACC15'
+        }
+    }
+};