add new app themes

src/i18n/locales/en.json

@@ -657,6 +657,8 @@
         "autoDJ_timing_description": "the number of songs remaining in the queue before auto DJ is triggered",
         "accentColor_description": "sets the accent color for the application",
         "accentColor": "accent color",
+        "useThemeAccentColor": "use theme accent color",
+        "useThemeAccentColor_description": "use the primary color defined in the selected theme instead of the custom accent color",
         "albumBackground_description": "adds a background image for album pages containing the album art",
         "albumBackground": "album background image",
         "albumBackgroundBlur_description": "adjusts the amount of blur applied to the album background image",

src/renderer/components/item-list/item-table-list/item-table-list.module.css

@@ -187,19 +187,10 @@
     pointer-events: none;
     background: linear-gradient(
         to bottom,
-        rgb(0 0 0 / 50%) 0%,
+        darken(var(--theme-colors-background), 10%) 0%,
-        rgb(0 0 0 / 5%) 50%,
+        darken(var(--theme-colors-background), 5%) 50%,
         transparent 100%
     );
-
-    @mixin light {
-        background: linear-gradient(
-            to bottom,
-            var(--theme-colors-background) 0%,
-            alpha(var(--theme-colors-background), 0.05) 50%,
-            transparent 100%
-        );
-    }
 }
 
 .item-table-left-scroll-shadow {
@@ -210,18 +201,21 @@
     z-index: 1;
     width: 8px;
     pointer-events: none;
-    background: linear-gradient(
+
-        to right,
+    @mixin dark {
-        rgb(0 0 0 / 50%) 0%,
+        background: linear-gradient(
-        rgb(0 0 0 / 5%) 50%,
+            to right,
-        transparent 100%
+            darken(var(--theme-colors-background), 10%) 0%,
-    );
+            darken(var(--theme-colors-background), 5%) 50%,
+            transparent 100%
+        );
+    }
 
     @mixin light {
         background: linear-gradient(
             to right,
-            var(--theme-colors-background) 0%,
+            darken(var(--theme-colors-background), 5%) 0%,
-            alpha(var(--theme-colors-background), 0.05) 50%,
+            darken(var(--theme-colors-background), 3%) 50%,
             transparent 100%
         );
     }
@@ -235,18 +229,21 @@
     z-index: 1;
     width: 8px;
     pointer-events: none;
-    background: linear-gradient(
+
-        to left,
+    @mixin dark {
-        rgb(0 0 0 / 50%) 0%,
+        background: linear-gradient(
-        rgb(0 0 0 / 5%) 50%,
+            to left,
-        transparent 100%
+            darken(var(--theme-colors-background), 10%) 0%,
-    );
+            darken(var(--theme-colors-background), 5%) 50%,
+            transparent 100%
+        );
+    }
 
     @mixin light {
         background: linear-gradient(
             to left,
-            var(--theme-colors-background) 0%,
+            darken(var(--theme-colors-background), 5%) 0%,
-            alpha(var(--theme-colors-background), 0.05) 50%,
+            darken(var(--theme-colors-background), 3%) 50%,
             transparent 100%
         );
     }
@@ -260,18 +257,21 @@
     z-index: 1;
     height: 8px;
     pointer-events: none;
-    background: linear-gradient(
+
-        to bottom,
+    @mixin dark {
-        rgb(0 0 0 / 50%) 0%,
+        background: linear-gradient(
-        rgb(0 0 0 / 5%) 50%,
+            to bottom,
-        transparent 100%
+            darken(var(--theme-colors-background), 10%) 0%,
-    );
+            darken(var(--theme-colors-background), 5%) 50%,
+            transparent 100%
+        );
+    }
 
     @mixin light {
         background: linear-gradient(
             to bottom,
-            var(--theme-colors-background) 0%,
+            darken(var(--theme-colors-background), 5%) 0%,
-            alpha(var(--theme-colors-background), 0.05) 50%,
+            darken(var(--theme-colors-background), 3%) 50%,
             transparent 100%
         );
     }

src/renderer/features/player/components/playerbar-waveform.tsx

@@ -14,9 +14,8 @@ import {
     usePlaybackSettings,
     usePlayerSong,
     usePlayerTimestamp,
-    usePrimaryColor,
 } from '/@/renderer/store';
-import { useColorScheme } from '/@/renderer/themes/use-app-theme';
+import { useAppThemeColors, useColorScheme } from '/@/renderer/themes/use-app-theme';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Text } from '/@/shared/components/text/text';
 
@@ -39,7 +38,8 @@ export const PlayerbarWaveform = () => {
 
     const streamUrl = useSongUrl(currentSong, true, transcode);
 
-    const primaryColor = usePrimaryColor();
+    const { color } = useAppThemeColors();
+    const primaryColor = (color['--theme-colors-primary'] as string) || 'rgb(53, 116, 252)';
 
     const colorScheme = useColorScheme();
 

src/renderer/features/settings/components/advanced/styles-settings.tsx

@@ -1,4 +1,3 @@
-import { closeAllModals, openModal } from '@mantine/modals';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -7,7 +6,6 @@ import { useCssSettings, useSettingsStoreActions } from '/@/renderer/store';
 import { sanitizeCss } from '/@/renderer/utils/sanitize';
 import { Button } from '/@/shared/components/button/button';
 import { Code } from '/@/shared/components/code/code';
-import { ConfirmModal } from '/@/shared/components/modal/modal';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
 import { Textarea } from '/@/shared/components/textarea/textarea';
@@ -30,16 +28,6 @@ export const StylesSettings = () => {
         });
     };
 
