/** * Dark Mode Theme for Landscape Application * * This file provides comprehensive dark mode support using CSS custom properties. * Compatible with Bootstrap 3.3.7 and all existing application components. * * Color contrast ratios meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text) * * Usage: * - Light mode: Default, no attribute needed * - Dark mode: Add data-theme="dark" to or element */ /* ============================================================================ CSS CUSTOM PROPERTIES (VARIABLES) ============================================================================ */ /* Light Theme (Default) */ :root { /* Body & Background */ --color-body-bg: #ffffff; --color-body-text: #333333; --color-body-bg-secondary: #f5f5f5; /* Navigation */ --color-navbar-bg: #f8f8f8; --color-navbar-border: #e7e7e7; --color-navbar-text: #777777; --color-navbar-text-hover: #333333; --color-navbar-link-bg-hover: #e7e7e7; --color-navbar-brand: #777777; /* Tables */ --color-table-border: #eeeeee; --color-table-bg: #ffffff; --color-table-hover-bg: #f5f5f5; --color-table-text: #333333; --color-table-header-bg: #ffffff; --color-table-header-text: #333333; /* Footer */ --color-footer-bg: #f5f5f5; --color-footer-text: #777777; --color-footer-border: #e7e7e7; /* Forms & Inputs */ --color-input-bg: #ffffff; --color-input-border: #cccccc; --color-input-text: #555555; --color-input-placeholder: #999999; --color-input-focus-border: #66afe9; --color-input-focus-shadow: rgba(102, 175, 233, 0.6); --color-input-disabled-bg: #eeeeee; --color-input-disabled-text: #777777; /* Buttons */ --color-btn-default-bg: #ffffff; --color-btn-default-border: #cccccc; --color-btn-default-text: #333333; --color-btn-default-hover-bg: #e6e6e6; --color-btn-primary-bg: #337ab7; --color-btn-primary-text: #ffffff; --color-btn-success-bg: #5cb85c; --color-btn-success-text: #ffffff; --color-btn-info-bg: #5bc0de; --color-btn-info-text: #ffffff; --color-btn-warning-bg: #f0ad4e; --color-btn-warning-text: #ffffff; --color-btn-danger-bg: #d9534f; --color-btn-danger-text: #ffffff; /* Notice System */ --color-notice-bg: #fafafa; --color-notice-border: #7f7f84; --color-notice-text: #333333; --color-notice-shadow: rgba(0, 0, 0, 0.2); /* Modals & Overlays */ --color-modal-bg: #ffffff; --color-modal-header-bg: #ffffff; --color-modal-header-border: #e5e5e5; --color-modal-footer-bg: #f5f5f5; --color-modal-content-bg: #ffffff; --color-modal-text: #333333; --color-overlay-bg: rgba(0, 0, 0, 0.3); --color-overlay-close-bg: #ffffff; --color-overlay-close-border: #000000; /* Panel/Well */ --color-panel-bg: #f5f5f5; --color-panel-border: #e3e3e3; --color-panel-heading-bg: #f5f5f5; --color-panel-text: #333333; /* Checkbox Switch */ --color-switch-bg: #ffffff; --color-switch-border: #dbdbdb; --color-switch-toggle: #ffffff; --color-switch-disabled-bg: #e8ebee; --color-switch-disabled-border: #ffffff; /* Dropdown */ --color-dropdown-bg: #ffffff; --color-dropdown-border: rgba(0, 0, 0, 0.15); --color-dropdown-link-hover-bg: #f5f5f5; --color-dropdown-link-text: #333333; /* Signin Page */ --color-signin-body-bg: #eeeeee; /* Brand Colors (consistent across themes) */ --color-brand-success: #5cb85c; --color-brand-info: #45ABCD; --color-brand-warning: #FEAF20; --color-brand-warning-alt: #FFD733; --color-brand-danger: #d73814; --color-brand-primary: #337ab7; --color-brand-default: #666666; /* Dev Environment Indicator - always green */ --color-dev-accent: #5cb85c; } /* Dark Theme */ [data-theme="dark"] { /* Body & Background */ --color-body-bg: #1a1a1a; --color-body-text: #e4e4e4; --color-body-bg-secondary: #2d2d2d; /* Navigation */ --color-navbar-bg: #2d2d2d; --color-navbar-border: #404040; --color-navbar-text: #b8b8b8; --color-navbar-text-hover: #ffffff; --color-navbar-link-bg-hover: #3a3a3a; --color-navbar-brand: #b8b8b8; /* Tables */ --color-table-border: #404040; --color-table-bg: #1a1a1a; --color-table-hover-bg: #2d2d2d; --color-table-text: #e4e4e4; --color-table-header-bg: #252525; --color-table-header-text: #e4e4e4; /* Footer */ --color-footer-bg: #2d2d2d; --color-footer-text: #b8b8b8; --color-footer-border: #404040; /* Forms & Inputs */ --color-input-bg: #2d2d2d; --color-input-border: #4a4a4a; --color-input-text: #e4e4e4; --color-input-placeholder: #888888; --color-input-focus-border: #5ba3d0; --color-input-focus-shadow: rgba(91, 163, 208, 0.6); --color-input-disabled-bg: #3a3a3a; --color-input-disabled-text: #888888; /* Buttons */ --color-btn-default-bg: #3a3a3a; --color-btn-default-border: #4a4a4a; --color-btn-default-text: #e4e4e4; --color-btn-default-hover-bg: #4a4a4a; --color-btn-primary-bg: #4a8ec2; --color-btn-primary-text: #ffffff; --color-btn-success-bg: #6ac46a; --color-btn-success-text: #ffffff; --color-btn-info-bg: #5ba3d0; --color-btn-info-text: #ffffff; --color-btn-warning-bg: #f4b860; --color-btn-warning-text: #1a1a1a; --color-btn-danger-bg: #e15c58; --color-btn-danger-text: #ffffff; /* Notice System */ --color-notice-bg: #2d2d2d; --color-notice-border: #7f7f84; --color-notice-text: #e4e4e4; --color-notice-shadow: rgba(0, 0, 0, 0.4); /* Modals & Overlays */ --color-modal-bg: #2d2d2d; --color-modal-header-bg: #2d2d2d; --color-modal-header-border: #404040; --color-modal-footer-bg: #252525; --color-modal-content-bg: #2d2d2d; --color-modal-text: #e4e4e4; --color-overlay-bg: rgba(0, 0, 0, 0.7); --color-overlay-close-bg: #2d2d2d; --color-overlay-close-border: #e4e4e4; /* Panel/Well */ --color-panel-bg: #2d2d2d; --color-panel-border: #404040; --color-panel-heading-bg: #252525; --color-panel-text: #e4e4e4; /* Checkbox Switch */ --color-switch-bg: #3a3a3a; --color-switch-border: #4a4a4a; --color-switch-toggle: #e4e4e4; --color-switch-disabled-bg: #2d2d2d; --color-switch-disabled-border: #404040; /* Dropdown */ --color-dropdown-bg: #2d2d2d; --color-dropdown-border: rgba(255, 255, 255, 0.15); --color-dropdown-link-hover-bg: #3a3a3a; --color-dropdown-link-text: #e4e4e4; /* Signin Page */ --color-signin-body-bg: #1a1a1a; /* Brand Colors (slightly adjusted for dark mode visibility) */ --color-brand-success: #6ac46a; --color-brand-info: #5ba3d0; --color-brand-warning: #f4b860; --color-brand-warning-alt: #ffd954; --color-brand-danger: #e15c58; --color-brand-primary: #4a8ec2; --color-brand-default: #888888; /* Dev Environment Indicator - keep green accent */ --color-dev-accent: #6ac46a; } /* ============================================================================ SMOOTH TRANSITIONS ============================================================================ */ body, .navbar, .navbar-default, .navbar-nav > li > a, .table, .table > thead > tr > th, .table > tbody > tr > td, .footer, .notice, .modal-content, .modal-header, .modal-body, .modal-footer, .form-control, .btn, .panel, .well, .dropdown-menu, .overlay__close, .checkbox.checbox-switch label span { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================================================================ BODY & BASE STYLES ============================================================================ */ body { background-color: var(--color-body-bg); color: var(--color-body-text); } /* ============================================================================ NAVIGATION ============================================================================ */ .navbar-default { background-color: var(--color-navbar-bg); border-color: var(--color-navbar-border); } .navbar-default .navbar-brand { color: var(--color-navbar-brand); } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: var(--color-navbar-text-hover); } .navbar-default .navbar-nav > li > a { color: var(--color-navbar-text); } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--color-navbar-text-hover); background-color: var(--color-navbar-link-bg-hover); } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: var(--color-navbar-text-hover); background-color: var(--color-navbar-link-bg-hover); } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: var(--color-navbar-text-hover); background-color: var(--color-navbar-link-bg-hover); } .navbar-default .navbar-toggle { border-color: var(--color-navbar-border); } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: var(--color-navbar-link-bg-hover); } .navbar-default .navbar-toggle .icon-bar { background-color: var(--color-navbar-text); } .navbar-default .navbar-collapse { border-color: var(--color-navbar-border); } /* Dev Environment Indicator - maintain green accent in both themes */ .dev-logo { color: var(--color-dev-accent); } .navbar.navbar-default.dev { border-bottom-color: var(--color-dev-accent); } /* ============================================================================ TABLES ============================================================================ */ .table { background-color: var(--color-table-bg); color: var(--color-table-text); } .table > thead > tr > th { background-color: var(--color-table-header-bg); color: var(--color-table-header-text); border-bottom-color: var(--color-table-border); } .table > tbody > tr > td { color: var(--color-table-text); } .table-hover > tbody > tr:hover { background-color: var(--color-table-hover-bg); } .table-hover > tbody > tr > td { border-bottom-color: var(--color-table-border) !important; } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--color-table-border); } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--color-body-bg-secondary); } /* ============================================================================ FOOTER ============================================================================ */ .footer { background-color: var(--color-footer-bg); border-top: 1px solid var(--color-footer-border); } .footer .text-muted { color: var(--color-footer-text); } /* ============================================================================ NOTICE SYSTEM ============================================================================ */ .notice { background-color: var(--color-notice-bg); color: var(--color-notice-text); box-shadow: 0 5px 8px -6px var(--color-notice-shadow); } /* Notice variants maintain their brand colors */ .notice-success { border-color: var(--color-brand-success); } .notice-success > strong { color: var(--color-brand-success); } .notice-info { border-color: var(--color-brand-info); } .notice-info > strong { color: var(--color-brand-info); } .notice-warning { border-color: var(--color-brand-warning); } .notice-warning > strong { color: var(--color-brand-warning); } .notice-danger { border-color: var(--color-brand-danger); } .notice-danger > strong { color: var(--color-brand-danger); } /* ============================================================================ BADGE SYSTEM ============================================================================ */ /* Badge backgrounds maintain brand colors for consistency */ .badge.block > span.default { background: var(--color-brand-default); } .badge.block > span.success { background: var(--color-brand-success); } .badge.block > span.primary { background: var(--color-brand-primary); } .badge.block > span.info { background: var(--color-brand-info); } .badge.block > span.warning { background: var(--color-brand-warning-alt); } .badge.block > span.alert { background: var(--color-brand-warning); } .badge.block > span.danger { background: var(--color-brand-danger); } /* Ensure proper contrast for badge text in dark mode */ [data-theme="dark"] .badge.block > span { color: #1a1a1a; } [data-theme="dark"] .badge.block > span.default { color: #ffffff; } [data-theme="dark"] .badge.block > span.primary { color: #ffffff; } /* ============================================================================ MODALS & OVERLAYS ============================================================================ */ .modal-content { background-color: var(--color-modal-content-bg); color: var(--color-modal-text); } .modal-header { background-color: var(--color-modal-header-bg); border-bottom-color: var(--color-modal-header-border); } .modal-footer { background-color: var(--color-modal-footer-bg); border-top-color: var(--color-modal-header-border); } .modal-title { color: var(--color-modal-text); } .overlay { background-color: var(--color-overlay-bg); } .overlay__close { background-color: var(--color-overlay-close-bg); border-color: var(--color-overlay-close-border); color: var(--color-body-text); } /* ============================================================================ FORMS & INPUTS ============================================================================ */ .form-control { background-color: var(--color-input-bg); border-color: var(--color-input-border); color: var(--color-input-text); } .form-control:focus { background-color: var(--color-input-bg); border-color: var(--color-input-focus-border); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--color-input-focus-shadow); color: var(--color-input-text); } .form-control::-webkit-input-placeholder { color: var(--color-input-placeholder); } .form-control::-moz-placeholder { color: var(--color-input-placeholder); } .form-control:-ms-input-placeholder { color: var(--color-input-placeholder); } .form-control::placeholder { color: var(--color-input-placeholder); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--color-input-disabled-bg); color: var(--color-input-disabled-text); } /* Input Groups */ .input-group-addon { background-color: var(--color-body-bg-secondary); border-color: var(--color-input-border); color: var(--color-body-text); } /* Form Labels */ .control-label, .form-group label { color: var(--color-body-text); } /* Help Text */ .help-block { color: var(--color-footer-text); } /* ============================================================================ BUTTONS ============================================================================ */ .btn-default { background-color: var(--color-btn-default-bg); border-color: var(--color-btn-default-border); color: var(--color-btn-default-text); } .btn-default:hover, .btn-default:focus, .btn-default:active { background-color: var(--color-btn-default-hover-bg); border-color: var(--color-btn-default-border); color: var(--color-btn-default-text); } .btn-primary { background-color: var(--color-btn-primary-bg); border-color: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); } .btn-success { background-color: var(--color-btn-success-bg); border-color: var(--color-btn-success-bg); color: var(--color-btn-success-text); } .btn-info { background-color: var(--color-btn-info-bg); border-color: var(--color-btn-info-bg); color: var(--color-btn-info-text); } .btn-warning { background-color: var(--color-btn-warning-bg); border-color: var(--color-btn-warning-bg); color: var(--color-btn-warning-text); } .btn-danger { background-color: var(--color-btn-danger-bg); border-color: var(--color-btn-danger-bg); color: var(--color-btn-danger-text); } /* ============================================================================ PANELS & WELLS ============================================================================ */ .panel { background-color: var(--color-panel-bg); border-color: var(--color-panel-border); } .panel-heading { background-color: var(--color-panel-heading-bg); border-color: var(--color-panel-border); color: var(--color-panel-text); } .panel-body { background-color: var(--color-panel-bg); color: var(--color-panel-text); } .panel-footer { background-color: var(--color-panel-heading-bg); border-color: var(--color-panel-border); } .well { background-color: var(--color-panel-bg); border-color: var(--color-panel-border); } /* Panel variants */ .panel-default > .panel-heading { background-color: var(--color-panel-heading-bg); border-color: var(--color-panel-border); color: var(--color-panel-text); } .panel-primary > .panel-heading { background-color: var(--color-btn-primary-bg); } .panel-success > .panel-heading { background-color: var(--color-btn-success-bg); } .panel-info > .panel-heading { background-color: var(--color-btn-info-bg); } .panel-warning > .panel-heading { background-color: var(--color-btn-warning-bg); } .panel-danger > .panel-heading { background-color: var(--color-btn-danger-bg); } /* ============================================================================ DROPDOWNS ============================================================================ */ .dropdown-menu { background-color: var(--color-dropdown-bg); border-color: var(--color-dropdown-border); } .dropdown-menu > li > a { color: var(--color-dropdown-link-text); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--color-dropdown-link-hover-bg); color: var(--color-navbar-text-hover); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: var(--color-btn-primary-bg); } .dropdown-menu .divider { background-color: var(--color-navbar-border); } /* ============================================================================ BREADCRUMBS ============================================================================ */ .breadcrumb { background-color: var(--color-panel-bg); } .breadcrumb > li + li:before { color: var(--color-footer-text); } .breadcrumb > .active { color: var(--color-footer-text); } /* ============================================================================ PAGINATION ============================================================================ */ .pagination > li > a, .pagination > li > span { background-color: var(--color-btn-default-bg); border-color: var(--color-input-border); color: var(--color-btn-default-text); } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: var(--color-btn-default-hover-bg); border-color: var(--color-input-border); color: var(--color-btn-default-text); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: var(--color-btn-primary-bg); border-color: var(--color-btn-primary-bg); } /* ============================================================================ ALERTS (Bootstrap) ============================================================================ */ .alert { border-color: var(--color-panel-border); } .alert-success { background-color: var(--color-panel-bg); border-left: 4px solid var(--color-brand-success); color: var(--color-panel-text); } .alert-info { background-color: var(--color-panel-bg); border-left: 4px solid var(--color-brand-info); color: var(--color-panel-text); } .alert-warning { background-color: var(--color-panel-bg); border-left: 4px solid var(--color-brand-warning); color: var(--color-panel-text); } .alert-danger { background-color: var(--color-panel-bg); border-left: 4px solid var(--color-brand-danger); color: var(--color-panel-text); } /* ============================================================================ LIST GROUPS ============================================================================ */ .list-group-item { background-color: var(--color-panel-bg); border-color: var(--color-panel-border); color: var(--color-panel-text); } .list-group-item:hover, .list-group-item:focus { background-color: var(--color-dropdown-link-hover-bg); } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color: var(--color-btn-primary-bg); border-color: var(--color-btn-primary-bg); } /* ============================================================================ CHECKBOX SWITCH (Dark Mode Adjustments) ============================================================================ */ [data-theme="dark"] .checkbox.checbox-switch label span, [data-theme="dark"] .checkbox-inline.checbox-switch span { background-color: var(--color-switch-bg); border-color: var(--color-switch-border); } [data-theme="dark"] .checkbox.checbox-switch label span:before, [data-theme="dark"] .checkbox-inline.checbox-switch span:before { background: var(--color-switch-toggle); } [data-theme="dark"] .checkbox.checbox-switch label > input:disabled + span, [data-theme="dark"] .checkbox-inline.checbox-switch > input:disabled + span { background-color: var(--color-switch-disabled-bg); border-color: var(--color-switch-disabled-border); } [data-theme="dark"] .checkbox.checbox-switch label > input:disabled + span:before, [data-theme="dark"] .checkbox-inline.checbox-switch > input:disabled + span:before { background-color: var(--color-input-disabled-text); } /* ============================================================================ SIGNIN PAGE ============================================================================ */ .form-signin { color: var(--color-body-text); } .form-signin .form-signin-heading { color: var(--color-body-text); } /* Override body background for signin page */ body.signin-page { background-color: var(--color-signin-body-bg); } /* ============================================================================ LABELS & BADGES (Bootstrap) ============================================================================ */ .label-default { background-color: var(--color-brand-default); } .label-primary { background-color: var(--color-brand-primary); } .label-success { background-color: var(--color-brand-success); } .label-info { background-color: var(--color-brand-info); } .label-warning { background-color: var(--color-brand-warning-alt); } .label-danger { background-color: var(--color-brand-danger); } /* ============================================================================ CODE & PRE ELEMENTS ============================================================================ */ code { background-color: var(--color-panel-bg); color: var(--color-brand-danger); } pre { background-color: var(--color-panel-bg); border-color: var(--color-panel-border); color: var(--color-panel-text); } /* ============================================================================ HORIZONTAL RULES ============================================================================ */ hr { border-top-color: var(--color-panel-border); } /* ============================================================================ TEXT SELECTION ============================================================================ */ ::selection { background-color: var(--color-btn-primary-bg); color: #ffffff; } ::-moz-selection { background-color: var(--color-btn-primary-bg); color: #ffffff; } /* ============================================================================ SCROLLBAR (Webkit browsers - Chrome, Safari, Edge) ============================================================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-body-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-input-border); border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-footer-text); } /* ============================================================================ PRINT STYLES - Force Light Mode ============================================================================ */ @media print { /* Reset all color variables to light theme for printing */ [data-theme="dark"] { --color-body-bg: #ffffff; --color-body-text: #333333; --color-table-bg: #ffffff; --color-table-text: #333333; --color-table-border: #eeeeee; --color-panel-bg: #f5f5f5; --color-panel-text: #333333; } /* Ensure backgrounds print correctly */ body, .table, .panel, .modal-content { background-color: #ffffff !important; color: #000000 !important; } /* Remove shadows for cleaner print */ .notice, .panel, .modal-content { box-shadow: none !important; } } /* ============================================================================ ACCESSIBILITY ENHANCEMENTS ============================================================================ */ /* Focus visible for keyboard navigation */ [data-theme="dark"] a:focus, [data-theme="dark"] button:focus, [data-theme="dark"] .btn:focus, [data-theme="dark"] .form-control:focus { outline: 2px solid var(--color-brand-info); outline-offset: 2px; } /* Skip to content link (if implemented) */ .skip-to-content { position: absolute; top: -40px; left: 0; background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); padding: 8px; text-decoration: none; z-index: 100; } .skip-to-content:focus { top: 0; } /* ============================================================================ RESPONSIVE ADJUSTMENTS ============================================================================ */ @media (max-width: 767px) { /* Ensure mobile dropdowns are visible in dark mode */ [data-theme="dark"] .navbar-default .navbar-collapse { background-color: var(--color-navbar-bg); border-top-color: var(--color-navbar-border); } } /* ============================================================================ END OF DARK MODE THEME ============================================================================ */