
A legtöbb böngészőt lehet már sötét módban használni.
2 előnye is van ennek:

- kevés fénynél kényelmesebb olvasni sötét háttér mellett világos szöveget
- OLED és AMOLED telefonoknál kevésebb energiát használ a megjelenítésre, így lassabban merül le.

Kutattam, hogy mi a legjobb módja, hogy a weboldalon automatikusan, zökkenőmentesen menjen a téma váltás világos és sötét között.
Legjobb megoldásnak a szimpla mezei css vátlozók használatát találtam kis javascript mágiával.

## Egyszerű példa

```html
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .light {
        --text-color: #000000;
        --bg-color: #ffffff;
      }

      .dark {
        --text-color: #ffffff;
        --bg-color: #000000;
      }

      body {
        color: var(--text-color);
        background-color: var(--bg-color);
      }
    </style>

    <script>
      if (typeof window !== "undefined") {
        var root = window.document.documentElement;
        var mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
        root.classList.add(mediaQueryList.matches ? "dark" : "light");

        mediaQueryList.addEventListener("change", function (e) {
          var isDark = e.matches;
          root.classList.remove(isDark ? "light" : "dark");
          root.classList.add(isDark ? "dark" : "light");
        });
      }
    </script>
  </head>

  <body>
    <h1>Some title</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu erat
      sapien. Nam consectetur vulputate erat, at laoreet orci accumsan ut. Donec
      eu maximus nibh, id bibendum turpis. Vivamus condimentum tincidunt enim,
      in semper erat vehicula id. Integer fringilla at tellus vel suscipit.
      Suspendisse semper rhoncus est, id efficitur lorem gravida a. Mauris
      sagittis bibendum odio sed fringilla. Vestibulum id massa id quam gravida
      auctor congue in nisl. Praesent vel tellus non sem venenatis laoreet at id
      enim. Nunc varius augue nisi, at euismod mauris venenatis sed.
      Pellentesque fringilla nec nulla vel aliquam. Integer ac suscipit lectus.
      In nisl ligula, finibus ut diam ut, vestibulum dignissim ligula.
    </p>
  </body>
</html>
```

A javascript kód 2 dolgot csinál:

- Az oldal betöltésekor a `html` tag-nek beállítja a böngészőnek belállított témának megfelelő témát, azaz,
  ha _sötét módban_ van, akkor a `dark` css osztályt, különben a `light` css osztályt
- Az esetleges böngészés közbeni témaváltások kezelésére beállít egy `listener`t, ami témaváltáskor a
  megfelelő css osztályt rakja rá a `html` tagre

Ha a `body` végére tenném a scriptet, az gyorsítaná az oldal betöltését,
de ebben az esetben pont az a lényeg, hogy még a tartalom megjelenése előtt a helyes téma legyen beállítva.

## Példa kapcsológombbal

Hogy egyszerű legyen kipróbalni a témaváltást, a fenti példát kiegészítettem egy gombbal:

