/** * ALLM.one Theme System * Solarized Light (default) + Dark Mode * * Usage: Add class="dark" to element for dark mode */ :root { /* Solarized Light Theme (default) */ --bg-base: #fdf6e3; --bg-surface: #eee8d5; --text-primary: #657b83; --text-secondary: #93a1a1; --text-heading: #073642; --border-color: #93a1a1; --border-subtle: #eee8d5; /* Accent Colors - Chat Interface */ --accent-chat: #268bd2; --accent-chat-hover: #1a6ba0; /* Accent Colors - Admin Interface */ --accent-admin: #cb4b16; --accent-admin-hover: #a63c12; /* Status Colors */ --color-success: #859900; --color-error: #dc322f; --color-warning: #b58900; --color-info: #268bd2; /* Overlay Colors */ --overlay-bg: rgba(253, 246, 227, 0.95); --modal-bg: #fdf6e3; --toast-bg: rgba(238, 232, 213, 0.95); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Focus Ring */ --focus-ring: 0 0 0 3px rgba(38, 139, 210, 0.3); --focus-ring-admin: 0 0 0 3px rgba(203, 75, 22, 0.3); } .dark { /* Dark Theme */ --bg-base: #000000; --bg-surface: #0f1014; --text-primary: #ffffff; --text-secondary: #9ca3af; --text-heading: #ffffff; --border-color: #202024; --border-subtle: #27272a; /* Accent Colors - Chat Interface */ --accent-chat: #3b82f6; --accent-chat-hover: #2563eb; /* Accent Colors - Admin Interface */ --accent-admin: #ff5722; --accent-admin-hover: #e64a19; /* Status Colors */ --color-success: #22c55e; --color-error: #ef4444; --color-warning: #eab308; --color-info: #3b82f6; /* Overlay Colors */ --overlay-bg: rgba(0, 0, 0, 0.7); --modal-bg: #0f1014; --toast-bg: rgba(15, 16, 20, 0.95); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* Focus Ring */ --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3); --focus-ring-admin: 0 0 0 3px rgba(255, 87, 34, 0.3); } /* Theme Toggle Button Styles */ [data-theme-toggle] { transition: background-color 0.2s ease-out, color 0.2s ease-out; } [data-theme-toggle].active { background-color: rgba(255, 255, 255, 0.15); } .dark [data-theme-toggle].active { background-color: rgba(255, 255, 255, 0.1); } :root [data-theme-toggle].active { background-color: rgba(0, 0, 0, 0.1); color: var(--text-primary); } /* Light mode specific icon color overrides */ :root:not(.dark) [data-theme-toggle] { color: var(--text-secondary); } :root:not(.dark) [data-theme-toggle]:hover { color: var(--text-primary); background-color: rgba(0, 0, 0, 0.05); } :root:not(.dark) [data-theme-toggle].active { color: var(--text-primary); background-color: rgba(0, 0, 0, 0.1); } /* Theme toggle container styles for light mode */ :root:not(.dark) .theme-toggle-container { background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } /* Toast notification theme support */ .toast { background-color: var(--toast-bg); border-color: var(--border-color); color: var(--text-primary); } .toast.success { background: rgba(133, 153, 0, 0.15); border: 1px solid rgba(133, 153, 0, 0.3); color: var(--color-success); } .toast.error { background: rgba(220, 50, 47, 0.15); border: 1px solid rgba(220, 50, 47, 0.3); color: var(--color-error); } .toast.info { background: rgba(38, 139, 210, 0.15); border: 1px solid rgba(38, 139, 210, 0.3); color: var(--color-info); } .dark .toast.success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--color-success); } .dark .toast.error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--color-error); } .dark .toast.info { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--color-info); } /* Admin toast info uses accent color */ .admin-page .toast.info { background: rgba(203, 75, 22, 0.15); border: 1px solid rgba(203, 75, 22, 0.3); color: var(--accent-admin); } .dark.admin-page .toast.info { background: rgba(255, 87, 34, 0.15); border: 1px solid rgba(255, 87, 34, 0.3); color: var(--accent-admin); } /* Buy button styles */ #buy-credits-btn:hover { background-color: var(--accent-chat) !important; color: white !important; }