Dark Mode Toggle: világos és sötét mód

A Dark Mode Toggle lehetővé teszi, hogy a látogatók világos és sötét színséma között váltsanak. Te adod meg a sötét palettát, azt, hol töltődjön be a sötét mód, és hogyan kapcsolhatják be.

Két vezérlő van a látogatóknak:

• Lebegő kapcsoló: rögzített gomb az oldalon, a Dark Mode customiserben stílusozható.
• Supreme Dark Mode Toggle modul: elhelyezhető modul fejlécbe, láblécbe és elrendezésekbe (főleg a Theme Builderben). A modulról a Sötét mód kapcsoló és dupla címsor fejezet szól.

A szakaszok, sorok és oszlopok hátterét (és opcionálisan a szöveg-, címsor-, hivatkozás-, hivatkozás-hover- és szegélyszínt) sötét módban felülbírálhatod, a világos mód dizájnját nem érintve.

A beállítások a Visual Builder sávjáról nyílnak (Dark), és az egész webhelyre érvényesek, nem csak a szerkesztett oldalra. A szakasz/sor/oszlop felülbírálások az adott elrendezéssel együtt mentődnek.

Mit tud

• Webhelyszintű sötét paletta: háttér, szöveg, címsor, hivatkozás, kiemelés, felület (az Apply Surface to beállítással), szegély és beviteli mezők színei, ahol látszik, töréspontonként is.
• Lebegő kapcsoló: Pill, Icon vagy Switch stílus; nap/hold ikon, egyéni ikon, szöveg, ikon és szöveg vagy egyéni kép.
• Elhelyezhető kapcsoló: a Supreme Dark Mode Toggle modul Theme Builderben vagy oldalelrendezésben.
• Megjelenési feltételek: az egész webhely, felsorolt oldalak, kivételek, vagy oldalankénti bekapcsolás.
• Időzítés: két időpont között automatikusan sötét, ha a látogatónak nincs mentett választása.
• Logócsere: a világos és sötét módhoz külön logó.
• Képek tompítása: a képek fényereje csökken sötét módban (a logócserés képek kimaradnak).
• Blokkonkénti felülbírálás: Advanced → Dark Mode Overrides szakaszon, soron, oszlopon.
• Egyéni sötét CSS: csak a html.dsm-dark alatt érvényes extra CSS.
• Billentyűparancs és a mentett beállítás visszaállítása (hosszú nyomás vagy dupla kattintás).

Mikor ne használd

• Ha csak egy statikus sötét dizájn kell, építsd sötétre az oldalt a Diviben, és ne kapcsold be a kiterjesztést.
• Oldalankénti bekapcsolást csak normál oldalon vagy bejegyzésen találsz: a Library és Theme Builder elrendezéseken az Enable on this page rejtett.
• A felülbírálás csak szakaszon, soron, belső soron, oszlopon és belső oszlopon van, szöveg- vagy képmodulon nincs.

Használati esetek

Eset	Hogyan
Világos/sötét az egész webhelyen	Lebegő kapcsoló és sötét paletta.
Kapcsoló a fejlécben	A Supreme Dark Mode Toggle modul egy Theme Builder fejlécben.
Sötét csak kijelölt oldalakon	Display on → felsorolt oldalak, vagy oldalankénti bekapcsolás.
Éjszakai alapértelmezés	Automatikus sötét például 18:00 és 06:00 között, amíg a látogató nem választ.
Fejléc arculata	Logócsere és felülbírálás a fejléc szakaszain.

Bekapcsolás

1. Nyisd meg a Divi Supreme → Extensions oldalt.
2. Kapcsold be a Dark Mode Toggle kiterjesztést.
3. Mentsd, majd töltsd újra a Visual Buildert.

Alapértelmezetten ki van kapcsolva. Amíg nincs bekapcsolva, a builder sáv Dark gombja, a customiser, a lebegő kapcsoló és a modul nem működik.

Első lépések

