mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-07-24 07:45:57 +02:00
Material Dark, Material Light, Monokai, Rose Pine, Everforest, Horizon, Cyberpunk, Black themes all added. (#122)
WIP: New themes Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/122
This commit is contained in:
blake
+200
@@ -761,6 +761,206 @@
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:root[data-theme="material-dark"] {
|
||||
--bg-primary: #212121;
|
||||
--bg-secondary: #1b1b1b;
|
||||
--bg-tertiary: #282828;
|
||||
--bg-hover: #2d2d2d;
|
||||
--bg-active: #393939;
|
||||
--bg-editor: #212121;
|
||||
--text-primary: #eeffff;
|
||||
--text-secondary: #b0bec5;
|
||||
--text-tertiary: #546e7a;
|
||||
--text-accent: #80cbc4;
|
||||
--border-color: #2d2d2d;
|
||||
--border-light: #252525;
|
||||
--accent: #80cbc4;
|
||||
--accent-hover: #4db6ac;
|
||||
--accent-light: color-mix(in srgb, #80cbc4 12%, transparent);
|
||||
--danger: #ff5370;
|
||||
--danger-hover: #e53050;
|
||||
--success: #c3e88d;
|
||||
--warning: #ffcb6b;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
:root[data-theme="material-light"] {
|
||||
--bg-primary: #fafafa;
|
||||
--bg-secondary: #f5f5f5;
|
||||
--bg-tertiary: #eeeeee;
|
||||
--bg-hover: #e0e0e0;
|
||||
--bg-active: #d6d6d6;
|
||||
--bg-editor: #fafafa;
|
||||
--text-primary: #212121;
|
||||
--text-secondary: #546e7a;
|
||||
--text-tertiary: #90a4ae;
|
||||
--text-accent: #00897b;
|
||||
--border-color: #e0e0e0;
|
||||
--border-light: #eeeeee;
|
||||
--accent: #00897b;
|
||||
--accent-hover: #00796b;
|
||||
--accent-light: color-mix(in srgb, #00897b 8%, transparent);
|
||||
--danger: #e53935;
|
||||
--danger-hover: #c62828;
|
||||
--success: #388e3c;
|
||||
--warning: #f57c00;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:root[data-theme="monokai"] {
|
||||
--bg-primary: #272822;
|
||||
--bg-secondary: #1e1f1c;
|
||||
--bg-tertiary: #2d2e27;
|
||||
--bg-hover: #3a3b32;
|
||||
--bg-active: #49483e;
|
||||
--bg-editor: #272822;
|
||||
--text-primary: #f8f8f2;
|
||||
--text-secondary: #a59f85;
|
||||
--text-tertiary: #75715e;
|
||||
--text-accent: #a6e22e;
|
||||
--border-color: #3a3b32;
|
||||
--border-light: #2d2e27;
|
||||
--accent: #a6e22e;
|
||||
--accent-hover: #8ec226;
|
||||
--accent-light: color-mix(in srgb, #a6e22e 12%, transparent);
|
||||
--danger: #f92672;
|
||||
--danger-hover: #e01060;
|
||||
--success: #a6e22e;
|
||||
--warning: #e6db74;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:root[data-theme="rose-pine"] {
|
||||
--bg-primary: #191724;
|
||||
--bg-secondary: #1f1d2e;
|
||||
--bg-tertiary: #26233a;
|
||||
--bg-hover: #312f44;
|
||||
--bg-active: #403d52;
|
||||
--bg-editor: #191724;
|
||||
--text-primary: #e0def4;
|
||||
--text-secondary: #908caa;
|
||||
--text-tertiary: #6e6a86;
|
||||
--text-accent: #c4a7e7;
|
||||
--border-color: #312f44;
|
||||
--border-light: #26233a;
|
||||
--accent: #c4a7e7;
|
||||
--accent-hover: #b094d8;
|
||||
--accent-light: color-mix(in srgb, #c4a7e7 12%, transparent);
|
||||
--danger: #eb6f92;
|
||||
--danger-hover: #d05572;
|
||||
--success: #9ccfd8;
|
||||
--warning: #f6c177;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:root[data-theme="everforest"] {
|
||||
--bg-primary: #2d353b;
|
||||
--bg-secondary: #272e33;
|
||||
--bg-tertiary: #2e383c;
|
||||
--bg-hover: #374145;
|
||||
--bg-active: #414b50;
|
||||
--bg-editor: #2d353b;
|
||||
--text-primary: #d3c6aa;
|
||||
--text-secondary: #9da9a0;
|
||||
--text-tertiary: #7a8478;
|
||||
--text-accent: #83c092;
|
||||
--border-color: #374145;
|
||||
--border-light: #2e383c;
|
||||
--accent: #83c092;
|
||||
--accent-hover: #6aac7a;
|
||||
--accent-light: color-mix(in srgb, #83c092 12%, transparent);
|
||||
--danger: #e67e80;
|
||||
--danger-hover: #cc6264;
|
||||
--success: #a7c080;
|
||||
--warning: #dbbc7f;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:root[data-theme="horizon"] {
|
||||
--bg-primary: #1c1e26;
|
||||
--bg-secondary: #16181f;
|
||||
--bg-tertiary: #21232c;
|
||||
--bg-hover: #2e303e;
|
||||
--bg-active: #3a3c4e;
|
||||
--bg-editor: #1c1e26;
|
||||
--text-primary: #d5d8da;
|
||||
--text-secondary: #9a9da5;
|
||||
--text-tertiary: #626672;
|
||||
--text-accent: #e9547f;
|
||||
--border-color: #2e303e;
|
||||
--border-light: #21232c;
|
||||
--accent: #e9547f;
|
||||
--accent-hover: #d83d6e;
|
||||
--accent-light: color-mix(in srgb, #e9547f 12%, transparent);
|
||||
--danger: #f43e5c;
|
||||
--danger-hover: #e02848;
|
||||
--success: #29d398;
|
||||
--warning: #fab38e;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:root[data-theme="cyberpunk"] {
|
||||
--bg-primary: #0a0e17;
|
||||
--bg-secondary: #060911;
|
||||
--bg-tertiary: #0f1420;
|
||||
--bg-hover: #141a28;
|
||||
--bg-active: #1c2438;
|
||||
--bg-editor: #0a0e17;
|
||||
--text-primary: #e0e8ff;
|
||||
--text-secondary: #8899cc;
|
||||
--text-tertiary: #445588;
|
||||
--text-accent: #00d9ff;
|
||||
--border-color: #1c2438;
|
||||
--border-light: #0f1420;
|
||||
--accent: #ff0080;
|
||||
--accent-hover: #e0006a;
|
||||
--accent-light: color-mix(in srgb, #ff0080 12%, transparent);
|
||||
--danger: #ff0044;
|
||||
--danger-hover: #cc0033;
|
||||
--success: #00ff88;
|
||||
--warning: #ffcc00;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
:root[data-theme="black"] {
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #0a0a0a;
|
||||
--bg-tertiary: #111111;
|
||||
--bg-hover: #1a1a1a;
|
||||
--bg-active: #222222;
|
||||
--bg-editor: #000000;
|
||||
--text-primary: #f0f0f0;
|
||||
--text-secondary: #999999;
|
||||
--text-tertiary: #555555;
|
||||
--text-accent: #ffffff;
|
||||
--border-color: #1a1a1a;
|
||||
--border-light: #111111;
|
||||
--accent: #ffffff;
|
||||
--accent-hover: #e0e0e0;
|
||||
--accent-light: color-mix(in srgb, #ffffff 12%, transparent);
|
||||
--danger: #ff3333;
|
||||
--danger-hover: #cc2222;
|
||||
--success: #33ff77;
|
||||
--warning: #ffcc00;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
||||
@@ -384,7 +384,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson', 'material-dark', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black'];
|
||||
let isThemeDark = $derived(
|
||||
darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
);
|
||||
@@ -414,6 +414,14 @@
|
||||
{ id: 'crimson', label: 'Crimson', bg: '#1a0808', sidebar: '#220a0a', accent: '#e83535' },
|
||||
{ id: 'cloud', label: 'Cloud', bg: '#f0f8ff', sidebar: '#e4f2fc', accent: '#2879c8' },
|
||||
{ id: 'peach', label: 'Peach', bg: '#fff8f4', sidebar: '#ffeee4', accent: '#e8704a' },
|
||||
{ id: 'material-dark', label: 'Material Dark', bg: '#212121', sidebar: '#1b1b1b', accent: '#80cbc4' },
|
||||
{ id: 'material-light', label: 'Material Light', bg: '#fafafa', sidebar: '#f5f5f5', accent: '#00897b' },
|
||||
{ id: 'monokai', label: 'Monokai', bg: '#272822', sidebar: '#1e1f1c', accent: '#a6e22e' },
|
||||
{ id: 'rose-pine', label: 'Rosé Pine', bg: '#191724', sidebar: '#1f1d2e', accent: '#c4a7e7' },
|
||||
{ id: 'everforest', label: 'Everforest', bg: '#2d353b', sidebar: '#272e33', accent: '#83c092' },
|
||||
{ id: 'horizon', label: 'Horizon', bg: '#1c1e26', sidebar: '#16181f', accent: '#e9547f' },
|
||||
{ id: 'cyberpunk', label: 'Cyberpunk', bg: '#0a0e17', sidebar: '#060911', accent: '#ff0080' },
|
||||
{ id: 'black', label: 'Black', bg: '#000000', sidebar: '#0a0a0a', accent: '#ffffff' },
|
||||
];
|
||||
|
||||
const accentPresets = [
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
});
|
||||
|
||||
function applyTheme(t: string) {
|
||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
|
||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach'];
|
||||
const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson', 'material-dark', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black'];
|
||||
const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black'];
|
||||
const root = document.documentElement;
|
||||
root.classList.remove('dark');
|
||||
root.removeAttribute('data-theme');
|
||||
|
||||
Reference in New Issue
Block a user