Released first version.

.gitignore

@@ -0,0 +1,5 @@
+.vscode
+node_modules
+package-lock.json
+.history
+.DS_Store

CSS/dark.css

@@ -0,0 +1,7 @@
+body {
+  background-color: #333;
+}
+
+i.Icon {
+  color: #f2f2f2;
+}

CSS/desktop.dz.css

@@ -0,0 +1 @@
+

CSS/light.css

@@ -0,0 +1,7 @@
+body {
+  background-color: #fff;
+}
+
+i.Icon {
+  color: #333;
+}

CSS/mobile.dz.css

@@ -0,0 +1 @@
+

Dist/JS/CustomThemeSwitcher.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSwitcher = void 0;
+class ThemeSwitcher {
+    constructor(el, params) {
+        this.elementsClass = 'ThemeSwitcher__item';
+        this.elementActiveClass = `${this.elementsClass}--active`;
+        this.el = el;
+        this.elements = [...el.querySelectorAll(`.${this.elementsClass}`)];
+        this.linkEl = document.head.querySelector(`#${params.linkId}`);
+        this.lightSchemeRoute = params.routes.light;
+        this.darkSchemeRoute = params.routes.dark;
+        this.schemeKey = params.schemeKey;
+        this.defaultScheme = params.defaultScheme;
+        this.name = el.dataset.name || '';
+        this.init();
+    }
+    init() {
+        try {
+            this.check();
+            this.listen();
+            let currentScheme = this.getScheme();
+            this.setScheme(currentScheme);
+            this.el.onclick = this.clickHandler.bind(this);
+        }
+        catch (err) {
+            console.warn(err.message);
+        }
+    }
+    clickHandler() {
+        let allSchemes = ['light', 'dark', 'system'];
+        let currentScheme = this.getScheme();
+        let currentSchemeIndex = allSchemes.findIndex((item) => item == currentScheme);
+        if ((allSchemes.length - 1) == currentSchemeIndex)
+            currentSchemeIndex = 0;
+        else
+            currentSchemeIndex++;
+        let nextScheme = allSchemes[currentSchemeIndex];
+        this.setScheme(nextScheme);
+    }
+    listen() {
+        window.addEventListener('storage', () => {
+            let currentScheme = this.getScheme();
+            for (let item of this.elements) {
+                item.classList.remove(this.elementActiveClass);
+            }
+            (this.elements.find((el) => el.dataset.value == currentScheme)).classList.add(this.elementActiveClass);
+            switch (currentScheme) {
+                case 'light':
+                    this.setLink(this.lightSchemeRoute);
+                    break;
+                case 'dark':
+                    this.setLink(this.darkSchemeRoute);
+                    break;
+                case 'system':
+                    this.systemSchemeListener();
+                    break;
+            }
+        });
+    }
+    systemSchemeListener() {
+        let matchMedia = window.matchMedia('(prefers-color-scheme: light)');
+        matchMedia.matches ? this.setLink(this.lightSchemeRoute) : this.setLink(this.darkSchemeRoute);
+        matchMedia.addListener((e) => {
+            e.matches ? this.setLink(this.lightSchemeRoute) : this.setLink(this.darkSchemeRoute);
+        });
+    }
+    setLink(route) {
+        this.linkEl.setAttribute('href', route);
+    }
+    getScheme() {
+        let allSchemes = ['light', 'dark', 'system'];
+        let scheme = localStorage.getItem(this.schemeKey) || this.defaultScheme;
+        if (!allSchemes.includes(scheme) || !scheme.length) {
+            scheme = this.defaultScheme;
+        }
+        return scheme;
+    }
+    setScheme(val) {
+        localStorage.setItem(this.schemeKey, val);
+        window.dispatchEvent(new Event('storage'));
+    }
+    check() {
+        if (!this.el)
+            throw new Error(`Component "${this.name}" not found!`);
+        if (!this.linkEl)
+            throw new Error('Link element for change theme is not found!');
+        console.info(`Component "${this.name}" is ready.`);
+    }
+}
+exports.ThemeSwitcher = ThemeSwitcher;

Dist/SASS/CustomThemeSwitcher.sass

@@ -0,0 +1,15 @@
+.ThemeSwitcher
+  cursor: pointer
+  &__item
+    display: none
+    &--active
+      display: flex
+      justify-content: center
+  &__system
+    > *:first-child
+      position: relative
+      right: -6px
+    > *:last-child
+      position: relative
+      left: -6px
+

Dist/TS/CustomThemeSwitcher.ts