1. Kapcsold be a kiterjesztést, és töltsd újra a buildert.
2. Kattints a builder sáv Dark gombjára: megnyílik a customiser.
3. A Settings fülön állítsd be a Default mode értékét (System, Light, Dark) és a Display on értékét (kezdd az Entire site-tal).
4. Hagyd bekapcsolva a Show floating switch kapcsolót, vagy kapcsold ki, ha csak a modult használod.
5. A Design fülön állítsd a Dark Palette színeit a saját arculatodhoz.
6. Opcionálisan kapcsold be a Swap logo in dark mode kapcsolót, és töltsd fel a világos és sötét logót.
7. Mentsd, nyisd meg a nyilvános oldalt, és próbáld ki a váltást.

A customiser három füle

Fül	Mit szabályoz
Settings	Alapértelmezett mód, megjelenési feltételek, lebegő kapcsoló, időzítés, logók, billentyűparancs, események
Design	A sötét paletta, a kapcsoló megjelenése és a feliratok tipográfiája
Advanced	Csak sötét módra érvényes egyéni CSS

Settings: általános

Beállítás	Alapérték	Mit csinál
Default mode	System	Akkor érvényes, ha a látogatónak nincs mentett választása, és (ha az időzítés be van kapcsolva) az időzítési ablakon kívül. A System a böngésző prefers-color-scheme értékét követi.
Preview dark palette on builder canvas		A sötét paletta látszik a vásznon, amíg a customiser nyitva van. Az éles oldal látogatóinak beállítását nem érinti.

Ha a látogató egyszer váltott, a választás a böngészőben tárolódik, és addig érvényes, amíg vissza nem állítja.

Megjelenési feltételek

A Display on korlátozza, hol töltődik be a sötét mód és a lebegő kapcsoló. Az elhelyezhető kapcsoló modul csak azokon az oldalakon működik, ahol a sötét mód aktív.

Mód	Viselkedés
Entire site	Mindenhol betöltődik (alapérték).
Specific pages only (include)	Oldalakat, bejegyzéseket és más tartalmat keresel és választasz ki.
All pages except (exclude)	Mindenhol, a kiválasztottak kivételével.
Per page (enable on each page)	Oldalanként kapcsolod be az Enable on this page kapcsolóval.

Az Enable on this page csak a Per page módban látszik, és csak normál oldalon vagy bejegyzésen. Az oldal mentésekor tárolódik a jelző. A Divi Library és a Theme Builder elrendezésein rejtett.

Lebegő kapcsoló

Beállítás	Alapérték	Mit csinál
Show floating switch	be	Rögzített kapcsoló a látogatóknak; a vásznon is látszik, amíg a customiser nyitva van.
Switch style	Pill	Pill, Icon vagy Switch (sín és gomb; az ikonok rejtve maradnak).
Content mode	Default (sun / moon)	Default, Custom icons, Text labels, Icon + text vagy Custom images.
Stacking (z-index)	99999	Milyen magasan van a kapcsoló más tartalmak felett.
Apply floating switch design to Dark Mode Toggle module	ki	Bekapcsolva a modulok átveszik a lebegő kapcsoló színeit, szegélyét és árnyékát.
Switch position	Bottom right	Alul/felül és bal/jobb, reszponzívan.
Offset X / Offset Y	20px	Távolság a kiválasztott saroktól (a biztonsági sávot figyelembe veszi).
Hover lift	be	Egérrel fölé érve enyhén emelkedik. Az elhelyezhető modul nem emelkedik.

Automatikus sötét mód, képek, logók

Beállítás	Alapérték	Mit csinál
Auto dark by time	ki	Bekapcsolva a Start time és End time között sötét a mód, ha a látogató még nem választott. Alapérték 18:00-06:00.
Dim images in dark mode	ki	Csökkenti a képek fényerejét; az Image brightness alapértéke 85. A logócserés képek kimaradnak.
Swap logo in dark mode	ki	A megfelelő logóképeket a Light logo és Dark logo képre cseréli.
Logo selector	#logo, .logo_container img, …	CSS-választók, amelyek megadják, mely képek cserélődnek (alapból a fejléc és a menü logói).

Visszaállítás, billentyűparancs, események

