/* Theme Name: ugurdanis Theme URI: https://ugurdanis.com/ Author: Ugur Danis Author URI: https://ugurdanis.com/ Description: Single-page personal / portfolio theme built from the MegaOne "Personal" HTML template. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 8.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ugurdanis Tags: one-page, portfolio, custom-logo, translation-ready The visual styles live in assets/css/ (enqueued from functions.php). This file only carries the theme header plus a few WordPress-specific fixes. */ /* * Light/dark theme tokens. * * Only the *structural* colors (page/card backgrounds, body/heading text, * borders, shadows, the header rail) are routed through these — one-off * decorative and brand colors (social icon hover colors, front-page shape * accents, etc.) are left as literal hex in assets/css/style.css and * ud-sections.css; they read fine on both backgrounds and aren't what makes * a page unreadable in the wrong theme. * * Defaults here are light. `prefers-color-scheme` gives dark by default to * a first-time visitor whose OS asks for it; assets/js/ud-theme.js then * stamps an explicit data-theme (from localStorage, or that same OS query * on the very first visit) on before first paint (see the inline * script in header.php's — no FOUC), and the toggle only ever * flips that attribute. `:root[data-theme="light"]` has to win over the * media query even when the OS prefers dark — hence `:not([data-theme="light"])` * gating it instead of a bare `:root`. */ :root { --ud-bg: #f5f5f5; --ud-surface: #fff; --ud-header-bg: #fff; --ud-text: #696969; --ud-heading: #2b2b2b; --ud-muted: #9a9a9a; --ud-border: #e1e1e1; --ud-bg-subtle: #f2f2f2; --ud-shadow: rgba(145, 140, 145, 0.18); --ud-accent: #35ab39; --ud-accent-hover: #2c8f2f; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ud-bg: #121214; --ud-surface: #1e1f24; --ud-header-bg: #1a1b1f; --ud-text: #c9c9ce; --ud-heading: #f2f2f2; --ud-muted: #8b8b90; --ud-border: #33343a; --ud-bg-subtle: #26272c; --ud-shadow: rgba(0, 0, 0, 0.5); --ud-accent: #35ab39; --ud-accent-hover: #46c94b; color-scheme: dark; } } :root[data-theme="dark"] { --ud-bg: #121214; --ud-surface: #1e1f24; --ud-header-bg: #1a1b1f; --ud-text: #c9c9ce; --ud-heading: #f2f2f2; --ud-muted: #8b8b90; --ud-border: #33343a; --ud-bg-subtle: #26272c; --ud-shadow: rgba(0, 0, 0, 0.5); --ud-accent: #35ab39; --ud-accent-hover: #46c94b; color-scheme: dark; } /* * Several existing hover/focus transitions target border-color (and one, * .contact-form .form-control, targets the full `border` shorthand over a * sluggish .9s) — harmless on their own, but now that those borders resolve * through var(--ud-border), a theme toggle changes the same property those * rules transition. A plain custom property isn't itself interpolable * (no @property registration gives it a syntax), so browsers fall * back to the discrete transition model for the value change: the old color * holds for the first half of the transition's duration, then jumps straight * to the new one — a stray flash of the wrong border color, worst on that * .9s one. assets/js/ud-theme.js adds this class for one frame around the * data-theme flip so nothing transitions during the swap; normal hover * transitions are unaffected since the class is gone before the next * interaction. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } /* Accessibility: visually-hidden helper for skip links / screen-reader text. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #fff; clip: auto !important; clip-path: none; color: #111; display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }