/* ══════════════════════════════════════════════ Dark mode — activated by data-theme="dark" on ══════════════════════════════════════════════ */ /* ── CSS custom properties ── */ [data-theme="dark"] { --w-bg: #111827; --w-text: #e5e7eb; --w-heading: #f3f4f6; --w-muted: #9ca3af; --w-border: #374151; --w-card-bg: #1f2937; --w-code-bg: #1e293b; --w-surface: #1f2937; --w-header-bg: #0f172a; --w-footer-bg: #0f172a; --w-header-text: #e5e7eb; --w-footer-text: #9ca3af; --w-secondary: #9ca3af; /* Ghost theme vars */ --bg: #111827; --bg-alt: #1f2937; --text: #e5e7eb; --text-secondary: #9ca3af; --border: #374151; --surface: #1f2937; --muted: #9ca3af; } /* ── base.css overrides ── */ [data-theme="dark"] body { background-color: #111827; color: #e5e7eb; } [data-theme="dark"] a { color: var(--w-primary, #60a5fa); } [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: #f3f4f6; } /* Header */ [data-theme="dark"] .site-header { background: #0f172a; border-color: #374151; } [data-theme="dark"] .site-brand { color: #e5e7eb; } [data-theme="dark"] .site-nav > a:hover, [data-theme="dark"] .site-nav > .nav-item > a:hover { background: rgba(255,255,255,.06); } [data-theme="dark"] .nav-dropdown { background: #1f2937; border-color: #374151; box-shadow: 0 8px 24px rgba(0,0,0,.4); } [data-theme="dark"] .nav-dropdown a:hover { background: rgba(255,255,255,.06); } [data-theme="dark"] .nav-toggle { color: #e5e7eb; } /* Footer */ [data-theme="dark"] .site-footer { background: #0f172a; border-color: #374151; color: #9ca3af; } [data-theme="dark"] .footer-nav a:hover { color: #e5e7eb; } /* Flash */ [data-theme="dark"] .flash { border-color: #374151; } [data-theme="dark"] .flash.error { background: rgba(239,68,68,.15); } [data-theme="dark"] .flash.success { background: rgba(52,199,89,.15); } /* Tags */ [data-theme="dark"] .tag { background: #1f2937; border-color: #374151; color: #d1d5db; } /* TOC */ [data-theme="dark"] .toc { background: #1f2937; border-color: #374151; } /* Social share */ [data-theme="dark"] .social-share { border-color: #374151; } [data-theme="dark"] .social-share a { border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .social-share a:hover { background: rgba(255,255,255,.08); } /* Related posts */ [data-theme="dark"] .related-posts { border-color: #374151; } [data-theme="dark"] .related-post-card { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .related-post-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); } [data-theme="dark"] .related-post-card .related-tag { background: #374151; border-color: #4b5563; color: #d1d5db; } /* Forms */ [data-theme="dark"] form input, [data-theme="dark"] form textarea, [data-theme="dark"] form select { background: #1f2937; color: #e5e7eb; border-color: #374151; } /* ── search.css overrides ── */ [data-theme="dark"] .sitemap-search input { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .sitemap-search button { background: var(--w-primary, #2563eb); } /* ── webshop.css overrides ── */ [data-theme="dark"] .ws-toolbar { background: #1f2937; border-color: #374151; } [data-theme="dark"] .ws-search input { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-select { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-pill { background: rgba(255,255,255,.05); border-color: #374151; } [data-theme="dark"] .ws-chip { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-chip.is-active { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.3); color: #60a5fa; } [data-theme="dark"] .ws-card { background: #1f2937; border-color: #374151; } [data-theme="dark"] .ws-card:hover { box-shadow: 0 12px 26px rgba(0,0,0,.3); } [data-theme="dark"] .ws-card__img { background: rgba(255,255,255,.03); } [data-theme="dark"] .ws-tag { background: rgba(255,255,255,.05); border-color: #374151; color: #d1d5db; } [data-theme="dark"] .ws-btn { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); } [data-theme="dark"] .ws-btn--soft { background: rgba(255,255,255,.05); border-color: #374151; } [data-theme="dark"] .ws-btn--danger { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.25); color: #fca5a5; } [data-theme="dark"] .ws-detail__img img { border-color: #374151; background: rgba(255,255,255,.03); } [data-theme="dark"] .ws-detail__info hr { border-color: #374151; } [data-theme="dark"] .ws-features li { border-color: #374151; } [data-theme="dark"] .ws-cart-items, [data-theme="dark"] .ws-cart-summary { background: #1f2937; border-color: #374151; } [data-theme="dark"] .ws-notice { background: rgba(255,255,255,.03); border-color: #4b5563; } [data-theme="dark"] .ws-cartitem { border-color: #374151; } [data-theme="dark"] .ws-cartitem img { border-color: #374151; background: rgba(255,255,255,.03); } [data-theme="dark"] .ws-qty button { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-qty input { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-checkout-form, [data-theme="dark"] .ws-checkout-summary { background: #1f2937; border-color: #374151; } [data-theme="dark"] .ws-form__group input, [data-theme="dark"] .ws-form__group select { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-form__row input { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ws-table th { background: rgba(255,255,255,.05); } [data-theme="dark"] .ws-table th, [data-theme="dark"] .ws-table td { border-color: #374151; } [data-theme="dark"] .ws-success { background: #1f2937; border-color: #374151; } [data-theme="dark"] .ws-step { background: #1f2937; border-color: #374151; } [data-theme="dark"] .ws-step.is-done { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); color: #6ee7b7; } [data-theme="dark"] .ws-breadcrumb a { text-decoration-color: rgba(255,255,255,.18); } [data-theme="dark"] .ws-stock-ok { color: #6ee7b7; } [data-theme="dark"] .ws-stock-limited { color: #fbbf24; } [data-theme="dark"] .ws-stock-out { color: #fca5a5; } [data-theme="dark"] .ws-field-error { color: #fca5a5; } /* ── ghost/style.css overrides ── */ /* Header */ [data-theme="dark"] .gh-head { background: rgba(15,23,42,.95); border-color: #374151; } [data-theme="dark"] .gh-head.has-shadow { background: rgba(15,23,42,.98); box-shadow: 0 2px 12px rgba(0,0,0,.3); } [data-theme="dark"] .gh-head-brand { color: #e5e7eb; } [data-theme="dark"] .gh-head-link { color: #9ca3af; } [data-theme="dark"] .gh-head-link:hover { color: #e5e7eb; background: rgba(255,255,255,.06); } [data-theme="dark"] .gh-head-link.active { color: #e5e7eb; } [data-theme="dark"] .gh-head-sep { background: #374151; } [data-theme="dark"] .gh-head-btn { background: #3b82f6; color: #fff; } [data-theme="dark"] .gh-head-btn:hover { background: #60a5fa; color: #fff; } [data-theme="dark"] .gh-burger { color: #e5e7eb; } /* Mobile menu */ [data-theme="dark"] .gh-mobile { background: #111827; border-color: #374151; } [data-theme="dark"] .gh-mobile-sep { border-color: #374151; } [data-theme="dark"] .gh-mobile-cta { background: var(--w-primary, #3b82f6); } /* Skip */ [data-theme="dark"] .skip { background: #111827; border-color: #374151; color: #e5e7eb; } /* Cards */ [data-theme="dark"] .gh-card { background: #1f2937; border-color: #374151; } [data-theme="dark"] .gh-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.3); border-color: var(--w-primary, #3b82f6); } [data-theme="dark"] .gh-card-image { background: #374151; } [data-theme="dark"] .gh-card-title { color: #f3f4f6; } /* Article tag */ [data-theme="dark"] .gh-article-tag { background: #3b82f6; color: #fff; } /* Article body */ [data-theme="dark"] .gh-article-body { color: #d1d5db; } [data-theme="dark"] .gh-article-body h2, [data-theme="dark"] .gh-article-body h3 { color: #f3f4f6; } [data-theme="dark"] .gh-article-body a { color: #60a5fa; } [data-theme="dark"] .gh-article-body a:hover { color: #93c5fd; } [data-theme="dark"] .gh-article-body blockquote { border-color: #4b5563; color: #9ca3af; } [data-theme="dark"] .gh-article-body pre { background: #1e293b; border-color: #374151; } [data-theme="dark"] .gh-article-body code { background: #1e293b; color: #e5e7eb; } [data-theme="dark"] .gh-article-body pre code { color: #d1d5db; } [data-theme="dark"] .gh-article-body th { color: #f3f4f6; } [data-theme="dark"] .gh-article-body th, [data-theme="dark"] .gh-article-body td { border-color: #374151; } [data-theme="dark"] .gh-article-body hr { border-color: #374151; } [data-theme="dark"] .gh-article-actions { border-color: #374151; } /* Syntax highlighting (dark mode) */ [data-theme="dark"] .gh-article-body code.sourceCode span.co { color: #6b7280; } [data-theme="dark"] .gh-article-body code.sourceCode span.st { color: #34d399; } [data-theme="dark"] .gh-article-body code.sourceCode span.kw { color: #f472b6; } [data-theme="dark"] .gh-article-body code.sourceCode span.fu { color: #a78bfa; } [data-theme="dark"] .gh-article-body code.sourceCode span.dv { color: #60a5fa; } [data-theme="dark"] .gh-article-body code.sourceCode span.op { color: #d1d5db; } [data-theme="dark"] .gh-article-body code.sourceCode span.dt { color: #fbbf24; } [data-theme="dark"] .gh-article-body code.sourceCode span.va { color: #fbbf24; } [data-theme="dark"] .gh-article-body code.sourceCode span.cf { color: #f472b6; } [data-theme="dark"] .gh-article-body code.sourceCode span.bu { color: #a78bfa; } [data-theme="dark"] .gh-article-body code.sourceCode span.al { color: #f87171; } [data-theme="dark"] .gh-article-body code.sourceCode span.at { color: #fbbf24; } [data-theme="dark"] .gh-article-body code.sourceCode span.ss { color: #34d399; } [data-theme="dark"] .gh-article-body code.sourceCode span.im { color: #f472b6; } [data-theme="dark"] .gh-article-body code.sourceCode span.cn { color: #60a5fa; } [data-theme="dark"] .gh-article-body code.sourceCode span.sc { color: #34d399; } [data-theme="dark"] .gh-article-body code.sourceCode span.pp { color: #fbbf24; } /* Cross-links / KB links / SM links */ [data-theme="dark"] .gh-related-links { background: #1f2937; border-color: #3b82f6; } [data-theme="dark"] .gh-related-links h3 { color: #f3f4f6; } [data-theme="dark"] .gh-related-links a { color: #60a5fa; } [data-theme="dark"] .gh-kb-links { background: #1e293b; border-color: #3b82f6; } [data-theme="dark"] .gh-kb-links h3 { color: #60a5fa; } [data-theme="dark"] .gh-kb-links li a { color: #60a5fa; } [data-theme="dark"] .gh-sm-links { background: #1e293b; border-color: #34d399; } [data-theme="dark"] .gh-sm-links h3 { color: #34d399; } [data-theme="dark"] .gh-sm-links li a { color: #34d399; } /* Toasts */ [data-theme="dark"] .gh-toast { background: #1f2937; color: #e5e7eb; border-color: #374151; box-shadow: 0 4px 24px rgba(0,0,0,.3); } [data-theme="dark"] .gh-toast.success { background: #064e3b; border-color: #065f46; color: #6ee7b7; } [data-theme="dark"] .gh-toast.error { background: #7f1d1d; border-color: #991b1b; color: #fca5a5; } /* Forms */ [data-theme="dark"] .gh-form h1 { color: #f3f4f6; } [data-theme="dark"] .gh-form-group label { color: #d1d5db; } [data-theme="dark"] .gh-form-input { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .gh-form-input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.2); } [data-theme="dark"] .cooldown-box { background: #1f2937; border-color: #374151; } /* Glossary */ [data-theme="dark"] .gh-glossary dt { border-color: #374151; } [data-theme="dark"] .gh-glossary dd { border-color: #374151; color: #9ca3af; } /* Testimonials */ [data-theme="dark"] .snippet-list-testimonial .snippet-testimonial { background: #1f2937; border-color: #374151; } /* Pricing tables */ [data-theme="dark"] .gh-pricing-table td { border-color: #374151; } [data-theme="dark"] .gh-pricing-table tr:hover td { background: rgba(255,255,255,.03); } [data-theme="dark"] .gh-pricing-note { background: #1e293b; } [data-theme="dark"] .gh-pricing-note h3 { color: #60a5fa; } [data-theme="dark"] .gh-pricing-note p { color: #9ca3af; } /* Lead magnet */ [data-theme="dark"] .gh-lead-magnet { background: #1f2937; border-color: #374151; } /* Product CTA */ [data-theme="dark"] .gh-product-cta { background: #1f2937; border-color: #374151; } [data-theme="dark"] .gh-product-card { background: #111827; border-color: #374151; } [data-theme="dark"] .gh-product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); } [data-theme="dark"] .gh-product-card strong { color: #f3f4f6; } /* CAPTCHA modal */ [data-theme="dark"] .captcha-modal { background: #1f2937; } [data-theme="dark"] .captcha-modal h3 { color: #f3f4f6; } [data-theme="dark"] .captcha-question { color: #f3f4f6; } [data-theme="dark"] .captcha-input { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .captcha-input:focus { border-color: #3b82f6; } [data-theme="dark"] .captcha-error { color: #fca5a5; } /* ── Interactive tools overrides ── */ [data-theme="dark"] .tool-card { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .tool-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3); } [data-theme="dark"] .tool-card__title { color: #f3f4f6; } [data-theme="dark"] .tool-card__desc { color: #9ca3af; } [data-theme="dark"] .tool-card__cta { color: #60a5fa; } [data-theme="dark"] .tool-option { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .tool-option:hover { border-color: #60a5fa; } [data-theme="dark"] .tool-option.is-selected { border-color: #60a5fa; background: rgba(96,165,250,.1); } [data-theme="dark"] .tool-check { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .tool-check:hover { border-color: #60a5fa; } [data-theme="dark"] .tool-check.is-selected { border-color: #60a5fa; background: rgba(96,165,250,.1); } [data-theme="dark"] .tool-check__box { border-color: #4b5563; } [data-theme="dark"] .tool-check.is-selected .tool-check__box { background: #3b82f6; border-color: #3b82f6; } [data-theme="dark"] .tool-btn { background: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .tool-btn:hover { border-color: #60a5fa; } [data-theme="dark"] .tool-btn--primary { background: #3b82f6; border-color: #3b82f6; color: #fff; } [data-theme="dark"] .tool-progress__step { background: #374151; } [data-theme="dark"] .tool-cat { background: #1f2937; border-color: #374151; } [data-theme="dark"] .tool-cat__bar { background: #374151; } [data-theme="dark"] .tool-rec { background: #1f2937; border-left-color: #60a5fa; } [data-theme="dark"] .tool-cta { background: #1f2937; border-color: #3b82f6; } [data-theme="dark"] .tool-cta__link { background: #3b82f6; } [data-theme="dark"] .tool-lead { background: #1f2937; border-color: #374151; } [data-theme="dark"] .tool-lead__input { background: #111827; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .tool-obligation { border-color: #374151; } [data-theme="dark"] .tool-breakdown__item { border-color: #374151; } [data-theme="dark"] .tool-intro p { color: #9ca3af; } [data-theme="dark"] .tool-benchmark__bar { background: #374151; } [data-theme="dark"] .tool-benchmark__fill--avg { background: rgba(156,163,175,.3); } [data-theme="dark"] .tool-benchmark__marker { background: #3b82f6; } /* Cookie banner — already dark, keep consistent */ [data-theme="dark"] .cookie-banner { background: #0f172a; } /* Tag page */ [data-theme="dark"] .gh-tag-hero { border-color: #374151; } /* ── estore/style.css overrides ── */ [data-theme="dark"] .topbar { background: #0f172a; border-color: #374151; color: #9ca3af; } [data-theme="dark"] .header { background: rgba(15,23,42,.86); } [data-theme="dark"] .header .nav__toggle { background: #1f2937; } [data-theme="dark"] .burger span { background: #e5e7eb; } [data-theme="dark"] .header .brand__name { color: #e5e7eb; } [data-theme="dark"] .nav__menu { background: #111827; } [data-theme="dark"] .nav__link { color: #9ca3af; } [data-theme="dark"] .nav__link:hover { color: #e5e7eb; } [data-theme="dark"] .flash__msg--success { background: #064e3b; color: #6ee7b7; } [data-theme="dark"] .flash__msg--error { background: #7f1d1d; color: #fca5a5; } [data-theme="dark"] .flash__msg--info { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .backtotop { background: rgba(31,41,55,.92); color: #e5e7eb; } [data-theme="dark"] .modal__panel { background: #1f2937; } /* ── dewi/style.css overrides ── */ [data-theme="dark"] .header__inner { background: #0f172a; } [data-theme="dark"] .dd__panel { background: #1f2937; border-color: #374151; } [data-theme="dark"] .dd__item:hover { background: rgba(255,255,255,.06); } /* ── ilanding/style.css overrides ── */ [data-theme="dark"] .dropdown-menu { background: #1f2937; border-color: #374151; } [data-theme="dark"] .dropdown-menu a:hover { background: rgba(255,255,255,.06); } /* ── blog/style.css overrides ── */ [data-theme="dark"] .post-body pre { background: #1e293b; } [data-theme="dark"] .post-body code { background: #1e293b; color: #e5e7eb; } /* ── Images (slightly dimmed in dark mode) ── */ [data-theme="dark"] img { opacity: 0.92; } [data-theme="dark"] img:hover { opacity: 1; } /* ── Abbr underline color ── */ [data-theme="dark"] abbr[title] { text-decoration-color: #60a5fa; } /* ── Error pages ── */ [data-theme="dark"] .error { color: #fca5a5; } [data-theme="dark"] pre, [data-theme="dark"] code { background: #1e293b; color: #e5e7eb; } [data-theme="dark"] table th, [data-theme="dark"] table td { border-color: #374151; } /* ── Ghost buttons (login / portal / forms / cookie) ── */ [data-theme="dark"] .btn-accent { background: #3b82f6; border-color: transparent; color: #fff; } [data-theme="dark"] .btn-accent:hover { background: #2563eb; } [data-theme="dark"] .btn-ghost { border-color: #4b5563; color: #d1d5db; } [data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.06); color: #e5e7eb; } /* ── Estore / shared generic template classes ── */ [data-theme="dark"] .btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); } [data-theme="dark"] .btn--primary { background: var(--w-primary, #2563eb); border-color: transparent; color: #fff; } [data-theme="dark"] .btn--soft { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.25); color: #e5e7eb; } [data-theme="dark"] .btn--danger { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.25); color: #fca5a5; } [data-theme="dark"] .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .chip.is-active { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.3); color: #60a5fa; } [data-theme="dark"] .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); } [data-theme="dark"] .toolbar { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .search input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .kpi { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .faq details { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .drawer { background: #111827; border-color: rgba(255,255,255,.10); } [data-theme="dark"] .closex { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .qty button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .qty input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .table { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .table th { background: rgba(255,255,255,.06); } [data-theme="dark"] .hero__card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .kicker { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .form__input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .form__textarea { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #e5e7eb; } [data-theme="dark"] .form__error { color: #fca5a5; } [data-theme="dark"] .modal__media img { background: rgba(255,255,255,.04); } [data-theme="dark"] .kv { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } [data-theme="dark"] .notice { background: rgba(96,165,250,.06); border-color: rgba(96,165,250,.25); } [data-theme="dark"] .form__option-box { background: rgba(255,255,255,.04); } [data-theme="dark"] .nav__link:hover { background: rgba(255,255,255,.06); } [data-theme="dark"] .pill--result { background: rgba(255,255,255,.04); } /* ── Webshop breadcrumb dark fix ── */ [data-theme="dark"] .ws-breadcrumb a { text-decoration-color: rgba(255,255,255,.18); } /* ── Theme toggle button ── */ .theme-toggle { background: none; border: none; cursor: pointer; padding: 4px; color: inherit; line-height: 0; opacity: .7; transition: opacity .2s; } .theme-toggle:hover { opacity: 1; } .theme-toggle svg { display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; }