-    const handleResetToDefault = () => {
-        setSettings({
-            css: {
-                content,
-                enabled: true,
-            },
-        });
-        closeAllModals();
-    };
-
     useEffect(() => {
         if (content !== css) {
             setCss(content);
@@ -47,19 +35,6 @@ export const StylesSettings = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- Reason: This is to only fire if an external source updates the stores css.content
     }, [content]);
 
-    const openConfirmModal = () => {
-        openModal({
-            children: (
-                <ConfirmModal onConfirm={handleResetToDefault}>
-                    <Text color="red !important">
-                        {t('setting.customCssNotice', { postProcess: 'sentenceCase' })}
-                    </Text>
-                </ConfirmModal>
-            ),
-            title: t('setting.customCssEnable', { postProcess: 'sentenceCase' }),
-        });
-    };
-
     return (
         <>
             <SettingsOptions
@@ -67,16 +42,12 @@ export const StylesSettings = () => {
                     <Switch
                         checked={enabled}
                         onChange={(e) => {
-                            if (!e.currentTarget.checked) {
+                            setSettings({
-                                setSettings({
+                                css: {
-                                    css: {
+                                    content,
-                                        content,
+                                    enabled: e.currentTarget.checked,
-                                        enabled: false,
+                                },
-                                    },
+                            });
-                                });
-                            } else {
-                                openConfirmModal();
-                            }
                         }}
                     />
                 }
@@ -84,6 +55,7 @@ export const StylesSettings = () => {
                     context: 'description',
                     postProcess: 'sentenceCase',
                 })}
