/* ========================================================================== Stadtkapelle Lahr – Dark Mode -------------------------------------------------------------------------- HELLE Farben: Design → Editor → Stile → Farben → Palette DUNKLE Farben: Abschnitt 1 dieser Datei Aufbau (Design-Tokens, Benennung nach Rolle statt nach Farbwert): --dark-color- Farben im Dark Mode --dark- sonstige Werte im Dark Mode Neue Farbe ergänzen – zwei Schritte: 1. In Abschnitt 1 ein Token anlegen: --dark-color-highlight: #FFD166; (Kommentar: Rolle wie in der Palette) 2. In Abschnitt 2a der Palettenfarbe zuordnen: --wp--preset--color--: var(--dark-color-highlight); steht im Seiten-Code als has--color bzw. has--background-color. ========================================================================== */ /* --- 1. Tokens: dunkle Werte (nur hier Werte ändern) --------------------- */ :root { /* Flächen */ --dark-color-background: #1E1E1E; /* Seitenhintergrund */ --dark-color-surface: #2A2A2A; /* Karten */ --dark-color-border: #3A3A3A; /* Linien und Rahmen */ /* Schrift */ --dark-color-text: #F3F3F3; /* Haupttext und Überschriften */ --dark-color-text-muted: #C6C4B8; /* Nebentext (Datum, Menü) */ --dark-color-link: #FF6B73; /* Links und kleine rote Schrift */ /* Aktionen */ --dark-color-primary: #E40613; /* Button-Fläche */ --dark-color-on-primary: #FFFFFF; /* Schrift auf Button-Fläche */ /* Sonstiges */ --dark-image-brightness: 0.92; /* Helligkeit der Fotos (1 = unverändert) */ } /* --- 2. Zuordnung im Dark Mode: Palettenfarbe → Token --------------------- Greift, sobald der Dark Mode aktiv ist (Systemeinstellung oder Schalter; das Skript im setzt dafür data-theme="dark"). 2a = aktuelle Palette („Hell – …“), 2b = alte Namen, die noch in älteren Blöcken stecken (siehe Abschnitt 3). ------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; /* 2a. Aktuelle Palette */ --wp--preset--color--custom-hell-seitenhintergrund: var(--dark-color-background); /* Seitenhintergrund */ --wp--preset--color--custom-hell-karten: var(--dark-color-surface); /* Karten */ --wp--preset--color--custom-hell-linien-und-rahmen: var(--dark-color-border); /* Linien und Rahmen */ --wp--preset--color--custom-hell-haupttext-und-berschriften: var(--dark-color-text); /* Haupttext und Überschriften */ --wp--preset--color--custom-hell-nebentext-datum-men: var(--dark-color-text-muted); /* Nebentext (Datum, Menü) */ --wp--preset--color--custom-hell-links-und-kleine-rote-schrift: var(--dark-color-link); /* Links und kleine rote Schrift */ --wp--preset--color--ti-bg-alt: var(--dark-color-surface); /* Bildhintergründe (Farbe aus dem Eltern-Theme) */ /* 2b. Alte Namen */ --wp--preset--color--custom-seitenhintergrund: var(--dark-color-background); /* Seitenhintergrund */ --wp--preset--color--custom-color-2: var(--dark-color-background); /* Seitenhintergrund (sehr alter Name) */ --wp--preset--color--custom-karten: var(--dark-color-surface); /* Karten */ --wp--preset--color--custom-linien-und-rahmen: var(--dark-color-border); /* Linien und Rahmen */ --wp--preset--color--custom-haupttext-und-berschriften: var(--dark-color-text); /* Haupttext und Überschriften */ --wp--preset--color--custom-color-1: var(--dark-color-text); /* Haupttext (sehr alter Name) */ --wp--preset--color--custom-nebentext-datum-men: var(--dark-color-text-muted); /* Nebentext (Datum, Menü) */ --wp--preset--color--custom-links-und-kleine-rote-schrift: var(--dark-color-link); /* Links und kleine rote Schrift */ --wp--preset--color--custom-button-fl-che: var(--dark-color-primary); /* Button-Fläche */ --wp--preset--color--custom-color-3: var(--dark-color-primary); /* Button-Fläche (sehr alter Name) */ /* Menü-Akzent und Fotos */ --stk-accent-default: var(--dark-color-link); --stk-img-brightness: var(--dark-image-brightness); } :root[data-theme="dark"] body { background-color: var(--dark-color-background); color: var(--dark-color-text); } /* Buttons: im Dunkeln immer Button-Fläche mit passender Schrift (auch Buttons, die im Hellen die Linkfarbe als Fläche nutzen) */ :root[data-theme="dark"] .has-custom-hell-links-und-kleine-rote-schrift-background-color { background-color: var(--dark-color-primary) !important; } :root[data-theme="dark"] .has-custom-button-fl-che-background-color, :root[data-theme="dark"] .has-custom-color-3-background-color, :root[data-theme="dark"] .has-custom-hell-links-und-kleine-rote-schrift-background-color { color: var(--dark-color-on-primary); } /* --- 3. Alte Farbnamen weiter unterstützen --------------------------------- Diese Kurznamen gibt es in der Palette nicht mehr, ältere Blöcke nutzen sie aber noch. WordPress erzeugt für sie keine Farbregeln mehr – das übernimmt dieser Abschnitt, für Hell und Dunkel. Kann entfallen, sobald alle Blöcke auf die neuen Farben umgestellt sind. ------------------------------------------------------------------------- */ /* 3a. Im hellen Modus auf die neue Palette verweisen */ :root { --wp--preset--color--custom-seitenhintergrund: var(--wp--preset--color--custom-hell-seitenhintergrund); /* Seitenhintergrund */ --wp--preset--color--custom-color-2: var(--wp--preset--color--custom-hell-seitenhintergrund); /* Seitenhintergrund (sehr alter Name) */ --wp--preset--color--custom-karten: var(--wp--preset--color--custom-hell-karten); /* Karten */ --wp--preset--color--custom-linien-und-rahmen: var(--wp--preset--color--custom-hell-linien-und-rahmen); /* Linien und Rahmen */ --wp--preset--color--custom-haupttext-und-berschriften: var(--wp--preset--color--custom-hell-haupttext-und-berschriften); /* Haupttext und Überschriften */ --wp--preset--color--custom-color-1: var(--wp--preset--color--custom-hell-haupttext-und-berschriften); /* Haupttext (sehr alter Name) */ --wp--preset--color--custom-nebentext-datum-men: var(--wp--preset--color--custom-hell-nebentext-datum-men); /* Nebentext (Datum, Menü) */ --wp--preset--color--custom-links-und-kleine-rote-schrift: var(--wp--preset--color--custom-hell-links-und-kleine-rote-schrift); /* Links und kleine rote Schrift */ --wp--preset--color--custom-button-fl-che: var(--wp--preset--color--ti-accent, #9c1e24); /* Button-Fläche */ --wp--preset--color--custom-color-3: var(--wp--preset--color--ti-accent, #9c1e24); /* Button-Fläche (sehr alter Name) */ } /* 3b. Farbregeln für die alten Namen */ .has-custom-seitenhintergrund-color { color: var(--wp--preset--color--custom-seitenhintergrund) !important; } .has-custom-seitenhintergrund-background-color { background-color: var(--wp--preset--color--custom-seitenhintergrund) !important; } .has-custom-seitenhintergrund-border-color { border-color: var(--wp--preset--color--custom-seitenhintergrund) !important; } .has-custom-color-2-color { color: var(--wp--preset--color--custom-color-2) !important; } .has-custom-color-2-background-color { background-color: var(--wp--preset--color--custom-color-2) !important; } .has-custom-color-2-border-color { border-color: var(--wp--preset--color--custom-color-2) !important; } .has-custom-karten-color { color: var(--wp--preset--color--custom-karten) !important; } .has-custom-karten-background-color { background-color: var(--wp--preset--color--custom-karten) !important; } .has-custom-karten-border-color { border-color: var(--wp--preset--color--custom-karten) !important; } .has-custom-linien-und-rahmen-color { color: var(--wp--preset--color--custom-linien-und-rahmen) !important; } .has-custom-linien-und-rahmen-background-color { background-color: var(--wp--preset--color--custom-linien-und-rahmen) !important; } .has-custom-linien-und-rahmen-border-color { border-color: var(--wp--preset--color--custom-linien-und-rahmen) !important; } .has-custom-haupttext-und-berschriften-color { color: var(--wp--preset--color--custom-haupttext-und-berschriften) !important; } .has-custom-haupttext-und-berschriften-background-color { background-color: var(--wp--preset--color--custom-haupttext-und-berschriften) !important; } .has-custom-haupttext-und-berschriften-border-color { border-color: var(--wp--preset--color--custom-haupttext-und-berschriften) !important; } .has-custom-color-1-color { color: var(--wp--preset--color--custom-color-1) !important; } .has-custom-color-1-background-color { background-color: var(--wp--preset--color--custom-color-1) !important; } .has-custom-color-1-border-color { border-color: var(--wp--preset--color--custom-color-1) !important; } .has-custom-nebentext-datum-men-color { color: var(--wp--preset--color--custom-nebentext-datum-men) !important; } .has-custom-nebentext-datum-men-background-color { background-color: var(--wp--preset--color--custom-nebentext-datum-men) !important; } .has-custom-nebentext-datum-men-border-color { border-color: var(--wp--preset--color--custom-nebentext-datum-men) !important; } .has-custom-links-und-kleine-rote-schrift-color { color: var(--wp--preset--color--custom-links-und-kleine-rote-schrift) !important; } .has-custom-links-und-kleine-rote-schrift-background-color { background-color: var(--wp--preset--color--custom-links-und-kleine-rote-schrift) !important; } .has-custom-links-und-kleine-rote-schrift-border-color { border-color: var(--wp--preset--color--custom-links-und-kleine-rote-schrift) !important; } .has-custom-button-fl-che-color { color: var(--wp--preset--color--custom-button-fl-che) !important; } .has-custom-button-fl-che-background-color { background-color: var(--wp--preset--color--custom-button-fl-che) !important; } .has-custom-button-fl-che-border-color { border-color: var(--wp--preset--color--custom-button-fl-che) !important; } .has-custom-color-3-color { color: var(--wp--preset--color--custom-color-3) !important; } .has-custom-color-3-background-color { background-color: var(--wp--preset--color--custom-color-3) !important; } .has-custom-color-3-border-color { border-color: var(--wp--preset--color--custom-color-3) !important; } /* --- 4. Grundflächen ----------------------------------------------------- */ /* Fotos im Dunkeln leicht abdunkeln, damit sie nicht blenden */ .wp-block-image img, .wp-block-post-featured-image img { filter: brightness(var(--stk-img-brightness, 1)); transition: filter .3s ease; } /* Sanfter Übergang beim Umschalten */ body, .wp-block-group, .wp-block-button__link { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } @media (prefers-reduced-motion: reduce) { body, .wp-block-group, .wp-block-button__link, .wp-block-image img, .wp-block-post-featured-image img { transition: none; } } /* --- 5. Umschalter (Muster „Dark-Mode-Schalter“) ------------------------- Der Schalter passt sich dem Gerät an: - Apple (iPhone, iPad, Mac) → Apple-Stil - alle anderen (Android, Windows, Linux …) → Material-Design-3-Stil (Klasse .stk-ui-material, gesetzt in functions.php) Beide Stile nutzen dasselbe HTML aus dem Muster. ------------------------------------------------------------------------- */ /* 3.0 Gemeinsame Basis */ .stk-theme-toggle { --stk-toggle-w: 64px; --stk-toggle-h: 32px; --stk-thumb: 26px; --stk-gap: 3px; --stk-shift: calc(var(--stk-toggle-w) - var(--stk-thumb) - var(--stk-gap) * 2); /* Material-Farben (Vereinsrot) */ --stk-m3-primary-dark: #ffb3ae; /* „Ein“ = dunkles Design aktiv */ --stk-m3-on-primary-dark: #5f1416; --stk-m3-outline: #79747e; --stk-m3-track-off: #e7e0ec; position: relative; display: inline-flex; align-items: center; width: var(--stk-toggle-w); height: var(--stk-toggle-h); padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; vertical-align: middle; } .stk-theme-toggle:focus-visible { outline: 2px solid #9c1e24; outline-offset: 3px; } .stk-toggle-track { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .stk-toggle-thumb { position: absolute; display: grid; place-items: center; border-radius: 50%; } .stk-toggle-thumb svg { grid-area: 1 / 1; position: relative; width: 16px; height: 16px; } /* ==== 3.1 Apple-Stil ==================================================== */ :root:not(.stk-ui-material) .stk-toggle-track { background: linear-gradient(135deg, #e8eef6 0%, #cfdbea 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06); transition: background .45s ease, box-shadow .45s ease; } :root:not(.stk-ui-material) .stk-toggle-track::before, :root:not(.stk-ui-material) .stk-toggle-track::after { content: ""; position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; } :root:not(.stk-ui-material) .stk-toggle-track::before { top: 9px; left: 12px; box-shadow: 8px 9px 0 0 rgba(255,255,255,.8), 16px 2px 0 -.5px rgba(255,255,255,.6); } :root:not(.stk-ui-material) .stk-toggle-track::after { top: 20px; left: 22px; width: 1.5px; height: 1.5px; } :root:not(.stk-ui-material) .stk-toggle-thumb { top: var(--stk-gap); left: var(--stk-gap); width: var(--stk-thumb); height: var(--stk-thumb); background: #ffffff; color: #f2a516; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.08); transition: transform .45s cubic-bezier(.65,-.2,.35,1.25), background .45s ease, color .45s ease, width .2s ease; } :root:not(.stk-ui-material) .stk-toggle-thumb svg { transition: opacity .3s ease, transform .45s ease; } :root:not(.stk-ui-material) .stk-icon-sun { opacity: 1; transform: rotate(0) scale(1); } :root:not(.stk-ui-material) .stk-icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); } :root:not(.stk-ui-material) .stk-theme-toggle:hover .stk-toggle-thumb { box-shadow: 0 3px 10px rgba(0,0,0,.22), 0 1px 1px rgba(0,0,0,.08); } :root:not(.stk-ui-material) .stk-theme-toggle:active .stk-toggle-thumb { width: calc(var(--stk-thumb) + 4px); border-radius: 999px; } /* Apple – dunkler Zustand */ :root:not(.stk-ui-material)[data-theme="dark"] .stk-toggle-track { background: linear-gradient(135deg, #1b2440 0%, #0d1222 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); } :root:not(.stk-ui-material)[data-theme="dark"] .stk-toggle-track::before, :root:not(.stk-ui-material)[data-theme="dark"] .stk-toggle-track::after { opacity: 1; transform: none; } :root:not(.stk-ui-material)[data-theme="dark"] .stk-toggle-thumb { transform: translateX(var(--stk-shift)); background: #2a3352; color: #f5f1dc; } :root:not(.stk-ui-material)[data-theme="dark"] .stk-theme-toggle:active .stk-toggle-thumb { transform: translateX(calc(var(--stk-shift) - 4px)); } :root:not(.stk-ui-material)[data-theme="dark"] .stk-icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); } :root:not(.stk-ui-material)[data-theme="dark"] .stk-icon-moon { opacity: 1; transform: rotate(0) scale(1); } @media (prefers-color-scheme: dark) { :root:not(.stk-ui-material):not([data-theme="light"]) .stk-toggle-track { background: linear-gradient(135deg, #1b2440 0%, #0d1222 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); } :root:not(.stk-ui-material):not([data-theme="light"]) .stk-toggle-track::before, :root:not(.stk-ui-material):not([data-theme="light"]) .stk-toggle-track::after { opacity: 1; transform: none; } :root:not(.stk-ui-material):not([data-theme="light"]) .stk-toggle-thumb { transform: translateX(var(--stk-shift)); background: #2a3352; color: #f5f1dc; } :root:not(.stk-ui-material):not([data-theme="light"]) .stk-theme-toggle:active .stk-toggle-thumb { transform: translateX(calc(var(--stk-shift) - 4px)); } :root:not(.stk-ui-material):not([data-theme="light"]) .stk-icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); } :root:not(.stk-ui-material):not([data-theme="light"]) .stk-icon-moon { opacity: 1; transform: rotate(0) scale(1); } } /* ==== 3.2 Android-Stil (Material Design 3) ============================== */ :root.stk-ui-material .stk-theme-toggle { width: 52px; height: 32px; } :root.stk-ui-material .stk-toggle-track { background: var(--stk-m3-track-off); box-shadow: inset 0 0 0 2px var(--stk-m3-outline); transition: background .2s ease, box-shadow .2s ease; } :root.stk-ui-material .stk-toggle-thumb { top: 50%; left: 16px; width: 16px; height: 16px; background: var(--stk-m3-outline); color: var(--stk-m3-outline); transform: translate(-50%, -50%); transition: left .3s cubic-bezier(.2,0,0,1), width .2s ease, height .2s ease, background .2s ease; } /* runder Hover-/Druck-Schimmer wie bei Android */ :root.stk-ui-material .stk-toggle-thumb::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .2s ease; } :root.stk-ui-material .stk-theme-toggle:hover .stk-toggle-thumb::before { opacity: .08; } :root.stk-ui-material .stk-theme-toggle:active .stk-toggle-thumb::before { opacity: .12; } :root.stk-ui-material .stk-theme-toggle:active .stk-toggle-thumb { width: 28px; height: 28px; } :root.stk-ui-material .stk-icon-sun { display: none; } :root.stk-ui-material .stk-icon-moon { opacity: 0; transition: opacity .2s ease; } /* Android – „Ein“ (dunkles Design) */ :root.stk-ui-material[data-theme="dark"] .stk-toggle-track { background: var(--stk-m3-primary-dark); box-shadow: none; } :root.stk-ui-material[data-theme="dark"] .stk-toggle-thumb { left: 36px; width: 24px; height: 24px; background: var(--stk-m3-on-primary-dark); color: var(--stk-m3-primary-dark); } :root.stk-ui-material[data-theme="dark"] .stk-toggle-thumb::before { color: var(--stk-m3-primary-dark); } :root.stk-ui-material[data-theme="dark"] .stk-icon-moon { opacity: 1; } @media (prefers-color-scheme: dark) { :root.stk-ui-material:not([data-theme="light"]) .stk-toggle-track { background: var(--stk-m3-primary-dark); box-shadow: none; } :root.stk-ui-material:not([data-theme="light"]) .stk-toggle-thumb { left: 36px; width: 24px; height: 24px; background: var(--stk-m3-on-primary-dark); color: var(--stk-m3-primary-dark); } :root.stk-ui-material:not([data-theme="light"]) .stk-toggle-thumb::before { color: var(--stk-m3-primary-dark); } :root.stk-ui-material:not([data-theme="light"]) .stk-icon-moon { opacity: 1; } } :root.stk-ui-material[data-theme="dark"] .stk-theme-toggle:active .stk-toggle-thumb { width: 28px; height: 28px; } @media (prefers-color-scheme: dark) { :root.stk-ui-material:not([data-theme="light"]) .stk-theme-toggle:active .stk-toggle-thumb { width: 28px; height: 28px; } } /* ==== 3.3 Weniger Bewegung, wenn im System so eingestellt =============== */ @media (prefers-reduced-motion: reduce) { .stk-toggle-track, .stk-toggle-track::before, .stk-toggle-track::after, .stk-toggle-thumb, .stk-toggle-thumb::before, .stk-toggle-thumb svg { transition: none !important; } }