# Dark Mode: globális színek cseréje

> A Global Color típus: minden Elementor-globálisszínhez megadsz egy sötét értéket, és a kapcsoló egyszerre cseréli őket.

Az oldal invertálása gyors, de tompa eszköz. Ha azt szeretnéd, hogy a sötét mód megtervezettnek látsszon, ne megfordítottnak, használd a **Global Color** típust: az Elementor minden globális színéhez megadsz egy második, sötétebb értéket, és a widget kicseréli őket, amikor a látogató átkapcsolja a kapcsolót. Semmi nem keveredik és semmi nem invertálódik, csak a színértékek változnak, és csak azoknál az elemeknél, amelyek ténylegesen globális színt használnak. A widget többi beállítását a [Dark Mode áttekintése](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-attekintes/) írja le. A widget panelja angolul marad, ezért a feliratait szó szerint idézzük.

## Előfeltételek

- A widget az ingyenes bővítményben is megvan. Az Elementor legyen aktív, és a **The Plus Addons → Widgets** oldalon kapcsold be a **Dark Mode** widgetet.
- Az Elementor globális színeinek már el kell lenniük mentve a **Webhely beállításai → Globális színek** alatt. Ez nem opcionális: ha a paletta üres, a widget semmit nem ír ki, és az oldal helyette invertálódik.
- Az oldalaidon lévő elemeknek ezeket a globális színeket kell használniuk. Amit kézzel választott színnel állítottál be, az nem változik.

## Lépések

1. Állítsd be előbb a világos módú palettádat az Elementor **Webhely beállításai → Globális színek** alatt, és ezeket a színeket használd az oldalaidon.
2. Add hozzá a **Dark Mode** widgetet: az egész webhelyhez fejléc- vagy lábléc-sablonba, egyetlen oldalhoz arra az oldalra.
3. A **Layout** szakaszban állítsd a **Type** értékét **Global Color**-ra.
4. Megjelenik a **Global Color** szakasz. Nyisd meg: négy sort tartalmaz, primary, secondary, text és accent felirattal.
5. Nyisd ki az egyes sorokat, és a **Color** mezőben add meg a megfelelő globális szín sötét módú értékét. A **Label** mező csak a sor neve.

![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 a négy alapértelmezett sorral és az **Elem hozzáadása** gombbal látszik.

A sorok a palettádhoz sorrend szerint kapcsolódnak. Az első sor az első globális színt cseréli, a második a másodikat, és így tovább. A sor átnevezése nem változtat semmin. Ha saját globális színeket is felvettél, használd az **Elem hozzáadása** gombot, és tartsd ugyanazt a sorrendet, mint a **Webhely beállításai** alatt.

## Mit látsz az oldalon

Egy olyan próbaoldalon, amelynek a címe, a szövege, a szekciója háttere globális színt használt, a kapcsoló egyszerre cserélte le a négy értéket:

| Globális szín | Világos | Sötét |
|---|---|---|
| primary (cím) | #1B2A4A | #E8EAF2 |
| secondary (szekció háttere) | #F3F5FA | #101826 |
| text (bekezdés) | #333333 | #C7CEDB |
| accent | #2E7DF7 | #6FA8FF |

![A próbaoldal világos módban: világos szekcióháttér, sötét szöveg](./kepek/kozosseg-funkciok-2-sotet-mod-globalis-vilagos.webp)

*A próbaoldal világos módban: világos szekcióháttér, sötét szöveg* (https://minta-bolt.hu/tp-sotet-mod-globalis/)

A képen az oldal a kapcsoló átváltása előtt: halvány háttér, sötétkék cím és sötét szöveg.

![Ugyanaz az oldal a kapcsoló után: a háttér és a szöveg a sötét értékeket kapta, semmi nem invertálódott](./kepek/kozosseg-funkciok-2-sotet-mod-globalis.webp)

*Ugyanaz az oldal a kapcsoló után: a háttér és a szöveg a sötét értékeket kapta, semmi nem invertálódott* (https://minta-bolt.hu/tp-sotet-mod-globalis/)

A képen a szekció háttere sötétkék, a cím és a szöveg világos lett, az oldal többi része nem változott. Minden elem követte a saját globális színét, és semmi más nem mozdult.

## Az érintett beállítások

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Type** | A **Global Color** palettaértékeket cserél keverés helyett | **Mix Blend** |
| **Global Color** (ismétlő) | Globális színenként egy sor, ugyanabban a sorrendben, mint a **Webhely beállításai** alatt | 4 sor |
| **Label** | A sor neve, a párosításra nincs hatása | Label |
| **Color** | A globális szín sötét módú értéke | üres |

## Működés

- A widget egyetlen szabályt ír ki, amely a globális színváltozóidat újradefiniálja, amíg az oldalon a sötét mód állapota aktív, ezért minden, ami ezeket használja, együtt frissül.
- A keverőréteget átlátszóvá teszi, ezért ennél a típusnál semmi nem invertálódik: a két módszer nem rakódik egymásra.
- Az a sor, amelyben nincs szín megadva, kimarad, ezért a paletta egy részét átállíthatod, a többit békén hagyhatod.

## Korlátok

- Üres Elementor-palettával a beállításnak nincs hatása. Ha a webhelyen még soha nem mentettél globális színt, a widget semmilyen szabályt nem ír ki, a keverőréteg sosem kapcsol ki, és az oldal úgy invertálódik, mintha **Mix Blend**-et választottál volna. A szerkesztő erre nem figyelmeztet.
- A kézzel választott színeket nem érinti. Minden elem, amelynek színét a színválasztóból és nem a palettáról állítottad, sötét módban megtartja a színét.
- A sorrend számít, a címke nem. A rossz helyre tett sor rossz dolgot színez át.
- A képeket sem érinti. Ez a típus nem változtat a fotókon, ami általában jó, de egy fehér logó fehér marad.

## Hibaelhárítás

### Az oldal feketére vált a színeim helyett

Az Elementor-paletta üres, ezért a widget az invertálásra tér vissza. Mentsd el a színeidet a **Webhely beállításai → Globális színek** alatt, és töltsd újra az oldalt.

### Egyes elemek változnak, mások nem

Amelyik nem változott, az nem globális színt használ. Nyisd ki az elemet, és a színt a színválasztó helyett a palettáról állítsd be.

### Rossz dolgok változtak színt

A sorok rossz sorrendben vannak. Igazítsd őket a **Webhely beállításai → Globális színek** sorrendjéhez.

### A Global Color szakasz nincs a panelen

A **Type** még **Mix Blend**. A szakasz csak **Global Color** esetén jelenik meg.