Beállítás	Alapérték	Mit csinál
Reset saved preference	Hosszú nyomás és dupla kattintás	Ki / csak hosszú nyomás / csak dupla kattintás / mindkettő. Törli a tárolt választást, így újra a Default mode (és az időzítés) érvényes.
Click delay (ms)	100	Dupla kattintásos visszaállításnál.
Long-press duration (ms)	650	Hosszú nyomásos visszaállításnál.
Enable keyboard shortcut	ki	Alt+D, Alt+M, Ctrl+Alt+D vagy Shift+Alt+D.
Emit scheme-change events	be	Kiváltja a dsm-dark-mode-scheme-change eseményt (a document CustomEvent), opcionálisan a window.dsmDarkModeOnSchemeChange függvényt és a dsm_dark_mode_scheme_change wp.hooks akciót. Harmadik féltől származó analitikai SDK nincs benne.

Design: sötét paletta

A színek a sötét mód aktív állapotában az egész webhelyen érvényesek. Az elrendezésekben érdemes a Divi globális színeit használni, hogy az átszínezés egységes maradjon.

A szöveg-, címsor-, hivatkozás-, gomb- és beviteli mező színei !important jelzőt kapnak, hogy felülírják a Divi Design → Text / Heading / Link színeit (a Divi is így adja ki őket). A szakasz-, sor- és oszlopfelülbírálások specifikusabbak, ezért továbbra is ezek győznek. Ha egy harmadik féltől származó, azonosítóra épülő szabály mégis felülírja, tegyél egy hatókörös szabályt az egyéni sötét CSS-be.

A festett szakasz-, sor- és oszlophátterek sötét módban a globális háttérszínre cserélődnek, kivéve ha az Apply Surface to értéke Don’t apply to any. Az átlátszó modulok átlátszók maradnak; ha a felületcsere be van kapcsolva, csak a Design → Background festés (és a blog/poszt karusszel kártyái) cserélődik.

Elem	Alapérték (asztali)	Szerepe
Background	#1a1a1a	Oldalháttér; ez veszi át a festett szakasz/sor/oszlop hátterét is
Text	#e8e8e8	Törzsszöveg
Heading	#ffffff	Címsorok
Link	#7eb8ff	Hivatkozások
Link hover	#a8d4ff	Hover és billentyűzetes fókusz
Accent / button	#7eb8ff	Elsődleges gombok és kiemelés
Button text	#0d1117	A kiemelőszínű gombok szövege
Surface	#242424	Kiemelt panelek és átszínezett kitöltések (--dsm-dm-surface, .dsm-dm-surface)
Border	#333333	Szegélyek
Input background / text / border	üres	Üresen a Surface, Text és Border értékét öröklik

Apply Surface to

Megadja, mely modulok kapják meg a Surface kitöltést sötét módban (beállítás: module_surface_mode, alapérték painted).

Mód	Felirat	Viselkedés
painted	Existing backgrounds (alapérték)	Csak a festett Design → Background kitöltéseket és a blog/poszt karusszel kártyáit cseréli.
cards	Content cards	Emellett kiemeli a Blurb, CTA, Testimonial, Pricing, Accordion, Team és DSM Card modulokat.
content	All content modules	Minden tartalmi modult befest, kivéve a képeket, gombokat, menüket és hasonló keretelemeket.
none	Don’t apply to any	Kikapcsolja az automatikus Surface-t: nincs festett háttér-csere, nincs Surface a karusszelkártyákon, és nem készülnek kitalált kártyafelületek (Blurb, CTA stb.).

A Don’t apply to any mellett is érvényes marad: az oldal Background színe, a szöveg-, címsor- és hivatkozásszínek, a felülbírálások. A .dsm-dm-surface segédosztály is működik, ha csak oda akarsz Surface-t, ahová ezt az osztályt teszed.

A szakasz/sor/oszlop Dark Mode Overrides mindig erősebb a Surface-cseréknél.

Design: kapcsoló és feliratok

A lebegő kapcsoló (és a modul, ha a dizájnszinkron be van kapcsolva) színei és mérete: háttér/előtér (világos és sötét), ikonszín, kiemelés, sín, méret, ikonméret, vízszintes kitöltés, szegély, dobozárnyék.

A feliratok tipográfiája a Text labels és Icon + text tartalmi módnál jelenik meg. Az üres ikonszín a Foreground értékét örökli; az üres ikonméret a Size értékéből adódik.

Advanced: egyéni sötét CSS

