# Dark Mode widget: sötét mód kapcsolója és beállításai

> A Dark Mode widget minden szakasza: típus, stílus, pozíció, globális színek, extra opciók, működés és hibaelhárítás.

A sötét mód alacsony fényű nézetet ad a látogatónak az oldalon lévő kapcsolóból. A **Dark Mode** widget kirakja ezt a kapcsolót, és elvégzi az átszínezést. Kétféleképpen dolgozhat, és a kettő nagyon különbözik: a **Mix Blend** az egész oldalra egy átfedő réteget tesz, a **Global Color** pedig az Elementor globális színeit cseréli le. Ez a fejezet a widget összes beállítását végigveszi, és megmondja, melyik mit változtat a látogató szemszögéből. A részleteket a [Mix Blend](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-mix-blend/), a [Globális színek](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-globalis-szinek/) és a [Kizárás](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-kizaras/) fejezetben találod.

> **Megjegyzés**
>
> A Dark Mode widget panelja az Elementor szerkesztőben angolul marad, ezért a feliratait itt angolul, szó szerint idézzük.

## Előfeltételek

- A widget az ingyenes bővítményben is megvan: Pro nélkül is megjelenik a kapcsoló, és az oldal átvált.
- Az Elementor (az ingyenes bővítmény) legyen telepítve és aktív.
- Nyisd meg a **The Plus Addons → Widgets** oldalt, keress rá a **Dark Mode** névre, és kapcsold be.
- Ha egyetlen oldalra kell, tedd arra az oldalra. Ha minden oldalon legyen kapcsoló, tedd fejléc- vagy lábléc-sablonba, erre a widget saját panelje is javaslatot tesz (**Use with Theme Builder**).

## Először válassz típust

A **Layout** szakasz első vezérlője a **Type**, és ez dönti el a többit. Alapértéke **Mix Blend**.

- **Mix Blend**: az egész oldalra egy teljes képernyős réteget tesz, és összemossa a mögötte lévővel. A tervezésedből semmi nem változik, az egész oldal egyszerre invertálódik. Gyorsan beállítható, és ezért kell a képeket kizárni.
- **Global Color**: az Elementor globális színeit az általad megadott sötét értékekre cseréli. Semmi nem invertálódik, csak azok az elemek változnak, amelyek globális színt használnak. Lassabb beállítani, de sokkal jobban szabályozható.

![A Dark Mode widget Layout szakasza: Type, Style, Background Color, Mix Blend Mode](./kepek/kozosseg-funkciok-2-sotet-mod-panel.webp)

