create-tauri-ui 0.3.2 → 0.3.3

package/templates/sveltekit/src/lib/components/docs/icons/Tailwind.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import type { IconProps } from 'lucide-svelte';
-
-  type $$Props = IconProps;
-</script>
-
-<svg viewBox="0 0 24 24" {...$$restProps}>
-  <path
-    d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
-    fill="currentColor"
-  />
-</svg>
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Yarn.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import type { IconProps } from 'lucide-svelte';
-
-  type $$Props = IconProps;
-</script>
-
-<svg viewBox="0 0 24 24" {...$$restProps}>
-  <path
-    d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
-    fill="currentColor"
-  />
-</svg>
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/index.ts

@@ -1,78 +1,78 @@
-import type { Icon as LucideIcon } from 'lucide-svelte';
-import {
-  AlertTriangle,
-  ArrowRight,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  ClipboardCheck,
-  Copy,
-  CreditCard,
-  File,
-  FileText,
-  HelpCircle,
-  Image,
-  Laptop,
-  Loader2,
-  Moon,
-  MoreVertical,
-  Pizza,
-  Plus,
-  Settings,
-  SunMedium,
-  Trash,
-  Twitter,
-  User,
-  X
-} from 'lucide-svelte';
-import Apple from './Apple.svelte';
-import Aria from './Aria.svelte';
-import GitHub from './GitHub.svelte';
-import Google from './Google.svelte';
-import Logo from './Logo.svelte';
-import Npm from './Npm.svelte';
-import PayPal from './PayPal.svelte';
-import Pnpm from './Pnpm.svelte';
-import RadixSvelte from './RadixSvelte.svelte';
-import Tailwind from './Tailwind.svelte';
-import Yarn from './Yarn.svelte';
-
-export type Icon = LucideIcon;
-
-export const Icons = {
-  logo: Logo,
-  close: X,
-  spinner: Loader2,
-  chevronLeft: ChevronLeft,
-  chevronRight: ChevronRight,
-  trash: Trash,
-  post: FileText,
-  page: File,
-  media: Image,
-  settings: Settings,
-  billing: CreditCard,
-  ellipsis: MoreVertical,
-  add: Plus,
-  warning: AlertTriangle,
-  user: User,
-  arrowRight: ArrowRight,
-  help: HelpCircle,
-  pizza: Pizza,
-  twitter: Twitter,
-  check: Check,
-  copy: Copy,
-  copyDone: ClipboardCheck,
-  sun: SunMedium,
-  moon: Moon,
-  laptop: Laptop,
-  gitHub: GitHub,
-  radix: RadixSvelte,
-  aria: Aria,
-  npm: Npm,
-  yarn: Yarn,
-  pnpm: Pnpm,
-  tailwind: Tailwind,
-  google: Google,
-  apple: Apple,
-  paypal: PayPal
-};
+import type { Icon as LucideIcon } from 'lucide-svelte';
+import {
+  AlertTriangle,
+  ArrowRight,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  ClipboardCheck,
+  Copy,
+  CreditCard,
+  File,
+  FileText,
+  HelpCircle,
+  Image,
+  Laptop,
+  Loader2,
+  Moon,
+  MoreVertical,
+  Pizza,
+  Plus,
+  Settings,
+  SunMedium,
+  Trash,
+  Twitter,
+  User,
+  X
+} from 'lucide-svelte';
+import Apple from './Apple.svelte';
+import Aria from './Aria.svelte';
+import GitHub from './GitHub.svelte';
+import Google from './Google.svelte';
+import Logo from './Logo.svelte';
+import Npm from './Npm.svelte';
+import PayPal from './PayPal.svelte';
+import Pnpm from './Pnpm.svelte';
+import RadixSvelte from './RadixSvelte.svelte';
+import Tailwind from './Tailwind.svelte';
+import Yarn from './Yarn.svelte';
+
+export type Icon = LucideIcon;
+
+export const Icons = {
+  logo: Logo,
+  close: X,
+  spinner: Loader2,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  trash: Trash,
+  post: FileText,
+  page: File,
+  media: Image,
+  settings: Settings,
+  billing: CreditCard,
+  ellipsis: MoreVertical,
+  add: Plus,
+  warning: AlertTriangle,
+  user: User,
+  arrowRight: ArrowRight,
+  help: HelpCircle,
+  pizza: Pizza,
+  twitter: Twitter,
+  check: Check,
+  copy: Copy,
+  copyDone: ClipboardCheck,
+  sun: SunMedium,
+  moon: Moon,
+  laptop: Laptop,
+  gitHub: GitHub,
+  radix: RadixSvelte,
+  aria: Aria,
+  npm: Npm,
+  yarn: Yarn,
+  pnpm: Pnpm,
+  tailwind: Tailwind,
+  google: Google,
+  apple: Apple,
+  paypal: PayPal
+};

