Centralize color theme: single picker in Settings modal
- Add Settings button (gear icon) to header - Add Settings modal with unified color theme picker - Move theme state to App.tsx, apply data-theme on .hub-app root - Global CSS themes: ember, amethyst, jade, ocean, rose - Remove per-plugin theme pickers from Soundboard and Radio - Remove per-plugin theme CSS from soundboard.css and styles.css - Radio globe colors update via MutationObserver on theme change - Single localStorage key: hub-theme (replaces jb-theme + radio-theme) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
parent
00b6bc9d2f
commit
6d161f3482
5 changed files with 245 additions and 152 deletions
|
|
@ -48,6 +48,14 @@ export function registerTab(pluginName: string, component: React.FC<{ data: any;
|
|||
|
||||
type UpdateStatus = 'idle' | 'checking' | 'available' | 'downloading' | 'ready' | 'upToDate' | 'error';
|
||||
|
||||
const APP_THEMES = [
|
||||
{ id: 'default', color: '#e67e22', label: 'Ember' },
|
||||
{ id: 'purple', color: '#9b59b6', label: 'Amethyst' },
|
||||
{ id: 'forest', color: '#2ecc71', label: 'Jade' },
|
||||
{ id: 'ocean', color: '#3498db', label: 'Ocean' },
|
||||
{ id: 'cherry', color: '#e74c6f', label: 'Rose' },
|
||||
];
|
||||
|
||||
export default function App() {
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [plugins, setPlugins] = useState<PluginInfo[]>([]);
|
||||
|
|
@ -58,8 +66,16 @@ export default function App() {
|
|||
localStorage.setItem('hub_activeTab', tab);
|
||||
};
|
||||
const [showVersionModal, setShowVersionModal] = useState(false);
|
||||
const [showSettingsModal, setShowSettingsModal] = useState(false);
|
||||
const [pluginData, setPluginData] = useState<Record<string, any>>({});
|
||||
|
||||
// ── Global Theme ──
|
||||
const [theme, setThemeRaw] = useState(() => localStorage.getItem('hub-theme') || 'default');
|
||||
const setTheme = (t: string) => {
|
||||
setThemeRaw(t);
|
||||
localStorage.setItem('hub-theme', t);
|
||||
};
|
||||
|
||||
// ── Unified Auth State ──
|
||||
const [user, setUser] = useState<AuthUser>({ authenticated: false });
|
||||
const [providers, setProviders] = useState<AuthProviders>({ discord: false, steam: false, admin: false });
|
||||
|
|
@ -248,7 +264,7 @@ export default function App() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="hub-app">
|
||||
<div className="hub-app" data-theme={theme}>
|
||||
<header className="hub-header">
|
||||
<div className="hub-header-left">
|
||||
<span className="hub-logo">{'\u{1F3AE}'}</span>
|
||||
|
|
@ -310,6 +326,16 @@ export default function App() {
|
|||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="hub-settings-btn"
|
||||
onClick={() => setShowSettingsModal(true)}
|
||||
title="Einstellungen"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className="hub-refresh-btn"
|
||||
onClick={() => window.location.reload()}
|
||||
|
|
@ -343,6 +369,37 @@ export default function App() {
|
|||
</header>
|
||||
|
||||
|
||||
{/* Settings Modal */}
|
||||
{showSettingsModal && (
|
||||
<div className="hub-settings-overlay" onClick={() => setShowSettingsModal(false)}>
|
||||
<div className="hub-settings-modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="hub-settings-modal-header">
|
||||
<span>Einstellungen</span>
|
||||
<button className="hub-settings-modal-close" onClick={() => setShowSettingsModal(false)}>
|
||||
{'\u2715'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="hub-settings-modal-body">
|
||||
<div className="hub-settings-section">
|
||||
<span className="hub-settings-section-label">Farbschema</span>
|
||||
<div className="hub-settings-theme-grid">
|
||||
{APP_THEMES.map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
className={`hub-settings-theme-btn ${theme === t.id ? 'active' : ''}`}
|
||||
onClick={() => setTheme(t.id)}
|
||||
>
|
||||
<span className="hub-settings-theme-dot" style={{ background: t.color }} />
|
||||
<span className="hub-settings-theme-label">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showVersionModal && (
|
||||
<div className="hub-version-overlay" onClick={() => setShowVersionModal(false)}>
|
||||
<div className="hub-version-modal" onClick={e => e.stopPropagation()}>
|
||||
|
|
|
|||
|
|
@ -54,13 +54,6 @@ interface VoiceStats {
|
|||
connectedSince: string | null;
|
||||
}
|
||||
|
||||
const THEMES = [
|
||||
{ id: 'default', color: '#e67e22', label: 'Sunset' },
|
||||
{ id: 'purple', color: '#9b59b6', label: 'Midnight' },
|
||||
{ id: 'forest', color: '#2ecc71', label: 'Forest' },
|
||||
{ id: 'ocean', color: '#3498db', label: 'Ocean' },
|
||||
{ id: 'cherry', color: '#e74c6f', label: 'Cherry' },
|
||||
];
|
||||
|
||||
// ── Zoom scaling constants ──
|
||||
const BASE_ALT = 2.0;
|
||||
|
|
@ -71,7 +64,6 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
const globeRef = useRef<any>(null);
|
||||
const rotationResumeRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('radio-theme') || 'default');
|
||||
const [places, setPlaces] = useState<RadioPlace[]>([]);
|
||||
const [selectedPlace, setSelectedPlace] = useState<RadioPlace | null>(null);
|
||||
const [stations, setStations] = useState<RadioChannel[]>([]);
|
||||
|
|
@ -152,17 +144,24 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
}
|
||||
}, [data, selectedGuild]);
|
||||
|
||||
// ── Theme persist + update globe colors ──
|
||||
// ── Update globe colors when global theme changes ──
|
||||
useEffect(() => {
|
||||
localStorage.setItem('radio-theme', theme);
|
||||
if (globeRef.current && containerRef.current) {
|
||||
const style = getComputedStyle(containerRef.current.parentElement!);
|
||||
function updateGlobeColors() {
|
||||
if (!globeRef.current || !containerRef.current) return;
|
||||
const style = getComputedStyle(containerRef.current);
|
||||
const accentRgb = style.getPropertyValue('--accent-rgb').trim();
|
||||
if (!accentRgb) return;
|
||||
globeRef.current
|
||||
.pointColor(() => `rgba(${accentRgb}, 0.85)`)
|
||||
.atmosphereColor(`rgba(${accentRgb}, 0.25)`);
|
||||
}
|
||||
}, [theme]);
|
||||
updateGlobeColors();
|
||||
const app = document.querySelector('.hub-app');
|
||||
if (!app) return;
|
||||
const observer = new MutationObserver(updateGlobeColors);
|
||||
observer.observe(app, { attributes: true, attributeFilter: ['data-theme'] });
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// ── Helper: pause globe rotation for 5s (only resumes if no panel open) ──
|
||||
const selectedPlaceRef = useRef(selectedPlace);
|
||||
|
|
@ -466,7 +465,7 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
const currentGuild = guilds.find(g => g.id === selectedGuild);
|
||||
|
||||
return (
|
||||
<div className="radio-container" data-theme={theme}>
|
||||
<div className="radio-container">
|
||||
|
||||
{/* ═══ TOPBAR ═══ */}
|
||||
<header className="radio-topbar">
|
||||
|
|
@ -526,17 +525,6 @@ export default function RadioTab({ data }: { data: any }) {
|
|||
<button className="radio-topbar-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
|
||||
</>
|
||||
)}
|
||||
<div className="radio-theme-inline">
|
||||
{THEMES.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
|
||||
style={{ background: t.color }}
|
||||
title={t.label}
|
||||
onClick={() => setTheme(t.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -266,13 +266,6 @@ function apiUploadFileWithName(
|
|||
CONSTANTS
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
const THEMES = [
|
||||
{ id: 'default', color: '#5865f2', label: 'Discord' },
|
||||
{ id: 'purple', color: '#9b59b6', label: 'Midnight' },
|
||||
{ id: 'forest', color: '#2ecc71', label: 'Forest' },
|
||||
{ id: 'sunset', color: '#e67e22', label: 'Sunset' },
|
||||
{ id: 'ocean', color: '#3498db', label: 'Ocean' },
|
||||
];
|
||||
|
||||
const CAT_PALETTE = [
|
||||
'#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6',
|
||||
|
|
@ -350,7 +343,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
|
||||
/* ── Preferences ── */
|
||||
const [favs, setFavs] = useState<Record<string, boolean>>({});
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'default');
|
||||
const [cardSize, setCardSize] = useState(() => parseInt(localStorage.getItem('jb-card-size') || '110'));
|
||||
|
||||
/* ── Party ── */
|
||||
|
|
@ -500,11 +492,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
/* ── Theme (persist only, data-theme is set on .sb-app div) ── */
|
||||
useEffect(() => {
|
||||
localStorage.setItem('jb-theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
/* ── Card size (scoped to .sb-app container) ── */
|
||||
const sbAppRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
|
|
@ -834,7 +821,7 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
RENDER
|
||||
════════════════════════════════════════════ */
|
||||
return (
|
||||
<div className="sb-app" data-theme={theme} ref={sbAppRef}>
|
||||
<div className="sb-app" ref={sbAppRef}>
|
||||
{chaosMode && <div className="party-overlay active" />}
|
||||
|
||||
{/* ═══ TOPBAR ═══ */}
|
||||
|
|
@ -1048,17 +1035,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="theme-selector">
|
||||
{THEMES.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`theme-dot ${theme === t.id ? 'active' : ''}`}
|
||||
style={{ background: t.color }}
|
||||
title={t.label}
|
||||
onClick={() => setTheme(t.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="analytics-strip">
|
||||
|
|
|
|||
|
|
@ -43,53 +43,6 @@
|
|||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ── Theme: Midnight Purple ── */
|
||||
.sb-app[data-theme="purple"] {
|
||||
--bg-deep: #13111c;
|
||||
--bg-primary: #1a1726;
|
||||
--bg-secondary: #241f35;
|
||||
--bg-tertiary: #2e2845;
|
||||
--accent: #9b59b6;
|
||||
--accent-rgb: 155, 89, 182;
|
||||
--accent-hover: #8e44ad;
|
||||
--accent-glow: rgba(155, 89, 182, .45);
|
||||
}
|
||||
|
||||
/* ── Theme: Forest ── */
|
||||
.sb-app[data-theme="forest"] {
|
||||
--bg-deep: #0f1a14;
|
||||
--bg-primary: #142119;
|
||||
--bg-secondary: #1c2e22;
|
||||
--bg-tertiary: #253a2c;
|
||||
--accent: #2ecc71;
|
||||
--accent-rgb: 46, 204, 113;
|
||||
--accent-hover: #27ae60;
|
||||
--accent-glow: rgba(46, 204, 113, .4);
|
||||
}
|
||||
|
||||
/* ── Theme: Sunset ── */
|
||||
.sb-app[data-theme="sunset"] {
|
||||
--bg-deep: #1a1210;
|
||||
--bg-primary: #231815;
|
||||
--bg-secondary: #2f201c;
|
||||
--bg-tertiary: #3d2a24;
|
||||
--accent: #e67e22;
|
||||
--accent-rgb: 230, 126, 34;
|
||||
--accent-hover: #d35400;
|
||||
--accent-glow: rgba(230, 126, 34, .4);
|
||||
}
|
||||
|
||||
/* ── Theme: Ocean ── */
|
||||
.sb-app[data-theme="ocean"] {
|
||||
--bg-deep: #0a1628;
|
||||
--bg-primary: #0f1e33;
|
||||
--bg-secondary: #162a42;
|
||||
--bg-tertiary: #1e3652;
|
||||
--accent: #3498db;
|
||||
--accent-rgb: 52, 152, 219;
|
||||
--accent-hover: #2980b9;
|
||||
--accent-glow: rgba(52, 152, 219, .4);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────
|
||||
App Layout
|
||||
|
|
|
|||
|
|
@ -32,6 +32,71 @@
|
|||
--header-height: 44px;
|
||||
}
|
||||
|
||||
/* ── Global App Themes ── */
|
||||
.hub-app[data-theme="purple"] {
|
||||
--bg-deep: #13111c;
|
||||
--bg-primary: #1a1726;
|
||||
--bg-secondary: #241f35;
|
||||
--bg-tertiary: #2e2845;
|
||||
--bg-card: #241f35;
|
||||
--bg-card-hover: #2e2845;
|
||||
--bg-input: #110f19;
|
||||
--bg-header: #161320;
|
||||
--accent: #9b59b6;
|
||||
--accent-rgb: 155, 89, 182;
|
||||
--accent-hover: #8e44ad;
|
||||
--accent-dim: rgba(155, 89, 182, 0.15);
|
||||
--accent-border: rgba(155, 89, 182, 0.35);
|
||||
}
|
||||
|
||||
.hub-app[data-theme="forest"] {
|
||||
--bg-deep: #0f1a14;
|
||||
--bg-primary: #142119;
|
||||
--bg-secondary: #1c2e22;
|
||||
--bg-tertiary: #253a2c;
|
||||
--bg-card: #1c2e22;
|
||||
--bg-card-hover: #253a2c;
|
||||
--bg-input: #0c150f;
|
||||
--bg-header: #111c16;
|
||||
--accent: #2ecc71;
|
||||
--accent-rgb: 46, 204, 113;
|
||||
--accent-hover: #27ae60;
|
||||
--accent-dim: rgba(46, 204, 113, 0.15);
|
||||
--accent-border: rgba(46, 204, 113, 0.35);
|
||||
}
|
||||
|
||||
.hub-app[data-theme="ocean"] {
|
||||
--bg-deep: #0a1628;
|
||||
--bg-primary: #0f1e33;
|
||||
--bg-secondary: #162a42;
|
||||
--bg-tertiary: #1e3652;
|
||||
--bg-card: #162a42;
|
||||
--bg-card-hover: #1e3652;
|
||||
--bg-input: #081220;
|
||||
--bg-header: #0c1a2e;
|
||||
--accent: #3498db;
|
||||
--accent-rgb: 52, 152, 219;
|
||||
--accent-hover: #2980b9;
|
||||
--accent-dim: rgba(52, 152, 219, 0.15);
|
||||
--accent-border: rgba(52, 152, 219, 0.35);
|
||||
}
|
||||
|
||||
.hub-app[data-theme="cherry"] {
|
||||
--bg-deep: #1a0f14;
|
||||
--bg-primary: #22141a;
|
||||
--bg-secondary: #301c25;
|
||||
--bg-tertiary: #3e2530;
|
||||
--bg-card: #301c25;
|
||||
--bg-card-hover: #3e2530;
|
||||
--bg-input: #150c10;
|
||||
--bg-header: #1d1117;
|
||||
--accent: #e74c6f;
|
||||
--accent-rgb: 231, 76, 111;
|
||||
--accent-hover: #c0392b;
|
||||
--accent-dim: rgba(231, 76, 111, 0.15);
|
||||
--accent-border: rgba(231, 76, 111, 0.35);
|
||||
}
|
||||
|
||||
/* ── Reset & Base ── */
|
||||
*,
|
||||
*::before,
|
||||
|
|
@ -347,6 +412,114 @@ html, body {
|
|||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* ── Settings Button (Icon-Button per Styleguide §7) ── */
|
||||
.hub-settings-btn {
|
||||
padding: 6px;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.hub-settings-btn:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* ── Settings Modal ── */
|
||||
.hub-settings-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.hub-settings-modal {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 340px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.hub-settings-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.hub-settings-modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.hub-settings-modal-close:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
.hub-settings-modal-body {
|
||||
padding: 16px 20px 20px;
|
||||
}
|
||||
.hub-settings-section-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.hub-settings-theme-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.hub-settings-theme-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.hub-settings-theme-btn:hover {
|
||||
color: var(--text-normal);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.hub-settings-theme-btn.active {
|
||||
border-color: var(--accent);
|
||||
color: var(--text-normal);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
.hub-settings-theme-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Refresh Button (Icon-Button per Styleguide §7) ── */
|
||||
.hub-refresh-btn {
|
||||
padding: 6px;
|
||||
|
|
@ -808,60 +981,6 @@ html, body {
|
|||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg-deep);
|
||||
|
||||
/* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */
|
||||
--bg-deep: #1a1810;
|
||||
--bg-primary: #211e17;
|
||||
--bg-secondary: #2a2620;
|
||||
--bg-tertiary: #322d26;
|
||||
--text-normal: #dbdee1;
|
||||
--text-muted: #949ba4;
|
||||
--text-faint: #6d6f78;
|
||||
--accent: #e67e22;
|
||||
--accent-rgb: 230, 126, 34;
|
||||
--accent-hover: #d35400;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* ── Radio Themes ── */
|
||||
.radio-container[data-theme="purple"] {
|
||||
--bg-deep: #13111c;
|
||||
--bg-primary: #1a1726;
|
||||
--bg-secondary: #241f35;
|
||||
--bg-tertiary: #2e2845;
|
||||
--accent: #9b59b6;
|
||||
--accent-rgb: 155, 89, 182;
|
||||
--accent-hover: #8e44ad;
|
||||
}
|
||||
|
||||
.radio-container[data-theme="forest"] {
|
||||
--bg-deep: #0f1a14;
|
||||
--bg-primary: #142119;
|
||||
--bg-secondary: #1c2e22;
|
||||
--bg-tertiary: #253a2c;
|
||||
--accent: #2ecc71;
|
||||
--accent-rgb: 46, 204, 113;
|
||||
--accent-hover: #27ae60;
|
||||
}
|
||||
|
||||
.radio-container[data-theme="ocean"] {
|
||||
--bg-deep: #0a1628;
|
||||
--bg-primary: #0f1e33;
|
||||
--bg-secondary: #162a42;
|
||||
--bg-tertiary: #1e3652;
|
||||
--accent: #3498db;
|
||||
--accent-rgb: 52, 152, 219;
|
||||
--accent-hover: #2980b9;
|
||||
}
|
||||
|
||||
.radio-container[data-theme="cherry"] {
|
||||
--bg-deep: #1a0f14;
|
||||
--bg-primary: #22141a;
|
||||
--bg-secondary: #301c25;
|
||||
--bg-tertiary: #3e2530;
|
||||
--accent: #e74c6f;
|
||||
--accent-rgb: 231, 76, 111;
|
||||
--accent-hover: #c0392b;
|
||||
}
|
||||
|
||||
/* ── Globe ── */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue