/* * Dark Mode Styles for Riverbank Theme * Toggles by adding 'dark-mode' class to the html element. * Overrides CSS custom properties to switch the color scheme. */ /* Dark mode overrides - applied when .dark-mode class is on */ html.dark-mode { /* Core theme colors (from dark-orange.json style variation) */ --wp--preset--color--ti-bg: #292C33; --wp--preset--color--ti-fg: #ffffff; --wp--preset--color--ti-bg-alt: rgba(255, 255, 255, 0.05); --wp--preset--color--ti-bg-inv: rgba(0, 0, 0, 0.35); --wp--preset--color--ti-fg-alt: #FAFAFA; --wp--preset--color--ti-accent: #D8654C; } /* Dark mode body background & text */ html.dark-mode body { background-color: var(--wp--preset--color--ti-bg) !important; color: var(--wp--preset--color--ti-fg) !important; } /* Dark mode link colors */ html.dark-mode a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--ti-fg); } /* Dark mode headings */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: var(--wp--preset--color--ti-fg); } /* Dark mode site title */ html.dark-mode .wp-block-site-title a { color: var(--wp--preset--color--ti-fg); } /* Dark mode buttons */ html.dark-mode .wp-block-button__link { background-color: var(--wp--preset--color--ti-accent) !important; color: var(--wp--preset--color--ti-fg-alt) !important; } /* Dark mode navigation */ html.dark-mode .wp-block-navigation-item__label, html.dark-mode .wp-block-navigation a { color: var(--wp--preset--color--ti-fg); } /* Dark mode — mobile hamburger menu overlay (Core hardcodes #fff) */ html.dark-mode .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--wp--preset--color--ti-bg) !important; color: var(--wp--preset--color--ti-fg) !important; } /* Dark mode — desktop dropdown submenu containers (Core hardcodes #fff) */ html.dark-mode .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--ti-bg-alt) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--wp--preset--color--ti-fg) !important; } /* Dark mode — hamburger toggle and close button icons */ html.dark-mode .wp-block-navigation__responsive-container-open, html.dark-mode .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ti-fg); } /* Dark mode borders */ html.dark-mode .wp-block-group { border-color: rgba(255, 255, 255, 0.1); } /* Dark mode images background (for transparent PNGs) */ html.dark-mode img { filter: brightness(0.9); } /* Dark mode composition database (custom shortcode) */ html.dark-mode .jrdb-container { color: var(--wp--preset--color--ti-fg); } html.dark-mode .jrdb-search-controls, html.dark-mode .jrdb-composition-card, html.dark-mode .jrdb-no-results { background: #363940; color: #e0e0e0; border-left-color: #D8654C; } html.dark-mode .jrdb-search-input, html.dark-mode .jrdb-filter-select { background: #40434a; border-color: #555; color: #e0e0e0; } html.dark-mode .jrdb-composition-title, html.dark-mode .jrdb-no-results h3, html.dark-mode .jrdb-sort-label, html.dark-mode .jrdb-meta-item { color: #e0e0e0; } html.dark-mode .jrdb-stat-badge { background: linear-gradient(135deg, #D8654C 0%, #b85540 100%); } html.dark-mode .jrdb-meta-content strong { color: #e0e0e0; } /* Floating toggle button in bottom-left corner */ .dark-mode-toggle { position: fixed; bottom: 24px; left: 24px; z-index: 9999; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--ti-fg, #1F2127); background: var(--wp--preset--color--ti-bg, #ECE6DC); color: var(--wp--preset--color--ti-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; padding: 0; line-height: 1; } .dark-mode-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dark-mode-toggle:focus-visible { outline: 3px solid var(--wp--preset--color--ti-accent, #1D1F25); outline-offset: 2px; } /* Dark mode toggle in dark mode */ html.dark-mode .dark-mode-toggle { border-color: var(--wp--preset--color--ti-fg-alt); background: var(--wp--preset--color--ti-bg, #292C33); color: var(--wp--preset--color--ti-fg-alt); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }