vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add new app themes

Browse Source
This commit is contained in:
jeffvli
2025-12-14 06:06:27 -08:00
parent 0f4534c34c
commit 69de9a98f0
32 changed files with 943 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/i18n/locales/en.json
+2
View File
@@ -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
+35 -35
View File
@@ -187,19 +187,10 @@
pointer-events: none;
background: linear-gradient(
to bottom,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
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%,
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,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin dark {
background: linear-gradient(
to right,
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%,
alpha(var(--theme-colors-background), 0.05) 50%,
darken(var(--theme-colors-background), 5%) 0%,
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,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin dark {
background: linear-gradient(
to left,
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%,
alpha(var(--theme-colors-background), 0.05) 50%,
darken(var(--theme-colors-background), 5%) 0%,
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,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin dark {
background: linear-gradient(
to bottom,
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%,
alpha(var(--theme-colors-background), 0.05) 50%,
darken(var(--theme-colors-background), 5%) 0%,
darken(var(--theme-colors-background), 3%) 50%,
transparent 100%
);
}
src/renderer/features/player/components/playerbar-waveform.tsx
+3 -3
View File
@@ -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
+7 -35
View File
@@ -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({
css: {
content,
enabled: false,
},
});
} else {
openConfirmModal();
}
setSettings({
css: {
content,
enabled: e.currentTarget.checked,
},
});
}}
/>
}
@@ -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
+94 -3
View File
@@ -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
+2
View File
@@ -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
+47 -12
View File
@@ -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(
(state) => state.general,
);
const { followSystemTheme, theme, themeDark, themeLight, useThemeAccentColor } =
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);
}, [accent]);
const themeProperties = getAppTheme(selectedTheme);
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(
(state) => state.general,
);
const { followSystemTheme, theme, themeDark, themeLight, useThemeAccentColor } =
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
+23
View File
@@ -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
+46
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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
+33
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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
+28
View File
@@ -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
+28
View File
@@ -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
+33
View File
@@ -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',
};