import { createTheme, type ThemeOptions } from '@mui/material/styles'; import { flavors } from '@catppuccin/palette'; export type CatppuccinTheme = | 'latte' | 'pink' | 'solarized_light' | 'one_light' | 'paper' | 'frappe' | 'macchiato' | 'mocha' | 'atom' | 'dracula' | 'gruvbox' | 'nord' | 'cyberpunk' | 'forest'; export const isLightTheme = (mode: CatppuccinTheme): boolean => { return ['latte', 'pink', 'solarized_light', 'one_light', 'paper'].includes(mode); }; export const getTheme = (mode: CatppuccinTheme) => { let palette: any; if (mode === 'pink') { palette = { base: { hex: '#fdf6f7' }, surface0: { hex: '#f8e1e5' }, crust: { hex: '#f2ccd5' }, text: { hex: '#4a3135' }, subtext0: { hex: '#7d5c62' }, mauve: { hex: '#e05a8d' }, pink: { hex: '#4ecdc4' }, }; } else if (mode === 'solarized_light') { palette = { base: { hex: '#fdf6e3' }, surface0: { hex: '#eee8d5' }, crust: { hex: '#e3dbbc' }, text: { hex: '#586e75' }, subtext0: { hex: '#839496' }, mauve: { hex: '#6c71c4' }, pink: { hex: '#d33682' }, }; } else if (mode === 'one_light') { palette = { base: { hex: '#fafafa' }, surface0: { hex: '#f0f0f0' }, crust: { hex: '#e5e5e6' }, text: { hex: '#383a42' }, subtext0: { hex: '#a0a1a7' }, mauve: { hex: '#a626a4' }, pink: { hex: '#e45649' }, }; } else if (mode === 'paper') { palette = { base: { hex: '#ffffff' }, surface0: { hex: '#f5f5f5' }, crust: { hex: '#eeeeee' }, text: { hex: '#222222' }, subtext0: { hex: '#666666' }, mauve: { hex: '#007aff' }, pink: { hex: '#ff2d55' }, }; } else if (mode === 'atom') { palette = { base: { hex: '#282c34' }, surface0: { hex: '#353b45' }, crust: { hex: '#21252b' }, text: { hex: '#abb2bf' }, subtext0: { hex: '#5c6370' }, mauve: { hex: '#c678dd' }, pink: { hex: '#e06c75' }, }; } else if (mode === 'dracula') { palette = { base: { hex: '#282a36' }, surface0: { hex: '#44475a' }, crust: { hex: '#191a21' }, text: { hex: '#f8f8f2' }, subtext0: { hex: '#6272a4' }, mauve: { hex: '#bd93f9' }, pink: { hex: '#ff79c6' }, }; } else if (mode === 'gruvbox') { palette = { base: { hex: '#282828' }, surface0: { hex: '#3c3836' }, crust: { hex: '#1d2021' }, text: { hex: '#ebdbb2' }, subtext0: { hex: '#928374' }, mauve: { hex: '#d3869b' }, pink: { hex: '#fb4934' }, }; } else if (mode === 'nord') { palette = { base: { hex: '#2e3440' }, surface0: { hex: '#3b4252' }, crust: { hex: '#242933' }, text: { hex: '#eceff4' }, subtext0: { hex: '#d8dee9' }, mauve: { hex: '#b48ead' }, pink: { hex: '#88c0d0' }, }; } else if (mode === 'cyberpunk') { palette = { base: { hex: '#1a1a2e' }, surface0: { hex: '#16213e' }, crust: { hex: '#0f3460' }, text: { hex: '#e94560' }, subtext0: { hex: '#0f3460' }, mauve: { hex: '#e94560' }, pink: { hex: '#00d2ff' }, }; } else if (mode === 'forest') { palette = { base: { hex: '#1b262c' }, surface0: { hex: '#213e3b' }, crust: { hex: '#0f161c' }, text: { hex: '#e8e8e8' }, subtext0: { hex: '#aebb83' }, mauve: { hex: '#4e8d7c' }, pink: { hex: '#aebb83' }, }; } else { const flavor = (flavors as any)[mode]; if (flavor) { palette = flavor.colors; } else { palette = flavors['mocha'].colors; mode = 'mocha'; } } const themeOptions: ThemeOptions = { palette: { mode: isLightTheme(mode) ? 'light' : 'dark', primary: { main: palette.mauve.hex, }, secondary: { main: palette.pink.hex, }, background: { default: palette.base.hex, paper: palette.surface0.hex, }, text: { primary: palette.text.hex, secondary: palette.subtext0.hex, }, }, typography: { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', }, components: { MuiCard: { styleOverrides: { root: { backgroundColor: palette.surface0.hex, color: palette.text.hex, } } }, MuiAppBar: { styleOverrides: { root: { backgroundColor: palette.crust.hex, color: palette.text.hex, } } } } }; return createTheme(themeOptions); };