/* * Dark Mode Styles * CSS custom properties for BJJ Combos dark/light theme system. * Dark is the DEFAULT theme. Light mode overrides are in [data-theme="light"]. * Toggle is controlled via data-theme attribute on element. * Palette: #000000 (bg), #1a1a1a (cards), #2a2a2a (elevated), #e42526 (accent red). */ /* ============================================ DEFAULT: DARK THEME (root variables) ============================================ */ :root { /* Backgrounds */ --bg-primary: #000000; /* Page background - pure black */ --bg-secondary: #1a1a1a; /* Cards, navbar, sidebar */ --bg-card: #2a2a2a; /* Elevated surfaces, inputs, dropdowns */ --bg-card-hover: #333333; /* Hover state on cards/rows */ /* Text */ --text-primary: #f0f0f0; /* Body text */ --text-muted: #aaaaaa; /* Secondary / helper text */ --text-heading: #ffffff; /* H1, H2, H3 */ /* Borders & Dividers */ --border-color: #333333; /* Table borders, card borders, dividers */ --border-light: #444444; /* Lighter dividers */ /* Accent (unchanged in both modes) */ --accent: #e42526; /* Logo red */ --accent-hover: #c41f20; /* Logo red hover */ --accent-light: #ff6b6b; /* Light red for text on dark backgrounds */ /* Form elements */ --input-bg: #2a2a2a; --input-border: #444444; --input-text: #f0f0f0; --input-placeholder:#888888; /* Tables */ --table-bg: #1a1a1a; --table-stripe: #222222; --table-hover: #2a2a2a; --table-border: #333333; --table-header-bg: #0d0d0d; --table-header-text:#f0f0f0; /* Navbar */ --navbar-bg: #0d0d0d; --navbar-text: #f0f0f0; --navbar-link: #dddddd; --navbar-link-hover:#ffffff; --navbar-active-bg: #1a1a1a; /* Dropdown */ --dropdown-bg: #1a1a1a; --dropdown-text: #f0f0f0; --dropdown-hover: #2a2a2a; --dropdown-border: #333333; /* Panels / Wells / Alerts */ --panel-bg: #1a1a1a; --panel-border: #333333; --panel-header-bg: #0d0d0d; --panel-header-text:#f0f0f0; --well-bg: #1a1a1a; /* Page header (module title bar with thumbnail) */ --page-header-border: #333333; /* Badges (Bootstrap badges, not BJJ badges) */ --badge-bg: #e42526; --badge-text: #ffffff; } /* ============================================ LIGHT THEME OVERRIDES ============================================ */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f5f5f5; /* Text */ --text-primary: #333333; --text-muted: #666666; --text-heading: #333333; /* Borders */ --border-color: #dddddd; --border-light: #eeeeee; /* Accent unchanged */ --accent: #e42526; --accent-hover: #c41f20; --accent-light: #e42526; /* Form elements */ --input-bg: #ffffff; --input-border: #cccccc; --input-text: #333333; --input-placeholder:#999999; /* Tables */ --table-bg: #ffffff; --table-stripe: #f9f9f9; --table-hover: #f5f5f5; --table-border: #dddddd; --table-header-bg: #f5f5f5; --table-header-text:#333333; /* Navbar */ --navbar-bg: #f8f8f8; --navbar-text: #333333; --navbar-link: #555555; --navbar-link-hover:#333333; --navbar-active-bg: #e7e7e7; /* Dropdown */ --dropdown-bg: #ffffff; --dropdown-text: #333333; --dropdown-hover: #f5f5f5; --dropdown-border: #cccccc; /* Panels / Wells */ --panel-bg: #ffffff; --panel-border: #dddddd; --panel-header-bg: #f5f5f5; --panel-header-text:#333333; --well-bg: #f5f5f5; /* Page header */ --page-header-border: #eeeeee; /* Badges */ --badge-bg: #e42526; --badge-text: #ffffff; } /* ============================================ BASE ELEMENT OVERRIDES Applies CSS variables to standard HTML elements and Bootstrap components so pages respond to theme without needing per-element changes. ============================================ */ /* Body & Page */ body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } /* Links */ a { color: var(--accent-light); } a:hover { color: var(--accent-hover); } /* Paragraphs / general text */ p, span, label, td, th, li { color: var(--text-primary); } /* ============================================ NAVBAR ============================================ */ .navbar-default { background-color: var(--navbar-bg) !important; border-color: var(--border-color) !important; } .navbar-default .navbar-nav > li > a { color: var(--navbar-link) !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--navbar-link-hover) !important; background-color: var(--navbar-active-bg) !important; } .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus { background-color: var(--navbar-active-bg) !important; color: var(--navbar-link-hover) !important; } .navbar-default .navbar-brand { color: var(--navbar-text) !important; } /* ============================================ DROPDOWN MENUS ============================================ */ .dropdown-menu { background-color: var(--dropdown-bg) !important; border-color: var(--dropdown-border) !important; } .dropdown-menu > li > a { color: var(--dropdown-text) !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--dropdown-hover) !important; color: var(--text-heading) !important; } .dropdown-menu .divider { background-color: var(--border-color) !important; } /* ============================================ PAGE HEADER (module title with thumbnail) ============================================ */ .page-header { border-bottom-color: var(--page-header-border) !important; } .page-header h1 { color: var(--text-heading) !important; } /* ============================================ PANELS ============================================ */ .panel { background-color: var(--panel-bg) !important; border-color: var(--panel-border) !important; } .panel-default > .panel-heading { background-color: var(--panel-header-bg) !important; border-color: var(--panel-border) !important; color: var(--panel-header-text) !important; } .panel-body { background-color: var(--panel-bg) !important; } /* ============================================ TABLES ============================================ */ .table { background-color: var(--table-bg) !important; color: var(--text-primary) !important; } .table > thead > tr > th { background-color: var(--table-header-bg) !important; color: var(--table-header-text) !important; border-color: var(--table-border) !important; } .table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--table-border) !important; color: var(--text-primary) !important; } .table-bordered { border-color: var(--table-border) !important; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--table-stripe) !important; } .table-hover > tbody > tr:hover { background-color: var(--bg-card-hover) !important; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: var(--bg-card-hover) !important; } /* ============================================ FORMS & INPUTS ============================================ */ .form-control { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } .form-control:focus { background-color: var(--input-bg) !important; border-color: var(--accent) !important; color: var(--input-text) !important; box-shadow: 0 0 6px rgba(228, 37, 38, 0.3) !important; } .form-control::placeholder { color: var(--input-placeholder) !important; } select.form-control option { background-color: var(--input-bg); color: var(--input-text); } /* ============================================ WELLS ============================================ */ .well { background-color: var(--well-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* ============================================ BUTTONS Bootstrap default/secondary buttons adapt to theme. Primary (red) buttons are unaffected. ============================================ */ .btn-default { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .btn-default:hover, .btn-default:focus { background-color: var(--bg-card-hover) !important; border-color: var(--border-light) !important; color: var(--text-heading) !important; } /* ============================================ MODALS ============================================ */ .modal-content { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .modal-header { border-bottom-color: var(--border-color) !important; } .modal-footer { border-top-color: var(--border-color) !important; } /* ============================================ LIST GROUPS ============================================ */ .list-group-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .list-group-item:hover { background-color: var(--bg-card-hover) !important; } /* ============================================ ALERTS Keep Bootstrap alert colors but ensure text readable on dark bg ============================================ */ .alert { color: var(--text-primary); } /* ============================================ PAGINATION ============================================ */ .pagination > li > a, .pagination > li > span { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--accent-light) !important; } .pagination > li > a:hover { background-color: var(--bg-card-hover) !important; color: var(--text-heading) !important; } .pagination > .active > a, .pagination > .active > span { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; } /* ============================================ PAGE HEADER THUMBNAIL SWAP Swaps light thumbnails for dark versions when dark mode active. Dark mode is default so [data-theme="light"] shows light images. ============================================ */ /* Moves */ .hdr-thumbnail[src*="thumb-moves.png"], .hdr-thumbnail[src*="thumb_moves.png"] { content: url('images/thumb-moves-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-moves.png"], [data-theme="light"] .hdr-thumbnail[src*="thumb_moves.png"] { content: url('images/thumb-moves.png'); } /* Combos */ .hdr-thumbnail[src*="thumb_combos.png"] { content: url('images/thumb_combos-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_combos.png"] { content: url('images/thumb_combos.png'); } /* Systems */ .hdr-thumbnail[src*="thumb_systems.png"] { content: url('images/thumb_systems-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_systems.png"] { content: url('images/thumb_systems.png'); } /* Gameplans */ .hdr-thumbnail[src*="thumb_gameplans.png"] { content: url('images/thumb_gameplans-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_gameplans.png"] { content: url('images/thumb_gameplans.png'); } /* Flashcards */ .hdr-thumbnail[src*="thumb_flashcards.png"] { content: url('images/thumb_flashcards-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_flashcards.png"] { content: url('images/thumb_flashcards.png'); } /* Vocabulary */ .hdr-thumbnail[src*="thumb_vocabulary.png"] { content: url('images/thumb_vocabulary-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_vocabulary.png"] { content: url('images/thumb_vocabulary.png'); } /* Badges */ .hdr-thumbnail[src*="thumb_badges.png"] { content: url('images/thumb_badges-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_badges.png"] { content: url('images/thumb_badges.png'); } /* My Videos */ .hdr-thumbnail[src*="thumb_myVideos.png"] { content: url('images/thumb_myVideos-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_myVideos.png"] { content: url('images/thumb_myVideos.png'); } /* Payments */ .hdr-thumbnail[src*="thumb-payments.png"] { content: url('images/thumb-payments-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-payments.png"] { content: url('images/thumb-payments.png'); } /* Users */ .hdr-thumbnail[src*="thumb-users.png"] { content: url('images/thumb-users-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-users.png"] { content: url('images/thumb-users.png'); } /* User Profile */ .hdr-thumbnail[src*="thumb_user_profile.png"] { content: url('images/thumb_user_profile-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_user_profile.png"] { content: url('images/thumb_user_profile.png'); } /* Reports/Stats */ .hdr-thumbnail[src*="thumb-reports.png"] { content: url('images/thumb-reports-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-reports.png"] { content: url('images/thumb-reports.png'); } /* ============================================ DARK MODE TOGGLE BUTTON IN DROPDOWN ============================================ */ #dark-mode-toggle-item { padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; cursor: default; } #dark-mode-toggle-item label { margin: 0; font-size: 14px; color: var(--dropdown-text); cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; } /* The toggle switch */ .dm-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .dm-switch input { opacity: 0; width: 0; height: 0; } .dm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; border-radius: 24px; transition: 0.3s; } .dm-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; } input:checked + .dm-slider { background-color: var(--accent); } input:checked + .dm-slider:before { transform: translateX(20px); } /* Mobile dark mode toggle row */ .mobile-dark-mode-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border-color); } .mobile-dark-mode-label { font-size: 14px; color: var(--text-primary); }