package/templates/sveltekit/src/lib/components/docs/index.ts

@@ -1,6 +1,6 @@
-export { default as TailwindIndicator } from './TailwindIndicator.svelte';
-
-export * from './icons';
-export * from './dashboard';
-export * from './examples-nav';
-export * from './light-switch';
+export { default as TailwindIndicator } from './TailwindIndicator.svelte';
+
+export * from './icons';
+export * from './dashboard';
+export * from './examples-nav';
+export * from './light-switch';

package/templates/sveltekit/src/lib/components/docs/light-switch/LightSwitch.svelte

@@ -1,75 +1,75 @@
-<!-- 
-Derived from SkeletonUI:  https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/LightSwitch.svelte
- -->
-
-<script lang="ts">
-  import { Moon, Sun } from 'lucide-svelte';
-  import { onMount } from 'svelte';
-  import { buttonVariants } from '$components/ui/button';
-  import { cn } from '$lib/utils';
-  import {
-    getModeOsPrefers,
-    modeCurrent,
-    setModeCurrent,
-    setModeUserPrefers
-  } from './light-switch';
-
-  type OnKeyDownEvent = KeyboardEvent & {
-    currentTarget: EventTarget & HTMLDivElement;
-  };
-
-  function onToggleHandler(): void {
-    $modeCurrent = !$modeCurrent;
-    setModeUserPrefers($modeCurrent);
-    setModeCurrent($modeCurrent);
-  }
-
-  // A11y Input Handlers
-  function onKeyDown(event: OnKeyDownEvent): void {
-    // Enter/Space triggers selection event
-    if (['Enter', 'Space'].includes(event.code)) {
-      event.preventDefault();
-      event.currentTarget.click();
-    }
-  }
-
-  // Lifecycle
-  onMount(() => {
-    // Sync lightswitch with the theme
-    if (!('modeCurrent' in localStorage)) {
-      setModeCurrent(getModeOsPrefers());
-    }
-  });
-</script>
-
-<div
-  on:click={onToggleHandler}
-  on:click
-  on:keydown={onKeyDown}
-  on:keydown
-  on:keyup
-  on:keypress
-  role="switch"
-  aria-label="Light Switch"
-  aria-checked={$modeCurrent}
-  title="Toggle {$modeCurrent === true ? 'Dark' : 'Light'} Mode"
-  tabindex="0"
->
-  <div
-    class={cn(
-      buttonVariants({
-        size: 'sm',
-        variant: 'ghost'
-      }),
-      'w-9 px-0'
-    )}
-  >
-    {#if $modeCurrent}
-      <Moon class="h-5 w-5" />
-      <span class="sr-only">Dark</span>
-    {:else}
-      <Sun class="h-5 w-5" />
-      <span class="sr-only">Light</span>
-    {/if}
-  </div>
-</div>
+<!-- 
+Derived from SkeletonUI:  https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/LightSwitch.svelte
+ -->
+
+<script lang="ts">
+  import { Moon, Sun } from 'lucide-svelte';
+  import { onMount } from 'svelte';
+  import { buttonVariants } from '$components/ui/button';
+  import { cn } from '$lib/utils';
+  import {
+    getModeOsPrefers,
+    modeCurrent,
+    setModeCurrent,
+    setModeUserPrefers
+  } from './light-switch';
+
+  type OnKeyDownEvent = KeyboardEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  };
+
+  function onToggleHandler(): void {
+    $modeCurrent = !$modeCurrent;
+    setModeUserPrefers($modeCurrent);
+    setModeCurrent($modeCurrent);
+  }
+
+  // A11y Input Handlers
+  function onKeyDown(event: OnKeyDownEvent): void {
+    // Enter/Space triggers selection event
+    if (['Enter', 'Space'].includes(event.code)) {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  }
+
+  // Lifecycle
+  onMount(() => {
+    // Sync lightswitch with the theme
+    if (!('modeCurrent' in localStorage)) {
+      setModeCurrent(getModeOsPrefers());
+    }
+  });
+</script>
+
+<div
+  on:click={onToggleHandler}
+  on:click
+  on:keydown={onKeyDown}
+  on:keydown
+  on:keyup
+  on:keypress
+  role="switch"
+  aria-label="Light Switch"
+  aria-checked={$modeCurrent}
+  title="Toggle {$modeCurrent === true ? 'Dark' : 'Light'} Mode"
+  tabindex="0"
+>
+  <div
+    class={cn(
+      buttonVariants({
+        size: 'sm',
+        variant: 'ghost'
+      }),
+      'w-9 px-0'
+    )}
+  >
+    {#if $modeCurrent}
+      <Moon class="h-5 w-5" />
+      <span class="sr-only">Dark</span>
+    {:else}
+      <Sun class="h-5 w-5" />
+      <span class="sr-only">Light</span>
+    {/if}
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/light-switch/index.ts

@@ -1 +1 @@
-export { default as LightSwitch } from './LightSwitch.svelte';
+export { default as LightSwitch } from './LightSwitch.svelte';

package/templates/sveltekit/src/lib/components/docs/light-switch/light-switch.ts

@@ -1,87 +1,87 @@
-// Source: https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts
-
-// Lightswitch Service
-
-import { get } from 'svelte/store';
-// DO NOT replace this ⬇ import, it has to be imported directly
-import { localStorageStore } from './local-storage-store';
-
-// Stores ---
-// TRUE: light, FALSE: dark
-
-/** Store: OS Preference Mode */
-export const modeOsPrefers = localStorageStore<boolean>('modeOsPrefers', false);
-/** Store: User Preference Mode */
-export const modeUserPrefers = localStorageStore<boolean | undefined>('modeUserPrefers', undefined);
-/** Store: Current Mode State */
-export const modeCurrent = localStorageStore<boolean>('modeCurrent', false);
-
-// Get ---
-
-/** Get the OS Preference for light/dark mode */
-export function getModeOsPrefers(): boolean {
-  const prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
-  modeOsPrefers.set(prefersLightMode);
-  return prefersLightMode;
-}
-
-/** Get the User for light/dark mode */
-export function getModeUserPrefers(): boolean | undefined {
-  return get(modeUserPrefers);
-}
-
-/** Get the Automatic Preference light/dark mode */
-export function getModeAutoPrefers(): boolean {
-  const os = getModeOsPrefers();
-  const user = getModeUserPrefers();
-  const modeValue = user !== undefined ? user : os;
-  return modeValue;
-}
-
-// Set ---
-
-/** Set the User Preference for light/dark mode */
-export function setModeUserPrefers(value: boolean): void {
-  modeUserPrefers.set(value);
-}
-
-/** Set the the current light/dark mode */
-export function setModeCurrent(value: boolean) {
-  const elemHtmlClasses = document.documentElement.classList;
-  const classDark = `dark`;
-  value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-  modeCurrent.set(value);
-}
-
-// Lightswitch Utility
-
-/** Set the visible light/dark mode on page load. */
-export function setInitialClassState() {
-  const elemHtmlClasses = document.documentElement.classList;
-  // Conditions
-  const condLocalStorageUserPrefs = localStorage.getItem('modeUserPrefers') === 'false';
-  const condLocalStorageUserPrefsExists = !('modeUserPrefers' in localStorage);
-  const condMatchMedia = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  // Add/remove `.dark` class to HTML element
-  if (condLocalStorageUserPrefs || (condLocalStorageUserPrefsExists && condMatchMedia)) {
-    elemHtmlClasses.add('dark');
-  } else {
-    elemHtmlClasses.remove('dark');
-  }
-}
-
-// Auto-Switch Utility
-
-/** Automatically set the visible light/dark, updates on change. */
-export function autoModeWatcher(): void {
-  const mql = window.matchMedia('(prefers-color-scheme: light)');
-  function setMode(value: boolean) {
-    const elemHtmlClasses = document.documentElement.classList;
-    const classDark = `dark`;
-    value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-  }
-  setMode(mql.matches);
-  mql.onchange = () => {
-    setMode(mql.matches);
-  };
-}
+// Source: https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts
+
+// Lightswitch Service
+
+import { get } from 'svelte/store';
+// DO NOT replace this ⬇ import, it has to be imported directly
+import { localStorageStore } from './local-storage-store';
+
+// Stores ---
+// TRUE: light, FALSE: dark
+
+/** Store: OS Preference Mode */
+export const modeOsPrefers = localStorageStore<boolean>('modeOsPrefers', false);
+/** Store: User Preference Mode */
+export const modeUserPrefers = localStorageStore<boolean | undefined>('modeUserPrefers', undefined);
+/** Store: Current Mode State */
+export const modeCurrent = localStorageStore<boolean>('modeCurrent', false);
+
+// Get ---
+
+/** Get the OS Preference for light/dark mode */
+export function getModeOsPrefers(): boolean {
+  const prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+  modeOsPrefers.set(prefersLightMode);
+  return prefersLightMode;
+}
+
+/** Get the User for light/dark mode */
+export function getModeUserPrefers(): boolean | undefined {
+  return get(modeUserPrefers);
+}
+
+/** Get the Automatic Preference light/dark mode */
+export function getModeAutoPrefers(): boolean {
+  const os = getModeOsPrefers();
+  const user = getModeUserPrefers();
+  const modeValue = user !== undefined ? user : os;
+  return modeValue;
+}
+
+// Set ---
+
+/** Set the User Preference for light/dark mode */
+export function setModeUserPrefers(value: boolean): void {
+  modeUserPrefers.set(value);
+}
+
+/** Set the the current light/dark mode */
+export function setModeCurrent(value: boolean) {
+  const elemHtmlClasses = document.documentElement.classList;
+  const classDark = `dark`;
+  value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+  modeCurrent.set(value);
+}
+
+// Lightswitch Utility
+
+/** Set the visible light/dark mode on page load. */
+export function setInitialClassState() {
+  const elemHtmlClasses = document.documentElement.classList;
+  // Conditions
+  const condLocalStorageUserPrefs = localStorage.getItem('modeUserPrefers') === 'false';
+  const condLocalStorageUserPrefsExists = !('modeUserPrefers' in localStorage);
+  const condMatchMedia = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  // Add/remove `.dark` class to HTML element
+  if (condLocalStorageUserPrefs || (condLocalStorageUserPrefsExists && condMatchMedia)) {
+    elemHtmlClasses.add('dark');
+  } else {
+    elemHtmlClasses.remove('dark');
+  }
+}
+
+// Auto-Switch Utility
+
+/** Automatically set the visible light/dark, updates on change. */
+export function autoModeWatcher(): void {
+  const mql = window.matchMedia('(prefers-color-scheme: light)');
+  function setMode(value: boolean) {
+    const elemHtmlClasses = document.documentElement.classList;
+    const classDark = `dark`;
+    value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+  }
+  setMode(mql.matches);
+  mql.onchange = () => {
+    setMode(mql.matches);
+  };
+}