Extra CSS, amely csak sötét módban érvényes. A szabályokat a html.dsm-dark alá írd. A kódrészlet-beszúró kezdősablonokat ad a html.dsm-dark { }, a Theme Builder fejléc, a szakaszháttér és a Menü modul számára.

Rögzített vagy Theme Builder fejléceknél a háttérhez inkább a fejléc szakaszainak Advanced → Dark Mode Overrides beállítását használd. Ha egy szakasz felülbírálása be van állítva, a benne lévő Menü modulok háttere törlődik, hogy a szakaszé látsszon. A fejlécképekhez használd a logócserét, az egyéni CSS a finomhangolásra való.

Dark Mode Overrides (szakasz, sor, oszlop)

Használd, ha egy blokknak más sötét háttér (vagy szöveg-, címsor-, hivatkozás- vagy szegélyszín) kell, mint az automatikus csere. A felülbírálás mindig erősebb. Csak szakaszon, soron, belső soron, oszlopon és belső oszlopon érhető el.

1. Jelöld ki a blokkot.
2. Kattints a holdra a Design → Background felirat mellett (ez bekapcsolja a felülbírálást, ha ki volt kapcsolva, és megnyitja az Advanced → Dark Mode Overrides részt), vagy nyisd meg közvetlenül az Advanced → Dark Mode Overrides csoportot.
3. Kapcsold be az Enable Dark Mode Overrides kapcsolót.
4. Állítsd be a Background értékét (szín, színátmenet vagy kép) és opcionálisan a szöveg, címsor, hivatkozás/hivatkozás hover és szegély színét.

Ha egy színt üresen hagysz, az a globális sötét palettát örökli. A felülbírálás nem tartalmaz térközt, teljes betűtípus-csoportot vagy teljes szegélycsoportot.

Hogyan látja a látogató

1. Ha a látogató már váltott, a böngésző megjegyzi a választását.
2. Ha nem, a Default mode (System, Light vagy Dark) érvényes.
3. Ha az Auto dark by time be van kapcsolva és nincs mentett választás, az időzítés a kezdő és befejező idő között sötétre állíthatja.
4. A Preview dark palette on builder canvas csak szerkesztői előnézet, az éles oldalt és a látogatói tárolást nem érinti.

Divi Library és Theme Builder

A Dark gomb a Divi Library és a Theme Builder elrendezéseken is elérhető, a customiser beállításai ezekben is webhelyszintűek. Ezeken az elrendezéseken értesítés jelzi, hogy a beállítások mindenhol érvényesek, ahol a sötét mód be van kapcsolva, az Enable on this page pedig rejtett: az oldalankénti bekapcsoláshoz normál oldalt vagy bejegyzést nyiss meg.

A fejlécekbe és láblécekbe tedd a Dark Mode Toggle modult, ha elrendezésen belüli vezérlő kell. A fejléc szakaszain a sötét háttérhez a Dark Mode Overrides, a fejléc logójához a Swap logo in dark mode a megoldás.

Beállítások az adatbázisban

Beállítás	Típus	Alapérték	Leírás
Dark Mode Toggle	jelölőnégyzet	ki	A főkapcsoló az Extensions fülön (dsm_use_dark_mode).
Apply Surface to	választó	painted	Mely modulok kapják a Surface kitöltést (module_surface_mode).
Webhelybeállítások	objektum	lásd fent	A customiser mentése a dsm_dark_mode_settings alatt.
Oldalankénti bekapcsolás	meta		A Per page módban (dsm-dark-mode-page-enabled).

Tippek

• A Dark gombot csak a kiterjesztés bekapcsolása után találod.
• A lebegő kapcsoló az egész webhely vezérlése; a modult akkor használd, ha a kapcsolónak az elrendezésben kell lennie.
• A Switch stílus szándékosan elrejti az ikonokat; nap/hold vagy egyéni ikonhoz használd a Pill vagy Icon stílust.
• Ha a festetlen Blurb-félék is legyenek sötét kártyák, használd a Content cards módot; ha a modulok kitöltését érintetlenül akarod hagyni, a Don’t apply to any módot.
• A modul nem fut azokon az oldalakon, ahol a Display on kizárja a sötét módot.
• Az egyéni CSS-t mindig a html.dsm-dark alá írd, hogy a világos módot ne érintse.