+                note={t('setting.customCssNotice', { postProcess: 'sentenceCase' })}
                 title={t('setting.customCssEnable', { postProcess: 'sentenceCase' })}
             />
             {enabled && (

src/renderer/features/settings/components/general/theme-settings.tsx

@@ -1,6 +1,8 @@
 import isElectron from 'is-electron';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import i18n from '/@/i18n/i18n';
 import { StylesSettings } from '/@/renderer/features/settings/components/advanced/styles-settings';
 import {
     SettingOption,
@@ -9,19 +11,83 @@ import {
 import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 import { THEME_DATA, useSetColorScheme } from '/@/renderer/themes/use-app-theme';
 import { ColorInput } from '/@/shared/components/color-input/color-input';
+import { Group } from '/@/shared/components/group/group';
 import { Select } from '/@/shared/components/select/select';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
+import { getAppTheme } from '/@/shared/themes/app-theme';
 import { AppTheme } from '/@/shared/themes/app-theme-types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
+const getThemeSwatchColors = (theme: AppTheme) => {
+    const themeConfig = getAppTheme(theme);
+    return {
+        background: themeConfig.colors?.background || 'rgb(0, 0, 0)',
+        foreground: themeConfig.colors?.foreground || 'rgb(255, 255, 255)',
+        surface: themeConfig.colors?.surface || themeConfig.colors?.background || 'rgb(0, 0, 0)',
+    };
+};
+
+const getGroupedThemeData = () => {
+    const darkThemes = THEME_DATA.filter((theme) => theme.type === 'dark').sort((a, b) =>
+        a.label.localeCompare(b.label),
+    );
+    const lightThemes = THEME_DATA.filter((theme) => theme.type === 'light').sort((a, b) =>
+        a.label.localeCompare(b.label),
+    );
+
+    return [
+        {
+            group: i18n.t('setting.themeDark', { postProcess: 'sentenceCase' }),
+            items: darkThemes,
+        },
+        {
+            group: i18n.t('setting.themeLight', { postProcess: 'sentenceCase' }),
+            items: lightThemes,
+        },
+    ];
+};
+
+const ColorSwatch = ({ color }: { color: string }) => {
+    return (
+        <div
+            style={{
+                backgroundColor: color,
+                border: '1px solid rgba(0, 0, 0, 0.1)',
+                borderRadius: '3px',
+                boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+                height: '14px',
+                width: '14px',
+            }}
+        />
+    );
+};
+
+const renderThemeOption = ({ option }: { option: { label: string; value: string } }) => {
+    const themeValue = option.value as AppTheme;
+    const colors = getThemeSwatchColors(themeValue);
+
+    return (
+        <Group gap="sm" style={{ alignItems: 'center', flex: 1 }}>
+            <Group gap={4} style={{ alignItems: 'center', flexShrink: 0 }}>
+                <ColorSwatch color={String(colors.background)} />
+                <ColorSwatch color={String(colors.surface)} />
+                <ColorSwatch color={String(colors.foreground)} />
+            </Group>
+            <span style={{ flex: 1 }}>{option.label}</span>
+        </Group>
+    );
+};
+
 export const ThemeSettings = () => {
     const { t } = useTranslation();
     const settings = useGeneralSettings();
     const { setSettings } = useSettingsStoreActions();
     const { setColorScheme } = useSetColorScheme();
 
+    const groupedThemeData = useMemo(() => getGroupedThemeData(), []);
+
     const themeOptions: SettingOption[] = [
         {
             control: (
@@ -57,7 +123,7 @@ export const ThemeSettings = () => {
         {
             control: (
                 <Select
-                    data={THEME_DATA}
+                    data={groupedThemeData}
                     defaultValue={settings.theme}
                     onChange={(e) => {
                         const theme = e as AppTheme;
@@ -77,6 +143,7 @@ export const ThemeSettings = () => {
                             localSettings.themeSet(colorScheme);
                         }
                     }}
+                    renderOption={renderThemeOption}
                 />
             ),
             description: t('setting.theme', {
@@ -89,7 +156,7 @@ export const ThemeSettings = () => {
         {
             control: (
                 <Select
-                    data={THEME_DATA}
+                    data={groupedThemeData}
                     defaultValue={settings.themeDark}
                     onChange={(e) => {
                         setSettings({
@@ -99,6 +166,7 @@ export const ThemeSettings = () => {
                             },
                         });
                     }}
+                    renderOption={renderThemeOption}
                 />
             ),
             description: t('setting.themeDark', {
@@ -111,7 +179,7 @@ export const ThemeSettings = () => {
         {
             control: (
                 <Select
-                    data={THEME_DATA}
+                    data={groupedThemeData}
                     defaultValue={settings.themeLight}
                     onChange={(e) => {
                         setSettings({
@@ -121,6 +189,7 @@ export const ThemeSettings = () => {
                             },
                         });
                     }}
+                    renderOption={renderThemeOption}
                 />
             ),
             description: t('setting.themeLight', {
@@ -130,11 +199,33 @@ export const ThemeSettings = () => {
             isHidden: !settings.followSystemTheme,
             title: t('setting.themeLight', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    checked={settings.useThemeAccentColor}
+                    onChange={(e) => {
+                        setSettings({
+                            general: {
+                                ...settings,
+                                useThemeAccentColor: e.currentTarget.checked,
+                            },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.useThemeAccentColor', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.useThemeAccentColor', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Stack align="center">
                     <ColorInput
                         defaultValue={settings.accent}
+                        disabled={settings.useThemeAccentColor}
                         format="rgb"
                         onChangeEnd={(e) => {
                             setSettings({

src/renderer/store/settings.store.ts

@@ -257,6 +257,7 @@ const GeneralSettingsSchema = z.object({
     theme: z.nativeEnum(AppTheme),
     themeDark: z.nativeEnum(AppTheme),
     themeLight: z.nativeEnum(AppTheme),
+    useThemeAccentColor: z.boolean(),
     volumeWheelStep: z.number(),
     volumeWidth: z.number(),
     zoomFactor: z.number(),
@@ -743,6 +744,7 @@ const initialState: SettingsState = {
         theme: AppTheme.DEFAULT_DARK,
         themeDark: AppTheme.DEFAULT_DARK,
         themeLight: AppTheme.DEFAULT_LIGHT,
+        useThemeAccentColor: false,
         volumeWheelStep: 5,
         volumeWidth: 70,
         zoomFactor: 100,

src/renderer/themes/use-app-theme.ts

@@ -10,6 +10,29 @@ import { FontType } from '/@/shared/types/types';
 export const THEME_DATA = [
     { label: 'Default Dark', type: 'dark', value: AppTheme.DEFAULT_DARK },
     { label: 'Default Light', type: 'light', value: AppTheme.DEFAULT_LIGHT },
+    { label: 'Nord', type: 'dark', value: AppTheme.NORD },
+    { label: 'Dracula', type: 'dark', value: AppTheme.DRACULA },
+    { label: 'One Dark', type: 'dark', value: AppTheme.ONE_DARK },
+    { label: 'Solarized Dark', type: 'dark', value: AppTheme.SOLARIZED_DARK },
+    { label: 'Solarized Light', type: 'light', value: AppTheme.SOLARIZED_LIGHT },
+    { label: 'GitHub Dark', type: 'dark', value: AppTheme.GITHUB_DARK },
+    { label: 'GitHub Light', type: 'light', value: AppTheme.GITHUB_LIGHT },
+    { label: 'Monokai', type: 'dark', value: AppTheme.MONOKAI },
+    { label: 'High Contrast Dark', type: 'dark', value: AppTheme.HIGH_CONTRAST_DARK },
+    { label: 'High Contrast Light', type: 'light', value: AppTheme.HIGH_CONTRAST_LIGHT },
+    { label: 'Tokyo Night', type: 'dark', value: AppTheme.TOKYO_NIGHT },
+    { label: 'Catppuccin Mocha', type: 'dark', value: AppTheme.CATPPUCCIN_MOCHA },
+    { label: 'Catppuccin Latte', type: 'light', value: AppTheme.CATPPUCCIN_LATTE },
+    { label: 'Gruvbox Dark', type: 'dark', value: AppTheme.GRUVBOX_DARK },
+    { label: 'Gruvbox Light', type: 'light', value: AppTheme.GRUVBOX_LIGHT },
+    { label: 'Night Owl', type: 'dark', value: AppTheme.NIGHT_OWL },
+    { label: 'Material Dark', type: 'dark', value: AppTheme.MATERIAL_DARK },
+    { label: 'Material Light', type: 'light', value: AppTheme.MATERIAL_LIGHT },
+    { label: 'Ayu Dark', type: 'dark', value: AppTheme.AYU_DARK },
+    { label: 'Ayu Light', type: 'light', value: AppTheme.AYU_LIGHT },
+    { label: 'Shades of Purple', type: 'dark', value: AppTheme.SHADES_OF_PURPLE },
+    { label: 'VS Code Dark+', type: 'dark', value: AppTheme.VSCODE_DARK_PLUS },
+    { label: 'VS Code Light+', type: 'light', value: AppTheme.VSCODE_LIGHT_PLUS },
 ];
 
 export const useAppTheme = (overrideTheme?: AppTheme) => {
@@ -20,9 +43,8 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
     const loadedStylesheetsRef = useRef<Set<string>>(new Set());
     const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
     const [isDarkTheme, setIsDarkTheme] = useState(getCurrentTheme());
-    const { followSystemTheme, theme, themeDark, themeLight } = useSettingsStore(
+    const { followSystemTheme, theme, themeDark, themeLight, useThemeAccentColor } =
-        (state) => state.general,
+        useSettingsStore((state) => state.general);
-    );
 
     const mqListener = (e: any) => {
         setIsDarkTheme(e.matches);
@@ -145,19 +167,28 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
     const appTheme: AppThemeConfiguration = useMemo(() => {
         const themeProperties = getAppTheme(selectedTheme);
 
+        // Use theme's primary color if useThemeAccentColor is enabled, otherwise use custom accent
+        const primaryColor = useThemeAccentColor
+            ? themeProperties.colors?.primary || themeProperties.colors?.['state-info'] || accent
+            : accent;
+
         return {
             ...themeProperties,
             colors: {
                 ...themeProperties.colors,
-                primary: accent,
+                primary: primaryColor,
             },
         };
-    }, [accent, selectedTheme]);
+    }, [accent, selectedTheme, useThemeAccentColor]);
 
     useEffect(() => {
         const root = document.documentElement;
-        root.style.setProperty('--theme-colors-primary', accent);
+        const themeProperties = getAppTheme(selectedTheme);
-    }, [accent]);
+        const primaryColor = useThemeAccentColor
+            ? themeProperties.colors?.primary || themeProperties.colors?.['state-info'] || accent
+            : accent;
+        root.style.setProperty('--theme-colors-primary', primaryColor);
+    }, [accent, selectedTheme, useThemeAccentColor]);
 
     useEffect(() => {
         const root = document.documentElement;
@@ -235,9 +266,8 @@ export const useAppThemeColors = () => {
     const accent = useSettingsStore((store) => store.general.accent);
     const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
     const [isDarkTheme] = useState(getCurrentTheme());
-    const { followSystemTheme, theme, themeDark, themeLight } = useSettingsStore(
+    const { followSystemTheme, theme, themeDark, themeLight, useThemeAccentColor } =
-        (state) => state.general,
+        useSettingsStore((state) => state.general);
-    );
 
     const getSelectedTheme = () => {
         if (followSystemTheme) {
@@ -252,14 +282,19 @@ export const useAppThemeColors = () => {
     const appTheme: AppThemeConfiguration = useMemo(() => {
         const themeProperties = getAppTheme(selectedTheme);
 
+        // Use theme's primary color if useThemeAccentColor is enabled, otherwise use custom accent
+        const primaryColor = useThemeAccentColor
+            ? themeProperties.colors?.primary || themeProperties.colors?.['state-info'] || accent
+            : accent;
+
         return {
             ...themeProperties,
             colors: {
                 ...themeProperties.colors,
-                primary: accent,
+                primary: primaryColor,
             },
         };
-    }, [accent, selectedTheme]);
+    }, [accent, selectedTheme, useThemeAccentColor]);
 
     const themeVars = useMemo(() => {
         return Object.entries(appTheme?.app ?? {})

src/shared/themes/app-theme-types.ts

@@ -3,8 +3,31 @@ import type { MantineThemeOverride } from '@mantine/core';
 import { CSSProperties } from 'react';
 
 export enum AppTheme {
+    AYU_DARK = 'ayuDark',
+    AYU_LIGHT = 'ayuLight',
+    CATPPUCCIN_LATTE = 'catppuccinLatte',
+    CATPPUCCIN_MOCHA = 'catppuccinMocha',
     DEFAULT_DARK = 'defaultDark',
     DEFAULT_LIGHT = 'defaultLight',
+    DRACULA = 'dracula',
+    GITHUB_DARK = 'githubDark',
+    GITHUB_LIGHT = 'githubLight',
+    GRUVBOX_DARK = 'gruvboxDark',
+    GRUVBOX_LIGHT = 'gruvboxLight',
+    HIGH_CONTRAST_DARK = 'highContrastDark',
+    HIGH_CONTRAST_LIGHT = 'highContrastLight',
+    MATERIAL_DARK = 'materialDark',
+    MATERIAL_LIGHT = 'materialLight',
+    MONOKAI = 'monokai',
+    NIGHT_OWL = 'nightOwl',
+    NORD = 'nord',
+    ONE_DARK = 'oneDark',
+    SHADES_OF_PURPLE = 'shadesOfPurple',
+    SOLARIZED_DARK = 'solarizedDark',
+    SOLARIZED_LIGHT = 'solarizedLight',
+    TOKYO_NIGHT = 'tokyoNight',
+    VSCODE_DARK_PLUS = 'vscodeDarkPlus',
+    VSCODE_LIGHT_PLUS = 'vscodeLightPlus',
 }
 
 export type AppThemeConfiguration = Partial<BaseAppThemeConfiguration>;

src/shared/themes/app-theme.ts

@@ -3,13 +3,59 @@ import merge from 'lodash/merge';
 import { AppThemeConfiguration } from './app-theme-types';
 import { AppTheme } from './app-theme-types';
 
+import { ayuDark } from '/@/shared/themes/ayu-dark/ayu-dark';
+import { ayuLight } from '/@/shared/themes/ayu-light/ayu-light';
+import { catppuccinLatte } from '/@/shared/themes/catppuccin-latte/catppuccin-latte';
+import { catppuccinMocha } from '/@/shared/themes/catppuccin-mocha/catppuccin-mocha';
 import { defaultTheme } from '/@/shared/themes/default';
 import { defaultDark } from '/@/shared/themes/default-dark/default-dark';
 import { defaultLight } from '/@/shared/themes/default-light/default-light';
+import { dracula } from '/@/shared/themes/dracula/dracula';
+import { githubDark } from '/@/shared/themes/github-dark/github-dark';
+import { githubLight } from '/@/shared/themes/github-light/github-light';
+import { gruvboxDark } from '/@/shared/themes/gruvbox-dark/gruvbox-dark';
+import { gruvboxLight } from '/@/shared/themes/gruvbox-light/gruvbox-light';
+import { highContrastDark } from '/@/shared/themes/high-contrast-dark/high-contrast-dark';
+import { highContrastLight } from '/@/shared/themes/high-contrast-light/high-contrast-light';
+import { materialDark } from '/@/shared/themes/material-dark/material-dark';
+import { materialLight } from '/@/shared/themes/material-light/material-light';
+import { monokai } from '/@/shared/themes/monokai/monokai';
+import { nightOwl } from '/@/shared/themes/night-owl/night-owl';
+import { nord } from '/@/shared/themes/nord/nord';
+import { oneDark } from '/@/shared/themes/one-dark/one-dark';
+import { shadesOfPurple } from '/@/shared/themes/shades-of-purple/shades-of-purple';
+import { solarizedDark } from '/@/shared/themes/solarized-dark/solarized-dark';
+import { solarizedLight } from '/@/shared/themes/solarized-light/solarized-light';
+import { tokyoNight } from '/@/shared/themes/tokyo-night/tokyo-night';
+import { vscodeDarkPlus } from '/@/shared/themes/vscode-dark-plus/vscode-dark-plus';
+import { vscodeLightPlus } from '/@/shared/themes/vscode-light-plus/vscode-light-plus';
 
 export const appTheme: Record<AppTheme, AppThemeConfiguration> = {
+    [AppTheme.AYU_DARK]: ayuDark,
+    [AppTheme.AYU_LIGHT]: ayuLight,
+    [AppTheme.CATPPUCCIN_LATTE]: catppuccinLatte,
+    [AppTheme.CATPPUCCIN_MOCHA]: catppuccinMocha,
     [AppTheme.DEFAULT_DARK]: defaultDark,
     [AppTheme.DEFAULT_LIGHT]: defaultLight,
+    [AppTheme.DRACULA]: dracula,
+    [AppTheme.GITHUB_DARK]: githubDark,
+    [AppTheme.GITHUB_LIGHT]: githubLight,
+    [AppTheme.GRUVBOX_DARK]: gruvboxDark,
+    [AppTheme.GRUVBOX_LIGHT]: gruvboxLight,
+    [AppTheme.HIGH_CONTRAST_DARK]: highContrastDark,
+    [AppTheme.HIGH_CONTRAST_LIGHT]: highContrastLight,
+    [AppTheme.MATERIAL_DARK]: materialDark,
+    [AppTheme.MATERIAL_LIGHT]: materialLight,
+    [AppTheme.MONOKAI]: monokai,
+    [AppTheme.NIGHT_OWL]: nightOwl,
+    [AppTheme.NORD]: nord,
+    [AppTheme.ONE_DARK]: oneDark,
+    [AppTheme.SHADES_OF_PURPLE]: shadesOfPurple,
+    [AppTheme.SOLARIZED_DARK]: solarizedDark,
+    [AppTheme.SOLARIZED_LIGHT]: solarizedLight,
+    [AppTheme.TOKYO_NIGHT]: tokyoNight,
+    [AppTheme.VSCODE_DARK_PLUS]: vscodeDarkPlus,
+    [AppTheme.VSCODE_LIGHT_PLUS]: vscodeLightPlus,
 };
 
 export const getAppTheme = (theme: AppTheme): AppThemeConfiguration => {

src/shared/themes/ayu-dark/ayu-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const ayuDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(31 36 48 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(31 36 48 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(115, 192, 203, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(115, 192, 203, 40%)',
+    },
+    colors: {
+        background: 'rgb(31, 36, 48)',
+        'background-alternate': 'rgb(23, 27, 36)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(203, 204, 198)',
+        'foreground-muted': 'rgb(170, 173, 166)',
+        primary: 'rgb(115, 192, 203)',
+        'state-error': 'rgb(255, 51, 51)',
+        'state-info': 'rgb(115, 192, 203)',
+        'state-success': 'rgb(186, 230, 126)',
+        'state-warning': 'rgb(255, 204, 102)',
+        surface: 'rgb(39, 46, 57)',
+        'surface-foreground': 'rgb(203, 204, 198)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/ayu-light/ayu-light.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const ayuLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(253 253 253 / 50%) 0%, rgb(253 253 253 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(253, 253, 253, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(55, 118, 171, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(55, 118, 171, 60%)',
+    },
+    colors: {
+        background: 'rgb(253, 253, 253)',
+        'background-alternate': 'rgb(250, 250, 250)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(57, 58, 52)',
+        'foreground-muted': 'rgb(128, 128, 128)',
+        primary: 'rgb(55, 118, 171)',
+        'state-error': 'rgb(255, 51, 51)',
+        'state-info': 'rgb(55, 118, 171)',
+        'state-success': 'rgb(86, 171, 47)',
+        'state-warning': 'rgb(255, 153, 0)',
+        surface: 'rgb(255, 255, 255)',
+        'surface-foreground': 'rgb(57, 58, 52)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/catppuccin-latte/catppuccin-latte.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const catppuccinLatte: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(239 241 245 / 50%) 0%, rgb(239 241 245 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(239, 241, 245, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(30, 102, 245, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(30, 102, 245, 60%)',
+    },
+    colors: {
+        background: 'rgb(239, 241, 245)',
+        'background-alternate': 'rgb(230, 233, 239)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(76, 79, 105)',
+        'foreground-muted': 'rgb(108, 111, 133)',
+        primary: 'rgb(30, 102, 245)',
+        'state-error': 'rgb(210, 15, 57)',
+        'state-info': 'rgb(30, 102, 245)',
+        'state-success': 'rgb(64, 160, 43)',
+        'state-warning': 'rgb(223, 142, 29)',
+        surface: 'rgb(220, 224, 232)',
+        'surface-foreground': 'rgb(76, 79, 105)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/catppuccin-mocha/catppuccin-mocha.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const catppuccinMocha: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(24 24 37 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(24 24 37 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(137, 180, 250, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(137, 180, 250, 40%)',
+    },
+    colors: {
+        background: 'rgb(24, 24, 37)',
+        'background-alternate': 'rgb(17, 17, 27)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(205, 214, 244)',
+        'foreground-muted': 'rgb(186, 194, 222)',
+        primary: 'rgb(137, 180, 250)',
+        'state-error': 'rgb(243, 139, 168)',
+        'state-info': 'rgb(137, 180, 250)',
+        'state-success': 'rgb(166, 227, 161)',
+        'state-warning': 'rgb(250, 179, 135)',
+        surface: 'rgb(30, 30, 46)',
+        'surface-foreground': 'rgb(205, 214, 244)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/dracula/dracula.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const dracula: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(40 42 54 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(40 42 54 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(189, 147, 249, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(189, 147, 249, 40%)',
+    },
+    colors: {
+        background: 'rgb(40, 42, 54)',
+        'background-alternate': 'rgb(30, 31, 41)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(248, 248, 242)',
+        'foreground-muted': 'rgb(189, 147, 249)',
+        primary: 'rgb(189, 147, 249)',
+        'state-error': 'rgb(255, 85, 85)',
+        'state-info': 'rgb(139, 233, 253)',
+        'state-success': 'rgb(80, 250, 123)',
+        'state-warning': 'rgb(255, 184, 108)',
+        surface: 'rgb(68, 71, 90)',
+        'surface-foreground': 'rgb(248, 248, 242)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/github-dark/github-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const githubDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(13 17 23 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(13 17 23 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(88, 166, 255, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(88, 166, 255, 40%)',
+    },
+    colors: {
+        background: 'rgb(13, 17, 23)',
+        'background-alternate': 'rgb(22, 27, 34)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(201, 209, 217)',
+        'foreground-muted': 'rgb(139, 148, 158)',
+        primary: 'rgb(88, 166, 255)',
+        'state-error': 'rgb(248, 81, 73)',
+        'state-info': 'rgb(88, 166, 255)',
+        'state-success': 'rgb(56, 211, 145)',
+        'state-warning': 'rgb(251, 188, 5)',
+        surface: 'rgb(22, 27, 34)',
+        'surface-foreground': 'rgb(201, 209, 217)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/github-light/github-light.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const githubLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(255, 255, 255, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(9, 105, 218, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(9, 105, 218, 60%)',
+    },
+    colors: {
+        background: 'rgb(255, 255, 255)',
+        'background-alternate': 'rgb(246, 248, 250)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(31, 35, 40)',
+        'foreground-muted': 'rgb(101, 109, 118)',
+        primary: 'rgb(9, 105, 218)',
+        'state-error': 'rgb(212, 5, 17)',
+        'state-info': 'rgb(9, 105, 218)',
+        'state-success': 'rgb(26, 127, 100)',
+        'state-warning': 'rgb(191, 136, 0)',
+        surface: 'rgb(246, 248, 250)',
+        'surface-foreground': 'rgb(31, 35, 40)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/gruvbox-dark/gruvbox-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const gruvboxDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(40 40 40 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(40 40 40 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(184, 187, 38, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(184, 187, 38, 40%)',
+    },
+    colors: {
+        background: 'rgb(40, 40, 40)',
+        'background-alternate': 'rgb(29, 32, 33)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(235, 219, 178)',
+        'foreground-muted': 'rgb(189, 174, 147)',
+        primary: 'rgb(184, 187, 38)',
+        'state-error': 'rgb(251, 73, 52)',
+        'state-info': 'rgb(131, 165, 152)',
+        'state-success': 'rgb(184, 187, 38)',
+        'state-warning': 'rgb(250, 189, 47)',
+        surface: 'rgb(50, 48, 47)',
+        'surface-foreground': 'rgb(235, 219, 178)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/gruvbox-light/gruvbox-light.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const gruvboxLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(251 241 199 / 50%) 0%, rgb(251 241 199 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(251, 241, 199, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(121, 116, 14, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(121, 116, 14, 60%)',
+    },
+    colors: {
+        background: 'rgb(251, 241, 199)',
+        'background-alternate': 'rgb(242, 229, 188)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(60, 56, 54)',
+        'foreground-muted': 'rgb(124, 111, 100)',
+        primary: 'rgb(121, 116, 14)',
+        'state-error': 'rgb(204, 36, 29)',
+        'state-info': 'rgb(7, 102, 120)',
+        'state-success': 'rgb(121, 116, 14)',
+        'state-warning': 'rgb(214, 93, 14)',
+        surface: 'rgb(235, 219, 178)',
+        'surface-foreground': 'rgb(60, 56, 54)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/high-contrast-dark/high-contrast-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const highContrastDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(0 0 0 / 95%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(255, 255, 255, 40%)',
+        'scrollbar-handle-hover-background': 'rgba(255, 255, 255, 60%)',
+    },
+    colors: {
+        background: 'rgb(0, 0, 0)',
+        'background-alternate': 'rgb(0, 0, 0)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(255, 255, 255)',
+        'foreground-muted': 'rgb(200, 200, 200)',
+        primary: 'rgb(0, 191, 255)',
+        'state-error': 'rgb(255, 0, 0)',
+        'state-info': 'rgb(0, 191, 255)',
+        'state-success': 'rgb(0, 255, 0)',
+        'state-warning': 'rgb(255, 255, 0)',
+        surface: 'rgb(20, 20, 20)',
+        'surface-foreground': 'rgb(255, 255, 255)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/high-contrast-light/high-contrast-light.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const highContrastLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 100%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(255, 255, 255, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(0, 0, 0, 40%)',
+        'scrollbar-handle-hover-background': 'rgba(0, 0, 0, 60%)',
+    },
+    colors: {
+        background: 'rgb(255, 255, 255)',
+        'background-alternate': 'rgb(255, 255, 255)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(0, 0, 0)',
+        'foreground-muted': 'rgb(50, 50, 50)',
+        primary: 'rgb(0, 0, 255)',
+        'state-error': 'rgb(255, 0, 0)',
+        'state-info': 'rgb(0, 0, 255)',
+        'state-success': 'rgb(0, 128, 0)',
+        'state-warning': 'rgb(255, 140, 0)',
+        surface: 'rgb(240, 240, 240)',
+        'surface-foreground': 'rgb(0, 0, 0)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/material-dark/material-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const materialDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(33 33 33 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(33 33 33 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(33, 150, 243, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(33, 150, 243, 40%)',
+    },
+    colors: {
+        background: 'rgb(33, 33, 33)',
+        'background-alternate': 'rgb(18, 18, 18)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(255, 255, 255)',
+        'foreground-muted': 'rgb(189, 189, 189)',
+        primary: 'rgb(33, 150, 243)',
+        'state-error': 'rgb(244, 67, 54)',
+        'state-info': 'rgb(33, 150, 243)',
+        'state-success': 'rgb(76, 175, 80)',
+        'state-warning': 'rgb(255, 152, 0)',
+        surface: 'rgb(48, 48, 48)',
+        'surface-foreground': 'rgb(255, 255, 255)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/material-light/material-light.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const materialLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(250 250 250 / 50%) 0%, rgb(250 250 250 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(250, 250, 250, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(33, 150, 243, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(33, 150, 243, 60%)',
+    },
+    colors: {
+        background: 'rgb(250, 250, 250)',
+        'background-alternate': 'rgb(255, 255, 255)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(33, 33, 33)',
+        'foreground-muted': 'rgb(117, 117, 117)',
+        primary: 'rgb(33, 150, 243)',
+        'state-error': 'rgb(244, 67, 54)',
+        'state-info': 'rgb(33, 150, 243)',
+        'state-success': 'rgb(76, 175, 80)',
+        'state-warning': 'rgb(255, 152, 0)',
+        surface: 'rgb(255, 255, 255)',
+        'surface-foreground': 'rgb(33, 33, 33)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/monokai/monokai.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const monokai: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(39 40 34 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(39 40 34 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(174, 129, 255, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(174, 129, 255, 40%)',
+    },
+    colors: {
+        background: 'rgb(39, 40, 34)',
+        'background-alternate': 'rgb(30, 31, 28)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(248, 248, 242)',
+        'foreground-muted': 'rgb(117, 113, 94)',
+        primary: 'rgb(174, 129, 255)',
+        'state-error': 'rgb(249, 38, 114)',
+        'state-info': 'rgb(102, 217, 239)',
+        'state-success': 'rgb(166, 226, 46)',
+        'state-warning': 'rgb(253, 151, 31)',
+        surface: 'rgb(50, 51, 45)',
+        'surface-foreground': 'rgb(248, 248, 242)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/night-owl/night-owl.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const nightOwl: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(1 22 39 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(1 22 39 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(130, 170, 255, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(130, 170, 255, 40%)',
+    },
+    colors: {
+        background: 'rgb(1, 22, 39)',
+        'background-alternate': 'rgb(0, 16, 28)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(214, 222, 235)',
+        'foreground-muted': 'rgb(171, 178, 191)',
+        primary: 'rgb(130, 170, 255)',
+        'state-error': 'rgb(255, 123, 172)',
+        'state-info': 'rgb(130, 170, 255)',
+        'state-success': 'rgb(173, 219, 103)',
+        'state-warning': 'rgb(255, 184, 108)',
+        surface: 'rgb(11, 41, 66)',
+        'surface-foreground': 'rgb(214, 222, 235)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/nord/nord.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const nord: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(46 52 64 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(46 52 64 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(136, 192, 208, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(136, 192, 208, 40%)',
+    },
+    colors: {
+        background: 'rgb(46, 52, 64)',
+        'background-alternate': 'rgb(37, 41, 54)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(236, 239, 244)',
+        'foreground-muted': 'rgb(216, 222, 233)',
+        primary: 'rgb(136, 192, 208)',
+        'state-error': 'rgb(191, 97, 106)',
+        'state-info': 'rgb(136, 192, 208)',
+        'state-success': 'rgb(163, 190, 140)',
+        'state-warning': 'rgb(235, 203, 139)',
+        surface: 'rgb(59, 66, 82)',
+        'surface-foreground': 'rgb(236, 239, 244)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/one-dark/one-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const oneDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(40 44 52 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(40 44 52 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(97, 175, 239, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(97, 175, 239, 40%)',
+    },
+    colors: {
+        background: 'rgb(40, 44, 52)',
+        'background-alternate': 'rgb(30, 33, 40)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(171, 178, 191)',
+        'foreground-muted': 'rgb(152, 161, 178)',
+        primary: 'rgb(97, 175, 239)',
+        'state-error': 'rgb(224, 108, 117)',
+        'state-info': 'rgb(97, 175, 239)',
+        'state-success': 'rgb(152, 195, 121)',
+        'state-warning': 'rgb(229, 192, 123)',
+        surface: 'rgb(55, 59, 70)',
+        'surface-foreground': 'rgb(171, 178, 191)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/shades-of-purple/shades-of-purple.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const shadesOfPurple: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(45 43 85 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(45 43 85 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(167, 129, 255, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(167, 129, 255, 40%)',
+    },
+    colors: {
+        background: 'rgb(45, 43, 85)',
+        'background-alternate': 'rgb(37, 35, 69)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(255, 255, 255)',
+        'foreground-muted': 'rgb(255, 255, 255)',
+        primary: 'rgb(167, 129, 255)',
+        'state-error': 'rgb(255, 99, 99)',
+        'state-info': 'rgb(130, 170, 255)',
+        'state-success': 'rgb(10, 255, 157)',
+        'state-warning': 'rgb(255, 184, 108)',
+        surface: 'rgb(58, 56, 102)',
+        'surface-foreground': 'rgb(255, 255, 255)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/solarized-dark/solarized-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const solarizedDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(0 43 54 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(0 43 54 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(38, 139, 210, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(38, 139, 210, 40%)',
+    },
+    colors: {
+        background: 'rgb(0, 43, 54)',
+        'background-alternate': 'rgb(7, 54, 66)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(131, 148, 150)',
+        'foreground-muted': 'rgb(88, 110, 117)',
+        primary: 'rgb(38, 139, 210)',
+        'state-error': 'rgb(220, 50, 47)',
+        'state-info': 'rgb(38, 139, 210)',
+        'state-success': 'rgb(133, 153, 0)',
+        'state-warning': 'rgb(181, 137, 0)',
+        surface: 'rgb(7, 54, 66)',
+        'surface-foreground': 'rgb(131, 148, 150)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/solarized-light/solarized-light.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const solarizedLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(253 246 227 / 50%) 0%, rgb(253 246 227 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(253, 246, 227, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(38, 139, 210, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(38, 139, 210, 60%)',
+    },
+    colors: {
+        background: 'rgb(253, 246, 227)',
+        'background-alternate': 'rgb(238, 232, 213)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(101, 123, 131)',
+        'foreground-muted': 'rgb(147, 161, 161)',
+        primary: 'rgb(38, 139, 210)',
+        'state-error': 'rgb(220, 50, 47)',
+        'state-info': 'rgb(38, 139, 210)',
+        'state-success': 'rgb(133, 153, 0)',
+        'state-warning': 'rgb(181, 137, 0)',
+        surface: 'rgb(238, 232, 213)',
+        'surface-foreground': 'rgb(0, 43, 54)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};

src/shared/themes/tokyo-night/tokyo-night.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const tokyoNight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(26 27 38 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(26 27 38 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(125, 207, 255, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(125, 207, 255, 40%)',
+    },
+    colors: {
+        background: 'rgb(26, 27, 38)',
+        'background-alternate': 'rgb(20, 21, 30)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(192, 202, 245)',
+        'foreground-muted': 'rgb(169, 177, 214)',
+        primary: 'rgb(125, 207, 255)',
+        'state-error': 'rgb(247, 118, 142)',
+        'state-info': 'rgb(125, 207, 255)',
+        'state-success': 'rgb(158, 206, 106)',
+        'state-warning': 'rgb(255, 158, 100)',
+        surface: 'rgb(35, 36, 51)',
+        'surface-foreground': 'rgb(192, 202, 245)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/vscode-dark-plus/vscode-dark-plus.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const vscodeDarkPlus: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(30 30 30 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(30 30 30 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(0, 122, 204, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(0, 122, 204, 40%)',
+    },
+    colors: {
+        background: 'rgb(30, 30, 30)',
+        'background-alternate': 'rgb(24, 24, 24)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(212, 212, 212)',
+        'foreground-muted': 'rgb(170, 170, 170)',
+        primary: 'rgb(0, 122, 204)',
+        'state-error': 'rgb(244, 63, 94)',
+        'state-info': 'rgb(0, 122, 204)',
+        'state-success': 'rgb(89, 185, 89)',
+        'state-warning': 'rgb(255, 184, 108)',
+        surface: 'rgb(37, 37, 38)',
+        'surface-foreground': 'rgb(212, 212, 212)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/vscode-light-plus/vscode-light-plus.ts

@@ -0,0 +1,33 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const vscodeLightPlus: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 80%)), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgba(255, 255, 255, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(0, 122, 204, 30%)',
+        'scrollbar-handle-hover-background': 'rgba(0, 122, 204, 60%)',
+    },
+    colors: {
+        background: 'rgb(255, 255, 255)',
+        'background-alternate': 'rgb(250, 250, 250)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(0, 0, 0)',
+        'foreground-muted': 'rgb(113, 113, 113)',
+        primary: 'rgb(0, 122, 204)',
+        'state-error': 'rgb(229, 20, 0)',
+        'state-info': 'rgb(0, 122, 204)',
+        'state-success': 'rgb(16, 124, 16)',
+        'state-warning': 'rgb(191, 136, 0)',
+        surface: 'rgb(243, 243, 243)',
+        'surface-foreground': 'rgb(0, 0, 0)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mantineOverride: {
+        primaryShade: {
+            light: 4,
+        },
+    },
+    mode: 'light',
+};