/* Theme Name: Organize Today Next Theme URI: https://example.com Author: Your Name Author URI: https://example.com Description: Test build of the Organize Today theme, updated for the current framework and a restrained motion pass. Installs alongside the live theme without replacing it. Version: 0.1.0-test Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 Text Domain: organize-today-next Tags: blog, editorial, one-column, custom-colors, custom-menu, featured-images, full-site-editing, block-patterns This theme, like WordPress, is licensed under the GPL. */ /* ========================================================================== Dark mode, opt-in, toggled via data-theme="dark" on . Light mode (no attribute) is assumed to be whatever the theme already renders by default; this layer only activates when the attribute is set. ========================================================================== */ :root { --dm-bg: #14192A; --dm-bg-2: #1C2338; --dm-surface: #E8E1CE; /* used for cards/panels that should stay light-toned even in dark mode, matching the framework page's existing pattern */ --dm-text: #EDE7D8; --dm-text-dim: #9CA3B8; --dm-text-on-surface: #241F14; --dm-link: #6FA898; --dm-link-hover: #8FC4B3; --dm-accent: #B98A3E; --dm-border: rgba(237,231,216,0.14); } [data-theme="dark"] { background-color: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } /* Headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dm-text); } /* Links */ [data-theme="dark"] a { color: var(--dm-link); } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: var(--dm-link-hover); } /* Common structural regions most themes use these or similar names for. Kept as a general fallback, but the real fix lives below: WordPress's own has-*-background-color utility classes are generated with !important, so a generic element selector like "header" can never actually win against them. Header and footer both target the same dark blue on purpose, so they read as one consistent dark surface instead of two different shades sitting next to each other. */ [data-theme="dark"] header, [data-theme="dark"] footer, [data-theme="dark"] .site-header, [data-theme="dark"] .site-footer, [data-theme="dark"] nav { background-color: var(--dm-bg); color: var(--dm-text); border-color: var(--dm-border); } /* The actual fix: override the specific WordPress color utility classes directly, matching their own !important so the override reliably wins regardless of which element they're attached to. */ [data-theme="dark"] .has-off-white-background-color, [data-theme="dark"] .has-off-black-background-color { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } [data-theme="dark"] .has-off-white-background-color *:not(.wp-block-button__link), [data-theme="dark"] .has-off-black-background-color *:not(.wp-block-button__link) { color: inherit; } /* The homepage hero uses a light slate-blue tint background. Left alone, its text (already set to work against a light tint) turns unreadable once dark mode flips text color globally, so the hero's own background needs to actually darken to match, not just its text. */ [data-theme="dark"] .has-slate-blue-tint-background-color { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; } [data-theme="dark"] .has-slate-blue-tint-background-color *:not(.wp-block-button__link) { color: inherit; } /* Main content area and article bodies */ [data-theme="dark"] main, [data-theme="dark"] article, [data-theme="dark"] .entry-content, [data-theme="dark"] .site-content { background-color: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] .entry-content p, [data-theme="dark"] .entry-content li, [data-theme="dark"] .entry-content blockquote { color: var(--dm-text-dim); } /* Core block editor output, since most modern WP content runs through these */ [data-theme="dark"] .wp-block-group, [data-theme="dark"] .wp-block-columns, [data-theme="dark"] .wp-block-cover { background-color: transparent; } [data-theme="dark"] .wp-block-quote { border-color: var(--dm-accent); color: var(--dm-text-dim); } [data-theme="dark"] .wp-block-separator { border-color: var(--dm-border); } [data-theme="dark"] .wp-block-table { color: var(--dm-text); } [data-theme="dark"] .wp-block-table th, [data-theme="dark"] .wp-block-table td { border-color: var(--dm-border); } /* Cards, panels, or boxed content that should stay on the light surface tone even in dark mode, matching the pattern already established on the framework page. Adjust this selector list once you know what your theme actually calls these elements. */ [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .widget { background-color: var(--dm-surface); color: var(--dm-text-on-surface); } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--dm-bg-2); color: var(--dm-text); border: 1px solid var(--dm-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dm-text-dim); } [data-theme="dark"] button, [data-theme="dark"] input[type="submit"] { background-color: var(--dm-accent); color: var(--dm-bg); border: none; } /* Buttons with their own explicit background color, the maroon "Start reading" button, for instance, keep exactly the color pairing they already use in light mode. That pairing was never dependent on the page's own background, so it stays readable in dark mode without any override, and forcing one here is what broke it in the first place: the maroon background survived because WordPress's own utility class carries !important, but the text color didn't have the same protection and got silently overridden underneath it. */ [data-theme="dark"] .wp-block-button__link { border: none; } /* Images: a slight dim rather than full brightness reduces harshness against a dark background, a common, low-risk dark-mode convention */ [data-theme="dark"] img { filter: brightness(0.92) contrast(1.02); } /* Focus states need to stay visible against the new dark background */ [data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible, [data-theme="dark"] input:focus-visible, [data-theme="dark"] textarea:focus-visible { outline: 2px solid var(--dm-link); outline-offset: 3px; } /* Smooth, deliberate transition, respecting reduced motion */ html { transition: background-color 0.3s ease, color 0.3s ease; } * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @media (prefers-reduced-motion: reduce) { html, * { transition: none !important; } }