149 lines
4.4 KiB
JavaScript
149 lines
4.4 KiB
JavaScript
const THEME_KEY = 'ns_theme';
|
|
const DEFAULT_ID = 'dark-amber';
|
|
|
|
export const THEMES = [
|
|
{
|
|
id: 'dark-amber',
|
|
name: 'Dark Amber',
|
|
accent: '#e8a020',
|
|
bg: '#07070f',
|
|
vars: {
|
|
'--bg': '#07070f',
|
|
'--bg2': '#0d0d1a',
|
|
'--bg3': '#12121f',
|
|
'--surface': '#1a1a2e',
|
|
'--surface2': '#22223a',
|
|
'--border': 'rgba(255,255,255,0.07)',
|
|
'--border2': 'rgba(255,255,255,0.12)',
|
|
'--accent': '#e8a020',
|
|
'--accent2': '#f0b840',
|
|
'--accent-dark':'#c07010',
|
|
'--accent-dim': 'rgba(232,160,32,0.15)',
|
|
'--accent-glow':'rgba(232,160,32,0.3)',
|
|
'--text': '#f0eefc',
|
|
'--text2': '#8888aa',
|
|
'--text3': '#555577',
|
|
'--danger': '#e05555',
|
|
},
|
|
},
|
|
{
|
|
id: 'forest',
|
|
name: 'Forest',
|
|
accent: '#4caf7d',
|
|
bg: '#060d08',
|
|
vars: {
|
|
'--bg': '#060d08',
|
|
'--bg2': '#0b1410',
|
|
'--bg3': '#101a14',
|
|
'--surface': '#162218',
|
|
'--surface2': '#1d2e20',
|
|
'--border': 'rgba(255,255,255,0.07)',
|
|
'--border2': 'rgba(255,255,255,0.12)',
|
|
'--accent': '#4caf7d',
|
|
'--accent2': '#6dcc99',
|
|
'--accent-dark':'#2d7a52',
|
|
'--accent-dim': 'rgba(76,175,125,0.15)',
|
|
'--accent-glow':'rgba(76,175,125,0.3)',
|
|
'--text': '#edfaf2',
|
|
'--text2': '#7a9e85',
|
|
'--text3': '#455c4a',
|
|
'--danger': '#e05555',
|
|
},
|
|
},
|
|
{
|
|
id: 'rose-pine',
|
|
name: 'Rosé Pine',
|
|
accent: '#e096ab',
|
|
bg: '#191724',
|
|
vars: {
|
|
'--bg': '#191724', // Base
|
|
'--bg2': '#1f1d2e', // Surface
|
|
'--bg3': '#26233a', // Overlay
|
|
'--surface': '#21202e', // Highlight Low
|
|
'--surface2': '#403d52', // Highlight Med
|
|
'--border': 'rgba(82,79,103,0.35)', // Highlight High, dimmed
|
|
'--border2': 'rgba(82,79,103,0.60)', // Highlight High
|
|
'--accent': '#eb6f92', // Love
|
|
'--accent2': '#ebbcba', // Rose
|
|
'--accent-dark':'#b8415e', // Love darkened
|
|
'--accent-dim': 'rgba(235,111,146,0.15)',
|
|
'--accent-glow':'rgba(235,111,146,0.28)',
|
|
'--text': '#e0def4', // Text
|
|
'--text2': '#908caa', // Subtle
|
|
'--text3': '#6e6a86', // Muted
|
|
'--danger': '#eb6f92', // Love
|
|
},
|
|
},
|
|
{
|
|
id: 'dark-ocean',
|
|
name: 'Dark Ocean',
|
|
accent: '#4f8ef7',
|
|
bg: '#070d14',
|
|
vars: {
|
|
'--bg': '#070d14',
|
|
'--bg2': '#0c1520',
|
|
'--bg3': '#111c28',
|
|
'--surface': '#182435',
|
|
'--surface2': '#1f2f42',
|
|
'--border': 'rgba(255,255,255,0.07)',
|
|
'--border2': 'rgba(255,255,255,0.13)',
|
|
'--accent': '#4f8ef7',
|
|
'--accent2': '#70aaff',
|
|
'--accent-dark':'#2a6cd6',
|
|
'--accent-dim': 'rgba(79,142,247,0.15)',
|
|
'--accent-glow':'rgba(79,142,247,0.3)',
|
|
'--text': '#edf2ff',
|
|
'--text2': '#7088aa',
|
|
'--text3': '#445566',
|
|
'--danger': '#e05555',
|
|
},
|
|
},
|
|
{
|
|
id: 'jade-green',
|
|
name: 'Jade Green',
|
|
accent: '#2ecc71',
|
|
bg: '#07100c',
|
|
vars: {
|
|
'--bg': '#07100c', // Deep green-black
|
|
'--bg2': '#0c1813', // Slightly lighter
|
|
'--bg3': '#11211a', // Layered depth
|
|
'--surface': '#162a21', // Soft surface
|
|
'--surface2': '#1e3a2d', // Elevated surface
|
|
'--border': 'rgba(255,255,255,0.06)',
|
|
'--border2': 'rgba(255,255,255,0.12)',
|
|
|
|
'--accent': '#2ecc71', // Jade
|
|
'--accent2': '#55e68f', // Lighter jade
|
|
'--accent-dark':'#1f9e55', // Deep jade
|
|
'--accent-dim': 'rgba(46,204,113,0.15)',
|
|
'--accent-glow':'rgba(46,204,113,0.32)',
|
|
|
|
'--text': '#e8fff1', // Soft mint-white
|
|
'--text2': '#8fbfa4', // Muted jade-gray
|
|
'--text3': '#557a63', // Dimmed green-gray
|
|
|
|
'--danger': '#e05555',
|
|
},
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
export function applyTheme(id) {
|
|
const theme = THEMES.find(t => t.id === id) || THEMES.find(t => t.id === DEFAULT_ID);
|
|
const root = document.documentElement;
|
|
Object.entries(theme.vars).forEach(([k, v]) => root.style.setProperty(k, v));
|
|
localStorage.setItem(THEME_KEY, theme.id);
|
|
}
|
|
|
|
export function loadSavedTheme() {
|
|
const saved = localStorage.getItem(THEME_KEY) || DEFAULT_ID;
|
|
applyTheme(saved);
|
|
return saved;
|
|
}
|
|
|
|
export function getCurrentThemeId() {
|
|
return localStorage.getItem(THEME_KEY) || DEFAULT_ID;
|
|
}
|