@@ -0,0 +1,133 @@
+type Scheme = 'light' | 'dark' | 'system';
+
+interface IParams {
+  linkId: string,
+  schemeKey: string,
+  defaultScheme: Scheme,
+  routes: {
+    light: string,
+    dark: string
+  }
+}
+
+export class ThemeSwitcher {
+  public readonly elementsClass: string = 'ThemeSwitcher__item';
+  public readonly elementActiveClass: string = `${this.elementsClass}--active`;
+  public readonly name: string;
+  public readonly schemeKey: string;
+  public readonly defaultScheme: Scheme;
+  public linkEl: HTMLLinkElement | null;
+
+  protected el: HTMLDivElement | null;
+  protected elements: HTMLDivElement[];
+  protected lightSchemeRoute: string;
+  protected darkSchemeRoute: string;
+
+  constructor(el: HTMLDivElement | null, params: IParams) {
+    this.el = el;
+    this.elements = [...el!.querySelectorAll<HTMLDivElement>(`.${this.elementsClass}`)];
+    this.linkEl = document.head.querySelector(`#${params.linkId}`);
+    this.lightSchemeRoute = params.routes.light;
+    this.darkSchemeRoute = params.routes.dark;
+    this.schemeKey = params.schemeKey;
+    this.defaultScheme = params.defaultScheme;
+    this.name = el!.dataset.name || '';
+
+    this.init();
+  }
+
+  protected init(): void {
+    try {
+      this.check();
+
+      this.listen();
+      let currentScheme = this.getScheme();
+      this.setScheme(currentScheme);
+
+      this.el!.onclick = this.clickHandler.bind(this);
+    } catch (err: Error | any) {
+      console.warn(err.message);
+    }
+  }
+
+  protected clickHandler(): void {
+    let allSchemes: Scheme[] = ['light', 'dark', 'system'];
+    let currentScheme: Scheme = this.getScheme();
+
+    let currentSchemeIndex: number = allSchemes.findIndex((item: Scheme): boolean => item == currentScheme);
+    if ((allSchemes.length - 1) == currentSchemeIndex)
+      currentSchemeIndex = 0;
+    else 
+      currentSchemeIndex++;
+
+    let nextScheme: Scheme = allSchemes[currentSchemeIndex];
+    this.setScheme(nextScheme);
+  }
+
+  protected listen(): void {
+    window.addEventListener('storage', () => {
+      let currentScheme: Scheme = this.getScheme();
+
+      for (let item of this.elements) {
+        item.classList.remove(this.elementActiveClass);
+      }
+
+      (this.elements.find((el: HTMLDivElement): boolean => el.dataset.value == currentScheme))!.classList.add(this.elementActiveClass);
+
+      switch (currentScheme) {
+        case 'light':
+          this.setLink(this.lightSchemeRoute);
+
+          break;
+        case 'dark':
+          this.setLink(this.darkSchemeRoute);
+
+          break;
+        case 'system':
+          this.systemSchemeListener();
+
+          break;
+      }
+    });
+  }
+
+  protected systemSchemeListener(): void {
+    let matchMedia = window.matchMedia('(prefers-color-scheme: light)');
+    matchMedia.matches ? this.setLink(this.lightSchemeRoute) : this.setLink(this.darkSchemeRoute);
+
+    matchMedia.addListener((e: MediaQueryListEvent): void => {
+      e.matches ? this.setLink(this.lightSchemeRoute) : this.setLink(this.darkSchemeRoute);
+    });
+  }
+
+  protected setLink(route: string): void {
+    this.linkEl!.setAttribute('href', route);
+  }
+
+  protected getScheme(): Scheme {
+    let allSchemes: Scheme[] = ['light', 'dark', 'system'];
+    let scheme: string | Scheme = localStorage.getItem(this.schemeKey) || this.defaultScheme;
+
+    if (!allSchemes.includes(scheme as Scheme) || !scheme.length) {
+      scheme = this.defaultScheme;
+    }
+
+    return scheme as Scheme;
+  }
+
+  public setScheme(val: Scheme): void {
+    localStorage.setItem(this.schemeKey, val);
+
+    window.dispatchEvent(new Event('storage'));
+  }
+
+  protected check(): void {
+    if (!this.el)
+      throw new Error(`Component "${this.name}" not found!`);
+
+    if (!this.linkEl)
+      throw new Error('Link element for change theme is not found!');
+
+    console.info(`Component "${this.name}" is ready.`);
+  }
+}

Img/Favicon/Dark/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

Img/Favicon/Dark/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

Img/Favicon/Light/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>