/* app/static/css/modes/dark.css */ /* * Dark Mode Overrides * * Purpose: Defines overrides for base CSS variables when the .dark-mode * class is active on the body tag, primarily adjusting colors for a dark theme. * * Activation: Add 'dark-mode' class to the tag. * * How it works: * - Overrides variables defined in base/variables.css. * - Components and base styles using these variables will adapt automatically. */ .dark-mode { /* --- Override Base Color Variables --- */ /* Backgrounds & Surfaces */ --color-background: #121212; /* Very dark main background */ --color-surface-1: #1e1e1e; /* Slightly lighter surface for cards, headers */ --color-surface-2: #2a2a2a; /* Another surface level (e.g., hover, nested elements) */ --color-surface-3: #111111; /* Darkest surface (e.g., footer) */ /* Text & Links */ --color-text-primary: #e0e0e0; /* Light gray for primary text */ --color-text-secondary: #b0b0b0; /* Medium gray for secondary text */ --color-text-muted: #888888; /* Darker gray for muted text */ --color-link: #66b2ff; /* Brighter blue for links */ --color-link-hover: #99ccff; /* Even brighter blue for link hover */ /* Borders & Accents */ --color-border: #383838; /* Dark gray border */ --color-accent: var(--color-link); /* Use link color as primary accent */ --color-primary: var(--color-link); /* Use link color as primary color */ --color-secondary: var(--color-text-secondary); /* Use secondary text color */ /* Component-Specific Variable Overrides (Examples) */ /* Card */ --card-background: var(--color-background); --card-border-color: var(--color-border); --card-color: var(--color-text-primary); --card-title-color: var(--color-text-primary); /* Button */ --button-primary-background: var(--color-primary); --button-primary-color: #0a0a0a; /* Dark text on bright blue button */ --button-primary-border-color: var(--color-primary); --button-primary-background-hover: var(--color-link-hover); --button-primary-border-color-hover: var(--color-link-hover); /* Header */ --header-background: var(--color-surface-1); --header-color: var(--color-text-primary); --header-border-color: var(--color-border); /* Footer */ --footer-background: var(--color-surface-3); --footer-color: var(--color-text-secondary); --footer-border-color: var(--color-border); /* Shadows (Optional: Define distinct dark mode shadows if needed) */ /* Using slightly more visible shadows in dark mode can be effective */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); } /* Direct styling rules specific to dark mode (should be minimal) */ /* Example: Ensure images don't appear overly bright */ /* .dark-mode img { filter: brightness(.8) contrast(1.2); } */