```html
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .light {
        --text-color: #000000;
        --bg-color: #ffffff;
      }

      .dark {
        --text-color: #ffffff;
        --bg-color: #000000;
      }

      body {
        color: var(--text-color);
        background-color: var(--bg-color);
      }

      button {
        color: var(--bg-color);
        background-color: var(--text-color);
      }
    </style>

    <script>
      var forcedTheme;

      function setTheme(toDark) {
        var root = window.document.documentElement;

        root.classList.remove(toDark ? "light" : "dark");
        root.classList.add(toDark ? "dark" : "light");
      }

      if (typeof window !== "undefined") {
        var root = window.document.documentElement;
        var mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
        root.classList.add(mediaQueryList.matches ? "dark" : "light");

        mediaQueryList.addEventListener("change", function (e) {
          if (!forcedTheme) {
            setTheme(e.matches);
          }
        });
      }
    </script>
  </head>

  <body>
    <h1>Some title</h1>

    <button id="changeButton" onclick="">Change to THEME</button>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu erat
      sapien. Nam consectetur vulputate erat, at laoreet orci accumsan ut. Donec
      eu maximus nibh, id bibendum turpis. Vivamus condimentum tincidunt enim,
      in semper erat vehicula id. Integer fringilla at tellus vel suscipit.
      Suspendisse semper rhoncus est, id efficitur lorem gravida a. Mauris
      sagittis bibendum odio sed fringilla. Vestibulum id massa id quam gravida
      auctor congue in nisl. Praesent vel tellus non sem venenatis laoreet at id
      enim. Nunc varius augue nisi, at euismod mauris venenatis sed.
      Pellentesque fringilla nec nulla vel aliquam. Integer ac suscipit lectus.
      In nisl ligula, finibus ut diam ut, vestibulum dignissim ligula.
    </p>

    <script>
      if (typeof window !== "undefined") {
        var root = window.document.documentElement;
        var changeButton = window.document.getElementById("changeButton");

        var isDark = root.className.includes("dark");

        changeButton.innerText = changeButton.innerText.replace(
          "THEME",
          isDark ? "light" : "dark"
        );

        changeButton.onclick = function () {
          forcedTheme = true;
          var toDark = !root.className.includes("dark");
          setTheme(toDark);
          var buttonTextWords = changeButton.innerText.split(" ");
          buttonTextWords[2] = toDark ? "light" : "dark";
          changeButton.innerText = buttonTextWords.join(" ");
        };
      }
    </script>
  </body>
</html>
```

[Itt tudjátok kipróbálni](/demos/dark_mode.html)

Használjátok egészséggel! ;)



Ebben a cikkben megmutatom, hogy:

- Miért javaslom az abszolút importok használatát?
- Hogyan lehet abszolút importokat használni?

## Miért?

_src/components/Navigation/Navigation.js_

```js
import { useScroll } from "../../hooks/useScroll";
import { isTextWrapped } from "../../utils/NavigationUtils";
import { useResize } from "../../hooks/useResize";
import { getLayout } from "./utils/helpers";
import * as RootConfigs from "../../config/root";
```

Aki fejlesztett már React-ben nagy eséllyel találkozott már hasonlóval.
Így sajnos:

- nehéz kitalálni, hogy melyik fájl pontosan hol található.
- Ha kiemelek egy részt egy másik komponensbe egy másik fájlba, akkor kutathatok, hogy hogyan írjam át a relatív importokat

Az abszolút importok használatával el lehet kerülni a fenti problémákat...

_src/components/Navigation/Navigation.js_

```js
import { useScroll } from "hooks/useScroll";
import { isTextWrapped } from "utils/NavigationUtils";
import { useResize } from "hooks/useResize";
import { getLayout } from "components/Navigation/utils/helpers";
import * as RootConfigs from "config/root";
```

...és sokkal szebb is ;)

## Hogyan?

A `jsconfig.json` (TypeScript esetén `tsconfig.json`) fájlban be lehet állítani, hogy hol keresse a forrásokat:

```json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}
```

Ennek a beállítása után abszolút url-eket is tudsz használni a projektben. Szívesen! :)

A Relatív url-ek továbbra is működni fognak, így egy fokozatos átállás sem lehet probléma.

### Élő projektben átállás - Minden fájlban át kell írni?

Hogy ne kelljen egyesével minden egyes importot átírni, csináltam egy scriptet, ami:

- Beállítja, a _jsconfig.json_ / _tsconfig.json_ fájlodat
  - Ha nincs _jsconfig.json_ csinál egyet (Ha TypeScript projekt, valószínűleg van már egy _tsconfig.json_)
- A megadott projektben az src folderben rekurzívan végigmegy és minden `js/jsx/ts/tsx` kiterjesztésű fájlban átírja az importokat abszolútra.

```sh
$ node convertImports2AbsolutePaths.js <projekt főkönyvtára>
```

A scriptet [itt éred el](/demos/convertImports2AbsolutePaths.js)


Dev blog

Dark mode weboldalakon

../../.. => Abszolút importok