220 lines
8.9 KiB
JavaScript
220 lines
8.9 KiB
JavaScript
|
const THEME_PRESETS = {
|
||
|
|
'gitea-dark': {
|
||
|
|
label: 'Gitea Dark', mode: 'dark',
|
||
|
|
bg: '#0d1117', bg_card: '#161b22', bg_nav: '#161b22',
|
||
|
|
text: '#e6edf3', text_muted: '#8b949e', text_dim: '#6e7681',
|
||
|
|
border: '#30363d', border_light: '#21262d',
|
||
|
|
accent: '#58a6ff', accent_hover: '#79c0ff',
|
||
|
|
green: '#3fb950', green_bg: '#12261c',
|
||
|
|
red: '#f85149', red_bg: '#3d1214',
|
||
|
|
orange: '#d29922', orange_bg: '#2d1f0d',
|
||
|
|
purple: '#bc8cff', purple_bg: '#21173d',
|
||
|
|
cyan: '#79c0ff', cyan_bg: '#0a1f3a',
|
||
|
|
pink: '#f778ba', pink_bg: '#2d1524'
|
||
|
|
},
|
||
|
|
'dracula-dark': {
|
||
|
|
label: 'Dracula Dark', mode: 'dark',
|
||
|
|
bg: '#1e1f2b', bg_card: '#282a36', bg_nav: '#21222c',
|
||
|
|
text: '#f8f8f2', text_muted: '#bd93f9', text_dim: '#6272a4',
|
||
|
|
border: '#44475a', border_light: '#383a4a',
|
||
|
|
accent: '#bd93f9', accent_hover: '#caa9fa',
|
||
|
|
green: '#50fa7b', green_bg: '#1a3a2a',
|
||
|
|
red: '#ff5555', red_bg: '#3d1a1a',
|
||
|
|
orange: '#ffb86c', orange_bg: '#3d2e1a',
|
||
|
|
purple: '#bd93f9', purple_bg: '#2a1a3d',
|
||
|
|
cyan: '#8be9fd', cyan_bg: '#1a2a3d',
|
||
|
|
pink: '#ff79c6', pink_bg: '#3d1a2e'
|
||
|
|
},
|
||
|
|
'nord-dark': {
|
||
|
|
label: 'Nord Dark', mode: 'dark',
|
||
|
|
bg: '#2e3440', bg_card: '#3b4252', bg_nav: '#353b49',
|
||
|
|
text: '#eceff4', text_muted: '#81a1c1', text_dim: '#616e88',
|
||
|
|
border: '#4c566a', border_light: '#434c5e',
|
||
|
|
accent: '#88c0d0', accent_hover: '#8fbcbb',
|
||
|
|
green: '#a3be8c', green_bg: '#1a2e1a',
|
||
|
|
red: '#bf616a', red_bg: '#2e1a1a',
|
||
|
|
orange: '#d08770', orange_bg: '#2e221a',
|
||
|
|
purple: '#b48ead', purple_bg: '#221a2e',
|
||
|
|
cyan: '#88c0d0', cyan_bg: '#1a222e',
|
||
|
|
pink: '#b48ead', pink_bg: '#2e1a22'
|
||
|
|
},
|
||
|
|
'monokai-dark': {
|
||
|
|
label: 'Monokai Dark', mode: 'dark',
|
||
|
|
bg: '#272822', bg_card: '#3e3d32', bg_nav: '#2d2d26',
|
||
|
|
text: '#f8f8f2', text_muted: '#a6e22e', text_dim: '#75715e',
|
||
|
|
border: '#49483e', border_light: '#3b3a30',
|
||
|
|
accent: '#f92672', accent_hover: '#fd5ff0',
|
||
|
|
green: '#a6e22e', green_bg: '#1a3a0a',
|
||
|
|
red: '#f92672', red_bg: '#3d0a1a',
|
||
|
|
orange: '#fd971f', orange_bg: '#3d220a',
|
||
|
|
purple: '#ae81ff', purple_bg: '#1a0a3d',
|
||
|
|
cyan: '#66d9ef', cyan_bg: '#0a2a3d',
|
||
|
|
pink: '#f92672', pink_bg: '#3d0a1a'
|
||
|
|
},
|
||
|
|
'cyberpunk': {
|
||
|
|
label: 'Cyberpunk', mode: 'dark',
|
||
|
|
bg: '#0a0a1a', bg_card: '#12122a', bg_nav: '#0e0e22',
|
||
|
|
text: '#e0e0ff', text_muted: '#00ff41', text_dim: '#5555aa',
|
||
|
|
border: '#1a1a4a', border_light: '#15153a',
|
||
|
|
accent: '#00ff41', accent_hover: '#33ff66',
|
||
|
|
green: '#00ff41', green_bg: '#002a0a',
|
||
|
|
red: '#ff0040', red_bg: '#2a000a',
|
||
|
|
orange: '#ff6600', orange_bg: '#2a1500',
|
||
|
|
purple: '#aa00ff', purple_bg: '#15002a',
|
||
|
|
cyan: '#00ffff', cyan_bg: '#002a2a',
|
||
|
|
pink: '#ff00aa', pink_bg: '#2a0015'
|
||
|
|
},
|
||
|
|
'midnight': {
|
||
|
|
label: 'Midnight Indigo', mode: 'dark',
|
||
|
|
bg: '#0a0e1a', bg_card: '#111827', bg_nav: '#0d1422',
|
||
|
|
text: '#e2e8f0', text_muted: '#818cf8', text_dim: '#4b5563',
|
||
|
|
border: '#1e293b', border_light: '#172033',
|
||
|
|
accent: '#6366f1', accent_hover: '#818cf8',
|
||
|
|
green: '#22c55e', green_bg: '#052e16',
|
||
|
|
red: '#ef4444', red_bg: '#2d0a0a',
|
||
|
|
orange: '#f59e0b', orange_bg: '#2d2005',
|
||
|
|
purple: '#a855f7', purple_bg: '#1a052d',
|
||
|
|
cyan: '#06b6d4', cyan_bg: '#05202d',
|
||
|
|
pink: '#ec4899', pink_bg: '#2d0520'
|
||
|
|
},
|
||
|
|
'github-light': {
|
||
|
|
label: 'GitHub Light', mode: 'light',
|
||
|
|
bg: '#ffffff', bg_card: '#f6f8fa', bg_nav: '#ffffff',
|
||
|
|
text: '#1f2328', text_muted: '#656d76', text_dim: '#8b949e',
|
||
|
|
border: '#d0d7de', border_light: '#e8ecef',
|
||
|
|
accent: '#0969da', accent_hover: '#0550ae',
|
||
|
|
green: '#1a7f37', green_bg: '#dafbe1',
|
||
|
|
red: '#cf222e', red_bg: '#ffebe9',
|
||
|
|
orange: '#953800', orange_bg: '#fff1e5',
|
||
|
|
purple: '#8250df', purple_bg: '#fbefff',
|
||
|
|
cyan: '#0550ae', cyan_bg: '#ddf4ff',
|
||
|
|
pink: '#bf3989', pink_bg: '#ffeff7'
|
||
|
|
},
|
||
|
|
'solarized-light': {
|
||
|
|
label: 'Solarized Light', mode: 'light',
|
||
|
|
bg: '#fdf6e3', bg_card: '#eee8d5', bg_nav: '#f5efdb',
|
||
|
|
text: '#657b83', text_muted: '#839496', text_dim: '#93a1a1',
|
||
|
|
border: '#d6cfb8', border_light: '#e8e1cc',
|
||
|
|
accent: '#268bd2', accent_hover: '#2aa198',
|
||
|
|
green: '#859900', green_bg: '#e8e8c8',
|
||
|
|
red: '#dc322f', red_bg: '#f5d0cf',
|
||
|
|
orange: '#cb4b16', orange_bg: '#f0d0b8',
|
||
|
|
purple: '#6c71c4', purple_bg: '#e0d8f0',
|
||
|
|
cyan: '#2aa198', cyan_bg: '#c8e8e0',
|
||
|
|
pink: '#d33682', pink_bg: '#f0c8d8'
|
||
|
|
},
|
||
|
|
'paper-light': {
|
||
|
|
label: 'Paper Light', mode: 'light',
|
||
|
|
bg: '#fafafa', bg_card: '#ffffff', bg_nav: '#f5f5f5',
|
||
|
|
text: '#37474f', text_muted: '#78909c', text_dim: '#90a4ae',
|
||
|
|
border: '#cfd8dc', border_light: '#eceff1',
|
||
|
|
accent: '#e91e63', accent_hover: '#c2185b',
|
||
|
|
green: '#4caf50', green_bg: '#e8f5e9',
|
||
|
|
red: '#f44336', red_bg: '#ffebee',
|
||
|
|
orange: '#ff9800', orange_bg: '#fff3e0',
|
||
|
|
purple: '#9c27b0', purple_bg: '#f3e5f5',
|
||
|
|
cyan: '#00bcd4', cyan_bg: '#e0f7fa',
|
||
|
|
pink: '#e91e63', pink_bg: '#fce4ec'
|
||
|
|
},
|
||
|
|
'ocean-deep': {
|
||
|
|
label: 'Ocean Deep', mode: 'dark',
|
||
|
|
bg: '#070b14', bg_card: '#0d1524', bg_nav: '#0a1120',
|
||
|
|
text: '#dce6f0', text_muted: '#6b8fbf', text_dim: '#3d5a7a',
|
||
|
|
border: '#1a2d4a', border_light: '#13203a',
|
||
|
|
accent: '#38bdf8', accent_hover: '#7dd3fc',
|
||
|
|
green: '#34d399', green_bg: '#0a2a1a',
|
||
|
|
red: '#f87171', red_bg: '#2a0f0f',
|
||
|
|
orange: '#fb923c', orange_bg: '#2a1a0a',
|
||
|
|
purple: '#818cf8', purple_bg: '#12152a',
|
||
|
|
cyan: '#22d3ee', cyan_bg: '#0a1f2a',
|
||
|
|
pink: '#f472b6', pink_bg: '#2a0a1f'
|
||
|
|
},
|
||
|
|
'blue-steel': {
|
||
|
|
label: 'Blue Steel', mode: 'dark',
|
||
|
|
bg: '#0f141e', bg_card: '#1a2332', bg_nav: '#161e2d',
|
||
|
|
text: '#e8edf5', text_muted: '#7a9cc6', text_dim: '#4d6a8f',
|
||
|
|
border: '#2a3a52', border_light: '#1f2d42',
|
||
|
|
accent: '#60a5fa', accent_hover: '#93c5fd',
|
||
|
|
green: '#4ade80', green_bg: '#0a1f14',
|
||
|
|
red: '#f87171', red_bg: '#2a0f0f',
|
||
|
|
orange: '#fb923c', orange_bg: '#2a1a0a',
|
||
|
|
purple: '#a78bfa', purple_bg: '#1a102a',
|
||
|
|
cyan: '#67e8f9', cyan_bg: '#0a202a',
|
||
|
|
pink: '#f472b6', pink_bg: '#2a0a1f'
|
||
|
|
},
|
||
|
|
'twilight-blue': {
|
||
|
|
label: 'Twilight Blue', mode: 'dark',
|
||
|
|
bg: '#080c1a', bg_card: '#101830', bg_nav: '#0c1428',
|
||
|
|
text: '#e0e6f5', text_muted: '#6d8fc0', text_dim: '#3d5580',
|
||
|
|
border: '#1c2a50', border_light: '#141f40',
|
||
|
|
accent: '#5699ff', accent_hover: '#7ab4ff',
|
||
|
|
green: '#2dd4a0', green_bg: '#082018',
|
||
|
|
red: '#ff6b6b', red_bg: '#2a0e0e',
|
||
|
|
orange: '#ff9f43', orange_bg: '#2a1a08',
|
||
|
|
purple: '#9b7fff', purple_bg: '#140f2a',
|
||
|
|
cyan: '#00d4ff', cyan_bg: '#081a2a',
|
||
|
|
pink: '#ff79b0', pink_bg: '#2a081a'
|
||
|
|
},
|
||
|
|
'mek-neon-blue': {
|
||
|
|
label: 'Mek Neon Blue', mode: 'dark',
|
||
|
|
bg: '#0a1628', bg_card: '#0f1f3a', bg_nav: '#0c1a30',
|
||
|
|
text: '#e8f4ff', text_muted: '#7eb8d4', text_dim: '#4a7a99',
|
||
|
|
border: 'rgba(0,212,255,0.15)', border_light: 'rgba(0,212,255,0.08)',
|
||
|
|
accent: '#00d4ff', accent_hover: '#4de8ff',
|
||
|
|
green: '#00ff88', green_bg: '#0a2a1a',
|
||
|
|
red: '#ff6b8a', red_bg: '#2a0a14',
|
||
|
|
orange: '#ffb347', orange_bg: '#2a1a0a',
|
||
|
|
purple: '#a855f7', purple_bg: '#1a0a2a',
|
||
|
|
cyan: '#00d4ff', cyan_bg: '#0a1a2a',
|
||
|
|
pink: '#ff6ec7', pink_bg: '#2a0a1f'
|
||
|
|
},
|
||
|
|
custom: {
|
||
|
|
label: 'Aangepast', mode: 'dark',
|
||
|
|
bg: '#0a1628', bg_card: '#0f1f3a', bg_nav: '#0c1a30',
|
||
|
|
text: '#e8f4ff', text_muted: '#7eb8d4', text_dim: '#4a7a99',
|
||
|
|
border: 'rgba(0,212,255,0.15)', border_light: 'rgba(0,212,255,0.08)',
|
||
|
|
accent: '#00d4ff', accent_hover: '#4de8ff',
|
||
|
|
green: '#00ff88', green_bg: '#0a2a1a',
|
||
|
|
red: '#ff6b8a', red_bg: '#2a0a14',
|
||
|
|
orange: '#ffb347', orange_bg: '#2a1a0a',
|
||
|
|
purple: '#a855f7', purple_bg: '#1a0a2a',
|
||
|
|
cyan: '#00d4ff', cyan_bg: '#0a1a2a',
|
||
|
|
pink: '#ff6ec7', pink_bg: '#2a0a1f'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Hoofdkleuren — zichtbaar in instellingen met kleurkiezer */
|
||
|
|
const THEME_MAIN_COLORS = [
|
||
|
|
{ key: 'bg', label: 'Achtergrond', hint: 'Hoofdkleur van de hele app' },
|
||
|
|
{ key: 'bg_card', label: 'Kaarten & panelen', hint: 'Dashboard-kaarten, secties' },
|
||
|
|
{ key: 'bg_nav', label: 'Navigatie & sidebar', hint: 'Bovenbalk en zijmenu' },
|
||
|
|
{ key: 'accent', label: 'Accentkleur', hint: 'Neon highlight, knoppen, links' },
|
||
|
|
{ key: 'text', label: 'Tekst', hint: 'Hoofdtekst' },
|
||
|
|
{ key: 'text_muted', label: 'Tekst secundair', hint: 'Labels, subtitels' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const THEME_COLOR_LABELS = {
|
||
|
|
bg: 'Achtergrond', bg_card: 'Kaarten', bg_nav: 'Navigatie',
|
||
|
|
text: 'Tekst', text_muted: 'Tekst secundair', text_dim: 'Tekst gedimd',
|
||
|
|
border: 'Randen', border_light: 'Randen licht',
|
||
|
|
accent: 'Accent', accent_hover: 'Accent hover',
|
||
|
|
green: 'Groen', green_bg: 'Groen achtergrond',
|
||
|
|
red: 'Rood', red_bg: 'Rood achtergrond',
|
||
|
|
orange: 'Oranje', orange_bg: 'Oranje achtergrond',
|
||
|
|
purple: 'Paars', purple_bg: 'Paars achtergrond',
|
||
|
|
cyan: 'Cyaan', cyan_bg: 'Cyaan achtergrond',
|
||
|
|
pink: 'Roze', pink_bg: 'Roze achtergrond',
|
||
|
|
};
|
||
|
|
|
||
|
|
const THEME_CSS_KEYS = [
|
||
|
|
'bg', 'bg_card', 'bg_nav',
|
||
|
|
'text', 'text_muted', 'text_dim',
|
||
|
|
'border', 'border_light',
|
||
|
|
'accent', 'accent_hover',
|
||
|
|
'green', 'green_bg', 'red', 'red_bg',
|
||
|
|
'orange', 'orange_bg', 'purple', 'purple_bg',
|
||
|
|
'cyan', 'cyan_bg', 'pink', 'pink_bg'
|
||
|
|
];
|
||
|
|
|
||
|
|
module.exports = { THEME_PRESETS, THEME_CSS_KEYS, THEME_MAIN_COLORS, THEME_COLOR_LABELS };
|