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

> Sötét paletta, lebegő kapcsoló, megjelenési feltételek, időzítés, logócsere és szakasz/sor/oszlop felülbírálások.

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](https://hub.hellowp.io/hu/plugins/supreme-modules-pro-for-divi/modulok-divi-5-sotet-mod-es-dupla-cimsor/) 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.