# Dark Mode: Mix Blend típus és keverési módok

> A Mix Blend sötét mód beállítása: a keverési módok, a háttérszín, és a két dolog, amelyen a legtöbben elakadnak.

A **Mix Blend** a sötét mód gyors útja. Nem ad minden elemnek egy második színt: a widget egyetlen teljes képernyős réteget fest az oldal fölé, és összemossa azzal, ami alatta van. Egy beállítás, és az egész oldal egyszerre változik. 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. A widget az ingyenes bővítményben is megvan, és a **The Plus Addons → Widgets** oldalon kell bekapcsolni a **Dark Mode** widgetet. Az Elementor legyen aktív.

## Hová tedd

Ha a kapcsoló minden oldalon legyen, tedd fejléc- vagy lábléc-sablonba, egyébként csak arra az oldalra, amelyen dolgozol.

## Beállítás

1. Add hozzá a **Dark Mode** widgetet.
2. A **Layout** szakaszban hagyd a **Type** értékét **Mix Blend**-en. Ez a kiszállított alapérték.
3. A **Style** maradjon **Style 1**. A keverési beállítás csak ennél a stílusnál látszik.
4. Válassz **Mix Blend Mode** értéket. Az alapérték **Difference**, ez invertálja az oldalt.
5. Ha szeretnéd, adj meg **Background Color** értéket. Ez az a szín, amellyel a réteg keveredik, ezért minden mód eredményét megváltoztatja.

![A Dark Mode Layout szakasza a Type legördülővel](./kepek/kozosseg-funkciok-2-sotet-mod-panel.webp)

*A Dark Mode Layout szakasza a Type legördülővel* (https://minta-bolt.hu/wp-admin/post.php?post=36&action=elementor)

A képen a **Type** **Mix Blend** értéken áll, alatta a **Style** két választása, a **Background Color** és a **Mix Blend Mode**.

## A keverési módok

A **Mix Blend Mode** tizenegy értéket kínál: Difference, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, exclusion, hue és saturation. Ezek a szabványos CSS keverési módok, ezért az eredmény a módtól és a mellé választott **Background Color**-tól is függ.

A fehér alapértelmezett háttérrel a **Difference** adja a klasszikus invertált sötét oldalt. A többi mód árnyalt megjelenéshez érdemes kipróbálni, de egyes párosítások, például a **multiply** fehér oldalon, az oldalt változatlanul hagyják. Ez a keverési mód természete, nem a widget hibája.

## Mit látsz az oldalon

Fehér háttérű oldalon az alapértelmezett **Difference** keverés a kapcsoló átváltásakor minden képpontot fehérből feketébe visz.

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

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

A képen a kapcsoló átváltása előtti oldal látszik: világos háttér, a kapcsoló a jobb alsó sarokban.

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

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

A képen az oldal a kapcsoló után: a háttér fekete, a szöveg világos.

Az elemek maguk érintetlenek: a cím, a bekezdés és a tároló megtartotta az eredeti színét. Minden, amit látsz, a fölé tett keverőréteg. Ez az egész trükk, és ezért néznek ki rosszul a fényképek.

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

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Type** | A **Mix Blend** egy keverőréteget fest az oldal fölé | **Mix Blend** |
| **Style** | A kapcsoló kinézete. A **Mix Blend Mode** csak a **Style 1**-nél látszik. | **Style 1** |
| **Background Color** | Az a szín, amellyel a réteg keveredik | üres (fehér) |
| **Mix Blend Mode** | Melyik CSS keverési módot használja | Difference |

## Korlátok

- A **Mix Blend Mode** rejtve van, ha a **Style** nem **Style 1**. A **Style 2**-nél a legördülő helyén az **Animation Time** áll. Ha nem találod a keverési beállítást, ez az oka.
- A képeket is invertálja, mint mindent: a fotók, logók és képernyőképek általában rosszul néznek ki. Zárd ki őket (lásd a [Kizárás](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kozosseg-funkciok-sotet-mod-kizaras/) fejezetet).
- Nem színez át semmit. Minden elem megtartja a saját színét a réteg alatt, ezért egy-egy cím sötét módú színét nem finomhangolhatod. Ha erre szükség van, használd a **Global Color** típust.
- Egyes keverési módok sima fehér oldalon semmit nem változtatnak. Párosítsd őket **Background Color** értékkel, hogy hatást lásd.

## Hibaelhárítás

### Nincs Mix Blend Mode legördülő

A **Style** értéke **Style 2**, vagy a **Type** **Global Color**. A legördülőhöz **Mix Blend** és **Style 1** kell.

### A kapcsoló átváltásakor semmi látható nem változik

Lehet, hogy a kiválasztott keverési mód nem hat az oldalad színeire, tipikusan a **multiply** fehér oldalon. Térj vissza a **Difference** értékhez, vagy állíts be **Background Color** értéket.

### A képeim negatívnak látszanak

Ez a **Difference** velejárója. Kapcsold be az **Ignore Dark Mode** beállítást az **Extra Option** szakaszban, és zárd ki őket.