ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to "colorSchemes" from "palette" API in mui theme

Browse Source 
"colorSchemes" is the preferred api starting from mui v6
This commit is contained in:
schroda
2025-01-16 12:14:15 +01:00
parent 9255386b1c
commit a22a4bf546
14 changed files with 493 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
src/modules/theme/Themes.ts
View File

@@ -6,22 +6,40 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ThemeOptions } from '@mui/material/styles';
import { CssVarsThemeOptions } from '@mui/material/styles';
import { t as translate } from 'i18next';
export type TBaseTheme = { isCustom: boolean; getName: () => string; muiTheme: ThemeOptions };
export type TBaseTheme = {
isCustom: boolean;
getName: () => string;
muiTheme: Omit<CssVarsThemeOptions, 'activeMode'>;
};
export const themes = {
default: {
isCustom: false,
getName: () => translate('global.label.default'),
muiTheme: {
palette: {
primary: {
main: '#5b74ef',
colorSchemes: {
light: {
palette: {
primary: {
main: '#5b74ef',
},
secondary: {
main: '#efd65b',
},
},
},
secondary: {
main: '#efd65b',
dark: {
palette: {
primary: {
main: '#5b74ef',
},
secondary: {
main: '#efd65b',
},
},
},
},
},
@@ -30,12 +48,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.lavender'),
muiTheme: {
palette: {
primary: {
main: '#5c58dc',
colorSchemes: {
light: {
palette: {
primary: {
main: '#5c58dc',
},
secondary: {
main: '#d8dc58',
},
},
},
secondary: {
main: '#d8dc58',
dark: {
palette: {
primary: {
main: '#5c58dc',
},
secondary: {
main: '#d8dc58',
},
},
},
},
},
@@ -44,12 +76,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.dune'),
muiTheme: {
palette: {
primary: {
main: '#897869',
colorSchemes: {
light: {
palette: {
primary: {
main: '#897869',
},
secondary: {
main: '#697a89',
},
},
},
secondary: {
main: '#697a89',
dark: {
palette: {
primary: {
main: '#897869',
},
secondary: {
main: '#697a89',
},
},
},
},
},
@@ -58,12 +104,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.rosegold'),
muiTheme: {
palette: {
primary: {
main: '#E9A7A1',
colorSchemes: {
light: {
palette: {
primary: {
main: '#E9A7A1',
},
secondary: {
main: '#A1E3E9',
},
},
},
secondary: {
main: '#A1E3E9',
dark: {
palette: {
primary: {
main: '#E9A7A1',
},
secondary: {
main: '#A1E3E9',
},
},
},
},
},
@@ -72,12 +132,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.forest_dew'),
muiTheme: {
palette: {
primary: {
main: '#53a584',
colorSchemes: {
light: {
palette: {
primary: {
main: '#53a584',
},
secondary: {
main: '#a55374',
},
},
},
secondary: {
main: '#a55374',
dark: {
palette: {
primary: {
main: '#53a584',
},
secondary: {
main: '#a55374',
},
},
},
},
},
@@ -86,12 +160,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.mountain_sunset'),
muiTheme: {
palette: {
primary: {
main: '#c55a77',
colorSchemes: {
light: {
palette: {
primary: {
main: '#c55a77',
},
secondary: {
main: '#5ac5a8',
},
},
},
secondary: {
main: '#5ac5a8',
dark: {
palette: {
primary: {
main: '#c55a77',
},
secondary: {
main: '#5ac5a8',
},
},
},
},
},
@@ -100,12 +188,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.crimson'),
muiTheme: {
palette: {
primary: {
main: '#DC143C',
colorSchemes: {
light: {
palette: {
primary: {
main: '#DC143C',
},
secondary: {
main: '#14DCB4',
},
},
},
secondary: {
main: '#14DCB4',
dark: {
palette: {
primary: {
main: '#DC143C',
},
secondary: {
main: '#14DCB4',
},
},
},
},
},
@@ -114,12 +216,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.minty_miracles'),
muiTheme: {
palette: {
primary: {
main: '#5CE6A1',
colorSchemes: {
light: {
palette: {
primary: {
main: '#5CE6A1',
},
secondary: {
main: '#E65CA1',
},
},
},
secondary: {
main: '#E65CA1',
dark: {
palette: {
primary: {
main: '#5CE6A1',
},
secondary: {
main: '#E65CA1',
},
},
},
},
},
@@ -128,12 +244,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.orange_juice'),
muiTheme: {
palette: {
primary: {
main: '#ffb546',
colorSchemes: {
light: {
palette: {
primary: {
main: '#ffb546',
},
secondary: {
main: '#4690ff',
},
},
},
secondary: {
main: '#4690ff',
dark: {
palette: {
primary: {
main: '#ffb546',
},
secondary: {
main: '#4690ff',
},
},
},
},
},
@@ -142,12 +272,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.bright_pink'),
muiTheme: {
palette: {
primary: {
main: '#FF007F',
colorSchemes: {
light: {
palette: {
primary: {
main: '#FF007F',
},
secondary: {
main: '#00FF80',
},
},
},
secondary: {
main: '#00FF80',
dark: {
palette: {
primary: {
main: '#FF007F',
},
secondary: {
main: '#00FF80',
},
},
},
},
},
@@ -156,12 +300,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.veronica'),
muiTheme: {
palette: {
primary: {
main: '#A020F0',
colorSchemes: {
light: {
palette: {
primary: {
main: '#A020F0',
},
secondary: {
main: '#70F020',
},
},
},
secondary: {
main: '#70F020',
dark: {
palette: {
primary: {
main: '#A020F0',
},
secondary: {
main: '#70F020',
},
},
},
},
},
@@ -170,12 +328,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.tree_frog_green'),
muiTheme: {
palette: {
primary: {
main: '#8ace31',
colorSchemes: {
light: {
palette: {
primary: {
main: '#8ace31',
},
secondary: {
main: '#7531CE',
},
},
},
secondary: {
main: '#7531CE',
dark: {
palette: {
primary: {
main: '#8ace31',
},
secondary: {
main: '#7531CE',
},
},
},
},
},