/** * DARK MODE STYLES FOR SKILLSET * * This file provides dark mode styling using CSS custom properties (variables). * The dark mode is toggled by adding data-theme="dark" to the element. * * HOW IT WORKS: * 1. Default (light mode) variables are defined in :root * 2. Dark mode overrides are defined in [data-theme="dark"] * 3. All styles use var() to reference these variables * 4. When user toggles dark mode, Django sets data-theme attribute * * BROWSER SUPPORT: * CSS variables work in all modern browsers (Chrome 49+, Firefox 31+, Safari 9.1+) */ /* ============================================ LIGHT MODE (DEFAULT) These are the default colors for the site ============================================ */ :root { /* Background colors */ --bg-primary: #ffffff; /* Main page background */ --bg-secondary: #f5f5f5; /* Secondary sections */ --bg-tertiary: #fafafa; /* Subtle backgrounds */ /* Text colors */ --text-primary: #363636; /* Main text color */ --text-secondary: #4a4a4a; /* Secondary text */ --text-muted: #7a7a7a; /* Muted/disabled text */ --text-light: #b5b5b5; /* Very light text */ /* Component backgrounds */ --card-bg: #ffffff; /* Cards and boxes */ --input-bg: #ffffff; /* Form inputs */ --nav-bg: #ffffff; /* Navigation bar */ --footer-bg: #f5f5f5; /* Footer */ /* Borders and dividers */ --border-color: #dbdbdb; /* Default borders */ --border-light: #ededed; /* Light borders */ --border-dark: #b5b5b5; /* Dark borders */ /* Interactive elements */ --hover-bg: #f5f5f5; /* Hover backgrounds */ --active-bg: #eeeeee; /* Active/selected state */ /* Shadows */ --shadow-sm: 0 2px 3px rgba(10, 10, 10, 0.1); --shadow-md: 0 8px 16px rgba(10, 10, 10, 0.1); --shadow-lg: 0 12px 24px rgba(10, 10, 10, 0.15); } /* ============================================ DARK MODE These colors override the light mode ============================================ */ [data-theme="dark"] { /* Background colors - dark grays */ --bg-primary: #1a1a1a; /* Very dark gray for main background */ --bg-secondary: #2d2d2d; /* Lighter dark gray for sections */ --bg-tertiary: #363636; /* Even lighter for subtle backgrounds */ /* Text colors - light */ --text-primary: #e0e0e0; /* Light gray for main text */ --text-secondary: #b0b0b0; /* Medium gray for secondary text */ --text-muted: #808080; /* Darker gray for muted text */ --text-light: #606060; /* Very dark gray for light text */ /* Component backgrounds */ --card-bg: #2d2d2d; /* Dark cards */ --input-bg: #363636; /* Dark inputs */ --nav-bg: #2d2d2d; /* Dark navigation */ --footer-bg: #1a1a1a; /* Dark footer */ /* Borders and dividers - subtle in dark mode */ --border-color: #404040; /* Subtle borders */ --border-light: #353535; /* Very subtle borders */ --border-dark: #505050; /* Stronger borders */ /* Interactive elements */ --hover-bg: #363636; /* Slightly lighter on hover */ --active-bg: #404040; /* Even lighter when active */ /* Shadows - barely visible in dark mode */ --shadow-sm: 0 2px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5); } /* ============================================ APPLY VARIABLES TO ELEMENTS All elements use var() to reference colors ============================================ */ /* Base elements */ body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Navigation */ .navbar { background-color: var(--nav-bg) !important; border-bottom: 1px solid var(--border-color); } .navbar-item, .navbar-link { color: var(--text-primary) !important; } .navbar-item:hover, .navbar-link:hover { background-color: var(--hover-bg) !important; color: var(--text-primary) !important; } /* Cards and boxes */ .box, .card { background-color: var(--card-bg); color: var(--text-primary); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); } .card-header { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .card-footer { background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); } /* Form inputs */ .input, .textarea, .select select { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-primary); } .input:focus, .textarea:focus, .select select:focus { border-color: #3273dc; /* Keep blue focus border in dark mode */ } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } /* Tables */ .table { background-color: var(--card-bg); color: var(--text-primary); } .table thead th { color: var(--text-primary); border-bottom-color: var(--border-color); } .table td, .table th { border-color: var(--border-light); } .table.is-striped tbody tr:nth-child(even) { background-color: var(--bg-secondary); } .table.is-hoverable tbody tr:hover { background-color: var(--hover-bg); } /* Notifications */ .notification { background-color: var(--bg-secondary); color: var(--text-primary); } /* Keep notification colors but adjust opacity for dark mode */ [data-theme="dark"] .notification.is-info { background-color: rgba(50, 115, 220, 0.2); color: #88b3e6; } [data-theme="dark"] .notification.is-success { background-color: rgba(72, 199, 116, 0.2); color: #7cd992; } [data-theme="dark"] .notification.is-warning { background-color: rgba(255, 221, 87, 0.2); color: #ffe08a; } [data-theme="dark"] .notification.is-danger { background-color: rgba(241, 70, 104, 0.2); color: #f78da7; } /* Modals */ .modal-background { background-color: rgba(10, 10, 10, 0.86); } .modal-card { background-color: var(--card-bg); } .modal-card-head, .modal-card-foot { background-color: var(--bg-secondary); border-color: var(--border-color); } .modal-card-title { color: var(--text-primary); } /* Hero sections */ .hero { background-color: var(--bg-secondary); } .hero.is-light { background-color: var(--bg-tertiary); } /* Titles and headings */ .title, .subtitle { color: var(--text-primary); } /* Help text */ .help { color: var(--text-secondary); } /* Tags */ .tag:not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-primary) { background-color: var(--bg-secondary); color: var(--text-primary); } /* Preserve Bulma's colored tags in dark mode */ .tag.is-link { background-color: #3273dc !important; color: #fff !important; } .tag.is-primary { background-color: #00d1b2 !important; color: #fff !important; } /* Pagination */ .pagination-link, .pagination-previous, .pagination-next { border-color: var(--border-color); color: var(--text-primary); background-color: var(--card-bg); } .pagination-link:hover { border-color: var(--border-dark); background-color: var(--hover-bg); } /* Dropdown menus */ .dropdown-content { background-color: var(--card-bg); box-shadow: var(--shadow-md); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover { background-color: var(--hover-bg); } .dropdown-divider { background-color: var(--border-color); } /* Tabs */ .tabs a { color: var(--text-primary); border-bottom-color: var(--border-color); } .tabs a:hover { border-bottom-color: var(--border-dark); } .tabs li.is-active a { color: #3273dc; border-bottom-color: #3273dc; } /* Menu sidebar */ .menu-list a { color: var(--text-primary); } .menu-list a:hover { background-color: var(--hover-bg); } .menu-list a.is-active { background-color: #3273dc; color: #ffffff; } .menu-label { color: var(--text-muted); } /* Progress bars - keep colors but adjust for dark mode */ .progress { background-color: var(--bg-secondary); } /* Breadcrumb */ .breadcrumb a { color: var(--text-primary); } .breadcrumb a:hover { color: #3273dc; } .breadcrumb li.is-active a { color: var(--text-secondary); } .breadcrumb li + li::before { color: var(--text-muted); } /* Footer */ .footer { background-color: var(--footer-bg); color: var(--text-secondary); } /* HR dividers */ hr { background-color: var(--border-color); } /* Code blocks (if any) */ code, pre { background-color: var(--bg-secondary); color: var(--text-primary); } /* ============================================ SMOOTH TRANSITIONS Makes switching themes feel smooth ============================================ */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* Don't transition buttons and links (feels sluggish) */ .button, a { transition-duration: 0.15s; } /* ============================================ UTILITY CLASSES FOR DARK MODE ============================================ */ /* Force light text (useful for colored backgrounds) */ .has-text-light-dark { color: var(--text-primary) !important; } /* Force dark background */ .has-background-dark-mode { background-color: var(--bg-secondary) !important; } /* Inverted card (lighter in dark mode) */ [data-theme="dark"] .card-inverted { background-color: var(--bg-tertiary); } /* ============================================ SCROLLBAR STYLING Custom scrollbar for better UX in both modes ============================================ */ /* Webkit browsers (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; border: 2px solid var(--bg-secondary); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border-color) var(--bg-secondary); } /* ============================================ FORM ELEMENTS - Dark Mode Fixes ============================================ */ /* Checkbox and radio labels */ [data-theme="dark"] .checkbox, [data-theme="dark"] .radio, [data-theme="dark"] label, [data-theme="dark"] .label { color: var(--text-primary) !important; } /* Help text */ [data-theme="dark"] .help { color: var(--text-secondary) !important; } /* Ensure strong tags in labels are also visible */ [data-theme="dark"] .checkbox strong, [data-theme="dark"] .radio strong, [data-theme="dark"] label strong { color: var(--text-primary) !important; }