/* File: assets/css/theme.css Color variables for light and dark themes */ :root { /* Base theme colors (light mode default) */ --primary-color: #dd3333; --primary-dark: #bb2222; --primary-light: #f8d7d7; --secondary-color: #4a7db7; --secondary-dark: #3a6aa0; --secondary-light: #d7e5f8; --accent-color: #e0b050; --accent-dark: #c99a3c; --accent-light: #f8efd7; /* Text colors */ --text-primary: #333333; --text-secondary: #666666; --text-light: #ffffff; --text-muted: #999999; /* Background colors */ --bg-primary: #ffffff; --bg-secondary: #f8f8f8; --bg-dark: #333333; --bg-darker: #222222; --bg-light: #f1f1f1; /* Border colors */ --border-color: #dddddd; --border-light: #eeeeee; --border-dark: #555555; /* Shadow colors */ --shadow-color: rgba(0, 0, 0, 0.1); --shadow-color-darker: rgba(0, 0, 0, 0.2); } /* Dark theme colors - these will be applied when .dark-theme class is added to or */ .dark-theme { /* Base theme colors */ --primary-color: #ff4444; --primary-dark: #ee3333; --primary-light: #662222; --secondary-color: #5a8dc7; --secondary-dark: #4a7db7; --secondary-light: #2a3c55; --accent-color: #e0b050; --accent-dark: #c99a3c; --accent-light: #554422; /* Text colors */ --text-primary: #f0f0f0; --text-secondary: #cccccc; --text-light: #ffffff; --text-muted: #aaaaaa; /* Background colors */ --bg-primary: #222222; --bg-secondary: #333333; --bg-dark: #111111; --bg-darker: #000000; --bg-light: #444444; /* Border colors */ --border-color: #444444; --border-light: #555555; --border-dark: #222222; /* Shadow colors */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-color-darker: rgba(0, 0, 0, 0.6); } /* Theme switcher styles */ .theme-switch-wrapper { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; z-index: 999; } .theme-switch { display: inline-block; height: 24px; position: relative; width: 48px; } .theme-switch input { display: none; } .slider { background-color: var(--bg-light); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 24px; } .slider:before { background-color: var(--bg-primary); bottom: 4px; content: ""; height: 16px; left: 4px; position: absolute; transition: .4s; width: 16px; border-radius: 50%; } input:checked + .slider { background-color: var(--primary-color); } input:checked + .slider:before { transform: translateX(24px); } .theme-switch-wrapper .switch-label { margin-left: 10px; font-size: 12px; color: var(--text-primary); }