/* ========================================================================== Anhoch KB – Dark Mode | assets/dark-mode.css All dark overrides live under html.akb-dark so they activate only when the JS toggles that class on . ========================================================================== */ /* -------------------------------------------------------------------------- Toggle button -------------------------------------------------------------------------- */ .akb-theme-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid #c8102e; border-radius: 50%; background: #ffffff; color: #1a1a1a; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: background .25s, color .25s, border-color .25s, box-shadow .25s; } .akb-theme-toggle:hover { background: #c8102e; color: #ffffff; box-shadow: 0 4px 16px rgba(200,16,46,.4); } /* Icon visibility — default (light mode): show moon, hide sun */ .akb-icon { display: flex; } .akb-icon svg { width: 20px; height: 20px; } .akb-icon--sun { display: none; } .akb-icon--moon { display: flex; } /* Dark mode: show sun, hide moon */ html.akb-dark .akb-icon--sun { display: flex; } html.akb-dark .akb-icon--moon { display: none; } /* Dark mode button colours */ html.akb-dark .akb-theme-toggle { background: #1e1e1e; color: #f0f0f0; border-color: #c8102e; } html.akb-dark .akb-theme-toggle:hover { background: #c8102e; color: #ffffff; } /* -------------------------------------------------------------------------- Global dark palette -------------------------------------------------------------------------- */ html.akb-dark { color-scheme: dark; } html.akb-dark body { background-color: #121212 !important; color: #e0e0e0 !important; } /* -------------------------------------------------------------------------- GeneratePress / GenerateBlocks structural elements -------------------------------------------------------------------------- */ html.akb-dark .site-header, html.akb-dark .site-footer { background-color: #1a1a1a !important; border-color: #2a2a2a !important; } html.akb-dark .nav-bar-wrap, html.akb-dark .main-nav, html.akb-dark .nav-bar { background-color: #1a1a1a !important; } html.akb-dark .main-navigation a, html.akb-dark .main-navigation a:visited { color: #e0e0e0 !important; } html.akb-dark .main-navigation a:hover, html.akb-dark .main-navigation .current-menu-item > a { color: #c8102e !important; } /* Dropdown menus */ html.akb-dark .main-navigation ul ul, html.akb-dark .main-navigation ul ul ul { background: #222 !important; border-color: #333 !important; } html.akb-dark .site-main { background-color: #121212 !important; } /* Sidebar */ html.akb-dark .widget-area, html.akb-dark .widget { background-color: #1a1a1a !important; color: #e0e0e0 !important; } html.akb-dark .widget-title { color: #ffffff !important; border-color: #c8102e !important; } /* -------------------------------------------------------------------------- Typography & links -------------------------------------------------------------------------- */ html.akb-dark h1, html.akb-dark h2, html.akb-dark h3, html.akb-dark h4, html.akb-dark h5, html.akb-dark h6 { color: #f5f5f5 !important; } html.akb-dark a { color: #e05060 !important; } html.akb-dark a:hover { color: #ff6070 !important; } html.akb-dark p, html.akb-dark li, html.akb-dark td, html.akb-dark th { color: #d0d0d0 !important; } /* -------------------------------------------------------------------------- Cards, boxes, containers -------------------------------------------------------------------------- */ html.akb-dark .gb-container, html.akb-dark .wp-block-group, html.akb-dark .postbox, html.akb-dark .entry-content .wp-block-group__inner-container { background-color: #1e1e1e !important; border-color: #2e2e2e !important; } /* Post/page cards if using grid layout */ html.akb-dark article.post, html.akb-dark .inside-article { background: #1a1a1a !important; } /* Entry meta */ html.akb-dark .entry-meta, html.akb-dark .entry-footer, html.akb-dark .post-meta { color: #999 !important; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ html.akb-dark table { border-color: #333 !important; } html.akb-dark th { background-color: #252525 !important; color: #f5f5f5 !important; border-color: #333 !important; } html.akb-dark td { border-color: #2a2a2a !important; } html.akb-dark tr:nth-child(even) td { background-color: #1d1d1d !important; } /* -------------------------------------------------------------------------- Forms & inputs -------------------------------------------------------------------------- */ html.akb-dark input, html.akb-dark textarea, html.akb-dark select { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } html.akb-dark input::placeholder, html.akb-dark textarea::placeholder { color: #777 !important; } html.akb-dark input:focus, html.akb-dark textarea:focus, html.akb-dark select:focus { border-color: #c8102e !important; outline: none; box-shadow: 0 0 0 2px rgba(200,16,46,.3) !important; } html.akb-dark button, html.akb-dark .button, html.akb-dark input[type="submit"] { background-color: #c8102e !important; color: #fff !important; border-color: #c8102e !important; } html.akb-dark button:hover, html.akb-dark .button:hover, html.akb-dark input[type="submit"]:hover { background-color: #a50d26 !important; } /* -------------------------------------------------------------------------- Search widget / search bar -------------------------------------------------------------------------- */ html.akb-dark .search-form input[type="search"] { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } /* -------------------------------------------------------------------------- ULTP (Ultimate Post) blocks — used on kb.anhoch.mk -------------------------------------------------------------------------- */ html.akb-dark .ultp-block-wrapper, html.akb-dark .ultp-post-grid-wrapper { background: transparent !important; } html.akb-dark .ultp-post-item { background: #1e1e1e !important; border-color: #2e2e2e !important; } html.akb-dark .ultp-post-title a { color: #f0f0f0 !important; } html.akb-dark .ultp-post-title a:hover { color: #c8102e !important; } html.akb-dark .ultp-post-meta, html.akb-dark .ultp-post-excerpt { color: #aaa !important; } /* -------------------------------------------------------------------------- Code blocks -------------------------------------------------------------------------- */ html.akb-dark pre, html.akb-dark code { background-color: #1a1a1a !important; color: #e0e0e0 !important; border-color: #333 !important; } /* -------------------------------------------------------------------------- Blockquotes -------------------------------------------------------------------------- */ html.akb-dark blockquote { background-color: #1a1a1a !important; border-left-color: #c8102e !important; color: #ccc !important; } /* -------------------------------------------------------------------------- Smooth transition for everything on toggle (not on initial load) The JS adds .akb-transitions-ready to after load -------------------------------------------------------------------------- */ html.akb-transitions-ready *, html.akb-transitions-ready *::before, html.akb-transitions-ready *::after { transition: background-color .25s ease, color .2s ease, border-color .2s ease !important; }