*A Dark Mode widget Layout szakasza: Type, Style, Background Color, Mix Blend Mode* (https://minta-bolt.hu/wp-admin/post.php?post=36&action=elementor)

A képen a **Layout** szakasz látszik a **Mix Blend** típussal: a **Style** két képes választása, a **Background Color** és a **Mix Blend Mode** (alapérték: **Difference**).

A **Style** a kapcsoló kinézetét adja: **Style 1** vagy **Style 2**. Többet számít, mint gondolnád, mert két másik vezérlő függ tőle: a **Mix Blend Mode** csak a **Style 1**-nél látszik, az **Animation Time** csak a **Style 2**-nél.

## Layout

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Type** | **Mix Blend** vagy **Global Color** | **Mix Blend** |
| **Style** | A kapcsoló kinézete | **Style 1** |
| **Background Color** | A réteg színe, ez is beleszámít a keverés eredményébe | üres (fehér) |
| **Mix Blend Mode** | Difference, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, exclusion, hue, saturation. Csak a **Style 1**-nél látszik. | Difference |
| **Animation Time** | 1-től 100-ig: a váltás hossza. Csak a **Style 2**-nél látszik. | üres (0,5 mp) |

A **Mix Blend Mode** csak a **Style 1**-nél látszik, az **Animation Time** csak a **Style 2**-nél. Ha egy beállítást nem találsz, nézd meg először a **Style** értékét.

## Position

A **Position** szakasz a kapcsolót az ablak jobb alsó sarkához rögzíti. A **Right Offset** és a **Bottom Offset** felugró panel: a jobb oldali csúszka 1 és 150 px között állítható (alapérték: 45), az alsó csúszka 1 és 150 px vagy % között (alapérték: 32), mindkettő eszközönként külön.

## Global Color

Ez a szakasz csak akkor látszik, ha a **Type** **Global Color**. Egy ismétlőt tartalmaz négy sorral: primary, secondary, text és accent. Minden sornak van **Label** és **Color** mezője, a kiválasztott szín az Elementor megfelelő globális színének sötét módú értéke lesz.

![A Global Color szakasz a négy sorral](./kepek/kozosseg-funkciok-2-sotet-mod-globalis-panel.webp)

*A Global Color szakasz a négy sorral* (https://minta-bolt.hu/wp-admin/post.php?post=37&action=elementor)

A képen a **Global Color** szakasz látszik a négy alapértelmezett sorral és az **Elem hozzáadása** gombbal.

A sorok a globális színekhez sorrend szerint kapcsolódnak, nem a címke szerint. Az első sor az első globális színt cseréli, a második a másodikat, és így tovább. Ha az Elementor beépített négy színén túl saját globális színeid vannak, az **Elem hozzáadása** gombbal vegyél fel sorokat. A részletek a [Globális színek](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-globalis-szinek/) fejezetben vannak.

## Extra Option

A viselkedési kapcsolók és a kizárási lista itt vannak.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Save in Cookies** | Arra való lenne, hogy megjegyezze a látogató választását a következő látogatásra | Nem |
| **Auto Match OS Theme** | Követi a látogató eszközének vagy rendszerének témáját | Igen |
| **Ignore Dark Mode** | Megjeleníti a lenti kizárási mezőket | No |
| **Ignore Dark Mode Classes** | A kihagyandó CSS-szelektorok vesszővel elválasztva, mindegyik elején ponttal | üres |
| **The Plus Ignore Class Default** | A beépített kép- és listaelem-listát is kizárja | lásd a [Kizárás](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-kizaras/) fejezetben |

## Mit látsz az oldalon

Ha a **Type** **Mix Blend**, és minden mást érintetlenül hagysz, az oldalon a kapcsoló a jobb alsó sarokban látszik, és egy kattintás után a fehér háttér feketére vált. A kapcsoló két feliratot mutat: „Normal” és „Dark”.

![A Dark Mode kapcsoló a világos oldalon, a jobb alsó sarokban](./kepek/kozosseg-funkciok-2-sotet-mod-vilagos.webp)

*A Dark Mode kapcsoló a világos oldalon, a jobb alsó sarokban* (https://minta-bolt.hu/tp-sotet-mod-mix-blend/)

A képen a világos oldal látszik, a jobb alsó sarokban a kapcsolóval.

![Ugyanaz az oldal a kapcsoló átváltása után Mix Blend típussal](./kepek/kozosseg-funkciok-2-sotet-mod-mix-blend.webp)

*Ugyanaz az oldal a kapcsoló átváltása után Mix Blend típussal* (https://minta-bolt.hu/tp-sotet-mod-mix-blend/)

A képen az oldal a kapcsoló után fekete hátterű. Az elemek maguk nem változtak: a cím, a bekezdés és a tároló megtartotta a színét, a látható változás a fölé tett keverőréteg műve. Ezért kell a fotókat és a logókat kizárni.

## Stílus fül

A **Stílus** fülön két szakasz van. A **Switcher** a kapcsoló maga (a **Style 2**-nél látszik), a **Switcher Text** a kapcsoló melletti szöveg betűtípusát, színét és eltolását adja.

## Működés

- A sötét mód aktiválásakor az oldal `body` elemére a `darkmode--activated` osztály kerül, minden más erre épül.
- A látogató választását a böngésző helyi tárolója jegyzi meg, nem süti, és a **Save in Cookies** értékétől függetlenül megjegyzi.
- **Global Color** típusnál a keverőréteg átlátszó, ezért semmi nem invertálódik, csak a színértékek változnak.

## Korlátok

- A **Save in Cookies** és az **Auto Match OS Theme** nem kapcsolható ki: mindkettő bekapcsolva kerül az oldalra, akárhogy állítod a kapcsolókat, ezért a panelen való kikapcsolásuk nem változtat semmin.
- A **Mix Blend Mode** a **Style 2**-nél rejtve van, az **Animation Time** a **Style 1**-nél. Ha egy beállítást nem találsz, nézd meg a **Style** értékét.
- A **Global Color** nem csinál semmit, ha nem mentettél Elementor globális színeket. Üres palettával a widget semmilyen színszabályt nem ír ki, és az oldal helyette invertálódik.
- A **Mix Blend** a fényképeket is invertálja, ami ritkán néz ki jól. Zárd ki őket a kizárási listával.

## Hibaelhárítás

### A kapcsoló nem jelenik meg

A widget nincs bekapcsolva. Nyisd meg a **The Plus Addons → Widgets** oldalt, keress rá a **Dark Mode** névre, és kapcsold be.

### A sötét mód csak egy oldalon működik

A widget csak azon az oldalon van. Tedd fejléc- vagy lábléc-sablonba, hogy mindenhol betöltődjön.

### Nem találom a Mix Blend Mode legördülőt

A **Style** a **Style 2** értéken áll. Állítsd **Style 1**-re, és a legördülő visszatér.

### Global Color van kiválasztva, de az oldal csak feketére vált

Az Elementor globális színeit még soha nem mentetted el. Állítsd be őket a **Webhely beállításai → Globális színek** alatt, és csak utána töltsd ki a négy sort.

### Az oldal akkor is megjegyzi a sötét módot, ha a Save in Cookies ki van kapcsolva

Ez az ismert viselkedés: a beállításnak nincs hatása, a választást mindig megjegyzi a böngésző.