mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 20:40:15 +02:00
add new app themes
This commit is contained in:
jeffvli
@@ -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>;
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
Reference in New Issue
Block a user