/* ForgePress Component: Dark Mode * Dark mode color overrides. Applied when .fp-dark is present on * or . Color tokens are injected dynamically by the Assets module * from the dark palette option; this file handles the transition and * component-specific adjustments. */ .fp-dark, .fp-dark body { color-scheme: dark; } .fp-dark { --fp-color-foreground: #e4e7eb; --fp-color-background: #0f1115; --fp-color-surface: #1a1d24; --fp-color-border: #2a2e38; --fp-color-muted: #9ca3af; --fp-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --fp-shadow-md: 0 4px 12px rgba(0,0,0,0.4); --fp-shadow-lg: 0 10px 30px rgba(0,0,0,0.5); } .fp-dark .fp-nav__list > li > a:hover, .fp-dark .fp-nav__list > li > a:focus { background-color: var(--fp-color-surface); } .fp-dark .fp-archive-loop .wp-block-post { border-color: var(--fp-color-border); } .fp-dark .fp-widget, .fp-dark .wp-block-code, .fp-dark .wp-block-table th { background: var(--fp-color-surface); } .fp-dark .wp-block-table th, .fp-dark .wp-block-table td { border-color: var(--fp-color-border); } .fp-dark .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--fp-color-surface); } .fp-dark .wp-block-comment { background: var(--fp-color-surface); } .fp-dark .fp-nav--primary .fp-nav__list { background: var(--fp-color-background); border-bottom-color: var(--fp-color-border); } /* Toggle button. */ .fp-dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--fp-color-border); border-radius: var(--fp-radius, 6px); cursor: pointer; transition: background-color var(--fp-transition-fast, 150ms ease); } .fp-dark-mode-toggle:hover { background: var(--fp-color-surface); } .fp-dark-mode-toggle__icon { width: 18px; height: 18px; display: none; } .fp-dark-mode-toggle__icon--sun { display: block; background: var(--fp-color-foreground); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM12 4V2m0 20v-2m8-8h2M2 12h2m13.66-5.66 1.41-1.41M4.93 19.07l1.41-1.41m12.73 1.41-1.41-1.41M4.93 4.93l1.41 1.41'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM12 4V2m0 20v-2m8-8h2M2 12h2m13.66-5.66 1.41-1.41M4.93 19.07l1.41-1.41m12.73 1.41-1.41-1.41M4.93 4.93l1.41 1.41'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM12 4V2m0 20v-2m8-8h2M2 12h2m13.66-5.66 1.41-1.41M4.93 19.07l1.41-1.41m12.73 1.41-1.41-1.41M4.93 4.93l1.41 1.41'/%3E%3C/svg%3E") center/contain no-repeat; } .fp-dark-mode-toggle__icon--moon { display: none; background: var(--fp-color-foreground); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") center/contain no-repeat; } /* When dark mode is active, show moon (to switch to light). */ .fp-dark .fp-dark-mode-toggle__icon--sun { display: none; } .fp-dark .fp-dark-mode-toggle__icon--moon { display: block; } /* Smooth transition between modes. */ .fp-dark-mode-ready body, .fp-dark-mode-ready .fp-widget, .fp-dark-mode-ready .fp-nav__list > li > a, .fp-dark-mode-ready .wp-block-code, .fp-dark-mode-ready .wp-block-comment { transition: background-color var(--fp-transition-base, 250ms ease), color var(--fp-transition-base, 250ms ease), border-color var(--fp-transition-base, 250ms ease); }