/** * FlyBlock Dark Mode Stylesheet * * Overrides all CSS custom properties for dark color scheme. * Triggered by [data-theme="dark"] on . * * @package FlyBlock */ /* Base dark palette overrides */ [data-theme="dark"] { --fb-color-background: #0f172a; --fb-color-surface: #1e293b; --fb-color-border: #334155; --fb-color-heading: #f1f5f9; --fb-color-text: #94a3b8; --fb-color-muted: #64748b; --fb-palette-primary: #60a5fa; --fb-palette-secondary: #3b82f6; } /* Header in dark mode */ [data-theme="dark"] .site-header { background-color: var(--fb-color-background); border-bottom-color: var(--fb-color-border); } [data-theme="dark"] .fb-header-top-bar { background-color: var(--fb-color-surface); border-bottom-color: var(--fb-color-border); } [data-theme="dark"] .site-title a, [data-theme="dark"] .fb-nav-menu a { color: var(--fb-color-heading); } [data-theme="dark"] .fb-nav-menu a:hover, [data-theme="dark"] .fb-nav-menu li.current-menu-item > a { color: var(--fb-palette-primary); background-color: rgba(255, 255, 255, 0.05); } /* Dropdown dark */ [data-theme="dark"] .fb-nav-menu ul { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } /* Post cards in dark mode */ [data-theme="dark"] .fb-post-card { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } [data-theme="dark"] .fb-post-card:hover { border-color: rgba(96, 165, 250, 0.4); } [data-theme="dark"] .fb-card-title a { color: var(--fb-color-heading); } [data-theme="dark"] .fb-card-title a:hover { color: var(--fb-palette-primary); } [data-theme="dark"] .fb-card-footer { border-top-color: var(--fb-color-border); } [data-theme="dark"] .fb-author-name { color: var(--fb-color-heading); } [data-theme="dark"] .fb-read-more { background-color: rgba(255, 255, 255, 0.08); } /* Sidebar in dark mode */ [data-theme="dark"] .fb-sidebar .widget { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } [data-theme="dark"] .widget-title { color: var(--fb-color-heading); } [data-theme="dark"] .widget li { border-bottom-color: var(--fb-color-border); } /* Footer in dark mode */ [data-theme="dark"] .site-footer { background-color: var(--fb-color-surface); border-top-color: var(--fb-color-border); } [data-theme="dark"] .fb-footer-bottom-bar { border-top-color: var(--fb-color-border); } /* Single post dark */ [data-theme="dark"] .fb-prose blockquote { border-left-color: var(--fb-palette-primary); color: var(--fb-color-heading); } [data-theme="dark"] .fb-prose pre, [data-theme="dark"] .fb-prose code { background-color: var(--fb-color-surface); color: #e2e8f0; } /* Comments dark */ [data-theme="dark"] .comment-body { background-color: var(--fb-color-surface); } /* Author box dark */ [data-theme="dark"] .fb-author-box { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } /* TOC dark */ [data-theme="dark"] .fb-toc { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } /* Related posts dark */ [data-theme="dark"] .fb-related-card { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } /* Search modal dark */ [data-theme="dark"] .fb-search-box { background-color: var(--fb-color-surface); } [data-theme="dark"] .fb-search-box .search-field { background-color: var(--fb-color-background); border-color: var(--fb-color-border); color: var(--fb-color-heading); } /* Mobile drawer dark */ [data-theme="dark"] .fb-drawer-panel { background-color: var(--fb-color-surface); } [data-theme="dark"] .fb-drawer-header { border-bottom-color: var(--fb-color-border); } [data-theme="dark"] .fb-mobile-menu-list a { border-bottom-color: var(--fb-color-border); color: var(--fb-color-heading); } /* Buttons */ [data-theme="dark"] .fb-icon-btn { color: var(--fb-color-heading); } [data-theme="dark"] .fb-icon-btn:hover { background-color: rgba(255, 255, 255, 0.05); } /* Dark mode toggle button */ .fb-dark-mode-toggle { background: none; border: none; color: var(--fb-color-heading); cursor: pointer; padding: 8px; border-radius: var(--fb-radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--fb-transition-fast); position: relative; width: 36px; height: 36px; } .fb-dark-mode-toggle:hover { background-color: var(--fb-color-surface); color: var(--fb-palette-primary); } .fb-dark-mode-toggle .fb-icon-sun, .fb-dark-mode-toggle .fb-icon-moon { position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; } .fb-dark-mode-toggle .fb-icon-sun { opacity: 1; transform: rotate(0deg); } .fb-dark-mode-toggle .fb-icon-moon { opacity: 0; transform: rotate(-90deg); } [data-theme="dark"] .fb-dark-mode-toggle .fb-icon-sun { opacity: 0; transform: rotate(90deg); } [data-theme="dark"] .fb-dark-mode-toggle .fb-icon-moon { opacity: 1; transform: rotate(0deg); } /* Smooth color transitions on dark mode change */ html { transition: background-color 0.3s ease, color 0.3s ease; } *, *::before, *::after { transition-property: background-color, border-color, color; transition-duration: 0.2s; transition-timing-function: ease; } /* Exclude media / images from transitions */ img, video, svg { transition: none !important; } /* Pagination in dark mode */ [data-theme="dark"] .nav-links .page-numbers { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); color: var(--fb-color-heading); } /* 404 page dark */ [data-theme="dark"] .fb-error-code { color: var(--fb-color-border); } /* Form elements dark */ [data-theme="dark"] .comment-form input[type="text"], [data-theme="dark"] .comment-form input[type="email"], [data-theme="dark"] .comment-form input[type="url"], [data-theme="dark"] .comment-form textarea { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); color: var(--fb-color-heading); } /* Share buttons dark */ [data-theme="dark"] .fb-share-buttons { background-color: var(--fb-color-surface); border-color: var(--fb-color-border); } [data-theme="dark"] .fb-share-btn { background-color: rgba(255, 255, 255, 0.05); color: var(--fb-color-heading); } [data-theme="dark"] .fb-share-btn:hover { background-color: var(--fb-palette-primary); color: #ffffff; }