# Dark Mode: elemek kizárása a sötét módból

> Egyes elemek, például fotók, logók vagy kiemelt szekciók kihagyása a sötét módból CSS-osztály alapján.

A sötét módnak az oldalt kell megváltoztatnia, de nem az egészet. Egy fotó, egy márkalogó vagy egy gondosan megtervezett nyitó szekció jellemzően rosszabbul néz ki invertálva, különösen a **Mix Blend** típusnál, amely kérdezés nélkül mindenre rátesz egy réteget. A **Dark Mode** widget lehetővé teszi, hogy CSS-osztály alapján megnevezd, mit hagyjon békén. 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.
- A védeni kívánt elemnek kell egy CSS-osztály, amelyet meg tudsz nevezni. Az Elementor minden widgeten és tárolón a **Haladó → CSS-osztályok** mezőt kínálja erre.

## Lépések

1. Jelöld ki a kihagyandó widgetet vagy tárolót. Nyisd meg a **Haladó** fület, és a **CSS-osztályok** mezőbe írj egy osztálynevet, például `hero`.
2. Jelöld ki a **Dark Mode** widgetet, és nyisd meg a **Tartalom** fül **Extra Option** szakaszát.
3. Kapcsold be az **Ignore Dark Mode** beállítást. Két újabb mező jelenik meg.
4. Az **Ignore Dark Mode Classes** mezőbe írd be az osztályt egy ponttal az elején: `.hero`. Többet vesszővel válassz el: `.hero, .logo, .chart`.
5. A **The Plus Ignore Class Default** beállítást hagyd bekapcsolva, hacsak nincs okod másra. Ez egy beépített kép- és listaelem-listát tesz a kizáráshoz.

![Az Extra Option szakasz: Ignore Dark Mode bekapcsolva, az Ignore Dark Mode Classes mezőben a .kf-hero osztály](./kepek/kozosseg-funkciok-2-sotet-mod-kizaras-panel.webp)

*Az Extra Option szakasz: Ignore Dark Mode bekapcsolva, az Ignore Dark Mode Classes mezőben a .kf-hero osztály* (https://minta-bolt.hu/wp-admin/post.php?post=38&action=elementor)

A képen az **Extra Option** szakasz látszik bekapcsolt **Ignore Dark Mode**-dal és egy kitöltött **Ignore Dark Mode Classes** mezővel. A **The Plus Ignore Class Default** kapcsoló a képen No állásban látszik, ezért állítsd be tudatosan a kívántra.

A pont kötelező. A mező CSS-szelektorokat vár, nem osztályneveket. Ha a `hero` osztályt pont nélkül írod be, az elem nincs kizárva: a többivel együtt sötétre vált, és semmi nem figyelmeztet.

## Mit látsz az oldalon

Egy próbaoldalon egy `kf-hero` osztályt kapott, és `.kf-hero` néven felsorolt cím a kapcsoló átváltása után megtartotta a világos hátterét, miközben körülötte az oldal feketére váltott.

![A kizárt cím világos háttéren marad, a többi oldal sötétre vált](./kepek/kozosseg-funkciok-2-sotet-mod-kizaras.webp)

*A kizárt cím világos háttéren marad, a többi oldal sötétre vált* (https://minta-bolt.hu/tp-sotet-mod-kizaras/)

A képen a kizárt cím világos hátterű sávban áll a fekete oldalon.

## Mit fed le a The Plus Ignore Class Default

Ez a kapcsoló egy rögzített szelektorlistát tesz a kizáráshoz, hogy a képek és a listák bélyegképei munka nélkül védettek legyenek. Lefedi az Elementor saját **Kép** widgetét és a képcímkéket, a The Plus Addons hotspot, animált kép, parallax kép és előtte-utána elemeit, valamint a csapat, termék, galéria és blog listák bélyegképterületét.

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

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Ignore Dark Mode** | Megjeleníti az alatta lévő két mezőt | ki |
| **Ignore Dark Mode Classes** | A kihagyandó CSS-szelektorok vesszővel elválasztva, mindegyik elején ponttal | üres |
| **The Plus Ignore Class Default** | Egy beépített kép- és listaelem-listát is kizár | bekapcsolt a leírás szerint, de a panelen kezdetben No látszik |

## Működés

- Az illeszkedő elemek az oldal betöltésekor megkapják a `theplus-darkmode-ignore` osztályt, és a sötét mód stíluslapja kihagyja azt, ami ezt viseli.
- Mindkét **Type** értéknél ugyanúgy működik, de a **Mix Blend** esetében számít a legtöbbet, ahol egyébként az egész oldal invertálódik.
- A kizárás CSS-szelektorral történik, ezért bármilyen, a böngésző által értett szelektorral kizárhatsz. Az osztály csak a legegyszerűbb, mert az Elementorból könnyen hozzáadható.

## Korlátok

- A pont nélküli osztálynév nem csinál semmit. Nincs figyelmeztetés és hiba, az elem egyszerűen sötétre vált.
- A kizárási lista a **Dark Mode** widgeten van, nem az elemen. Ha a widget a fejléc-sablonodban áll, az összes oldal kizárása abban az egy mezőben van felsorolva.
- A beépített lista rögzített. A **The Plus Ignore Class Default** ki- és bekapcsolható, de nem szerkesztheted a tartalmát.

## Hibaelhárítás

### Az elem még mindig sötétre vált

Nézd meg, hogy az **Ignore Dark Mode Classes** mezőben az osztály előtt van-e pont, és hogy ugyanez az osztály tényleg ott áll-e az elem **Haladó → CSS-osztályok** mezőjében.

### Nincsenek ott a mezők

Az **Ignore Dark Mode** nincs bekapcsolva. Mindkét mező rejtve van, amíg be nem kapcsolod.

### A képeim már ki vannak zárva, pedig nem csináltam semmit

A **The Plus Ignore Class Default** a beépített lista részeként már lefedi az Elementor **Kép** widgetét. Ha ezt nem akarod, kapcsold ki.

### Kizártam egy tárolót, de a benne lévő szöveg mégis invertálódik

Add az osztályt magára a widgetre is. Egy szülő kizárása nem garantáltan fedi le az összes gyermeket.