/* ============================================================ CSS Custom Properties – Light (default) and Dark themes The [data-theme] attribute is set on by JS on load. "auto" mode relies on prefers-color-scheme only. ============================================================ */ :root { --bg: #fafafa; --bg-alt: #f5f5f5; --surface: #ffffff; --surface-alt: #eeeeee; --border: #eeeeee; --nav-bg: #03a9f4; /* light-blue */ --nav-text: #ffffff; --sidebar-bg: #ffffff; --sidebar-text: #616161; --sidebar-header: #424242; --sidebar-border: #eeeeee; --sidebar-hover: #e0e0e0; --text: #616161; --text-dark: #424242; --text-muted: #757575; --dropdown-bg: #ffffff; --dropdown-text: #616161; --modal-bg: #ffffff; --modal-text: #616161; --input-border: #03a9f4; --accent: #03a9f4; --accent-hover: #0288d1; --search-bg: #eeeeee; --search-form-bg: #fafafa; --search-text: #424242; --ace-search-bg: #eeeeee; --shadow-color: rgba(0,0,0,0.14); } /* Dark theme values */ [data-theme="dark"] { --bg: #1e1e1e; --bg-alt: #252525; --surface: #2d2d2d; --surface-alt: #333333; --border: #3a3a3a; --nav-bg: #1a1a2e; --nav-text: #e0e0e0; --sidebar-bg: #252525; --sidebar-text: #b0b0b0; --sidebar-header: #cccccc; --sidebar-border: #3a3a3a; --sidebar-hover: #383838; --text: #b0b0b0; --text-dark: #cccccc; --text-muted: #888888; --dropdown-bg: #2d2d2d; --dropdown-text: #b0b0b0; --modal-bg: #2d2d2d; --modal-text: #cccccc; --input-border: #4fc3f7; --accent: #4fc3f7; --accent-hover: #29b6f6; --search-bg: #333333; --search-form-bg: #2d2d2d; --search-text: #cccccc; --ace-search-bg: #333333; --shadow-color: rgba(0,0,0,0.4); } /* Auto dark mode via system preference (only when no explicit theme is set) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #1e1e1e; --bg-alt: #252525; --surface: #2d2d2d; --surface-alt: #333333; --border: #3a3a3a; --nav-bg: #1a1a2e; --nav-text: #e0e0e0; --sidebar-bg: #252525; --sidebar-text: #b0b0b0; --sidebar-header: #cccccc; --sidebar-border: #3a3a3a; --sidebar-hover: #383838; --text: #b0b0b0; --text-dark: #cccccc; --text-muted: #888888; --dropdown-bg: #2d2d2d; --dropdown-text: #b0b0b0; --modal-bg: #2d2d2d; --modal-text: #cccccc; --input-border: #4fc3f7; --accent: #4fc3f7; --accent-hover: #29b6f6; --search-bg: #333333; --search-form-bg: #2d2d2d; --search-text: #cccccc; --ace-search-bg: #333333; --shadow-color: rgba(0,0,0,0.4); } } /* ============================================================ Base layout ============================================================ */ body { margin: 0; padding: 0; background-color: var(--bg); color: var(--text); display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } /* ============================================================ Navbar / Toolbar Override Materialize .light-blue with maximum specificity ============================================================ */ nav, nav.light-blue, .navbar-fixed nav, .navbar-fixed nav.light-blue, header .navbar-fixed nav, header nav { background-color: var(--nav-bg) !important; color: var(--nav-text) !important; box-shadow: 0 2px 4px var(--shadow-color) !important; } nav a, nav .nav-wrapper a, nav i.material-icons, nav .nav-wrapper i.material-icons, .navbar-fixed nav a, .navbar-fixed nav i { color: var(--nav-text) !important; } /* Filepath bar / current file input area */ .nav-wrapper .input-field input, nav .input-field input, nav input { color: var(--nav-text) !important; border-bottom-color: var(--nav-text) !important; } /* Active / hover states in nav */ nav ul a:hover, nav ul li.active a { background-color: rgba(255,255,255,0.15) !important; } /* ============================================================ Override ALL Materialize grey/white utility classes These are hardcoded in HTML and beat our CSS variables ============================================================ */ .grey.lighten-4, .grey.lighten-3, .grey.lighten-2, .grey.lighten-1, ul.grey.lighten-4, div.grey.lighten-4, li.grey.lighten-4 { background-color: var(--surface) !important; } /* Filepath card bar */ .card.grey.lighten-4, .card.input-field.grey.lighten-4, div.card.input-field.col.grey.lighten-4 { background-color: var(--surface-alt) !important; box-shadow: none !important; } /* Filepath input text */ .currentfile_input, input#currentfile { color: var(--text-dark) !important; background-color: transparent !important; } /* Sidebar toolbar rows */ ul.row.no-padding.center.grey.lighten-4, ul.row.center.toolbar_mobile.grey.lighten-4, #slide-out.grey.lighten-4, ul#slide-out.side-nav.grey.lighten-4 { background-color: var(--sidebar-bg) !important; } /* Grey icons in sidebar toolbar */ .grey-text.text-darken-2, i.grey-text.text-darken-2 { color: var(--text-muted) !important; } /* Tables in modals */ table, table.bordered, table.highlight, table thead, table tbody tr { background-color: var(--modal-bg) !important; color: var(--modal-text) !important; border-color: var(--border) !important; } table.highlight tbody tr:hover { background-color: var(--surface-alt) !important; } /* Card panels */ .card-panel { background-color: var(--surface) !important; color: var(--text) !important; } /* Chips / badges */ .chip { background-color: var(--surface-alt) !important; color: var(--text) !important; } /* ============================================================ HA Entities panel (left column: Trigger platforms, Events…) ============================================================ */ #hass_menu_l { background-color: var(--bg) !important; color: var(--text) !important; } /* Native