74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { createTheme } from '@mui/material/styles'
|
|
|
|
export type AppThemeId = 'hydrus-dark' | 'ocean' | 'ember' | 'paper'
|
|
|
|
type ThemePreset = {
|
|
id: AppThemeId
|
|
label: string
|
|
description: string
|
|
}
|
|
|
|
export const APP_THEME_PRESETS: ThemePreset[] = [
|
|
{
|
|
id: 'hydrus-dark',
|
|
label: 'Hydrus Dark',
|
|
description: 'Dark graphite with the original green accent.',
|
|
},
|
|
{
|
|
id: 'ocean',
|
|
label: 'Ocean',
|
|
description: 'Deep blue panels with a cool cyan accent.',
|
|
},
|
|
{
|
|
id: 'ember',
|
|
label: 'Ember',
|
|
description: 'Warm dark surfaces with a copper highlight.',
|
|
},
|
|
{
|
|
id: 'paper',
|
|
label: 'Paper Light',
|
|
description: 'Clean light interface with ink-blue accents.',
|
|
},
|
|
]
|
|
|
|
export function createAppTheme(themeId: AppThemeId) {
|
|
switch (themeId) {
|
|
case 'ocean':
|
|
return createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
primary: { main: '#4cc9f0' },
|
|
secondary: { main: '#90e0ef' },
|
|
background: { default: '#07141d', paper: '#0d1e2b' },
|
|
},
|
|
})
|
|
case 'ember':
|
|
return createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
primary: { main: '#ff7a3d' },
|
|
secondary: { main: '#ffb26b' },
|
|
background: { default: '#17110f', paper: '#241714' },
|
|
},
|
|
})
|
|
case 'paper':
|
|
return createTheme({
|
|
palette: {
|
|
mode: 'light',
|
|
primary: { main: '#1f4d7a' },
|
|
secondary: { main: '#6785a3' },
|
|
background: { default: '#f2efe8', paper: '#fffdf8' },
|
|
},
|
|
})
|
|
case 'hydrus-dark':
|
|
default:
|
|
return createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
primary: { main: '#1db954' },
|
|
secondary: { main: '#6ee7a2' },
|
|
background: { default: '#0f1113', paper: '#151617' },
|
|
},
|
|
})
|
|
}
|
|
} |