rustlanges-components 0.1.0

RustLangES components library
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import { createEffect, createSignal, h } from "./miniui";

const theme = createSignal(localStorage.getItem("theme") ?? "system");
const isDarkTheme = () => theme() === "dark";
const isLightTheme = () => theme() === "light";
const isSystemTheme = () => !isDarkTheme() && !isLightTheme();

const htmlElement = document.documentElement;
createEffect(() => {
  localStorage.setItem("theme", theme());

  if (theme() === "system") {
    htmlElement.classList.add("rustlanges-theme-system");
    htmlElement.classList.remove(
      "rustlanges-theme-dark",
      "rustlanges-theme-light"
    );
  } else if (theme() === "dark") {
    htmlElement.classList.add("rustlanges-theme-dark");
    htmlElement.classList.remove(
      "rustlanges-theme-system",
      "rustlanges-theme-light"
    );
  } else if (theme() === "light") {
    htmlElement.classList.add("rustlanges-theme-light");
    htmlElement.classList.remove(
      "rustlanges-theme-system",
      "rustlanges-theme-dark"
    );
  }
});

export function ThemeSwitch() {
  return (
    <div
      class={[
        "max-w-case mx-auto mb-5 px-3 py-2",
        "flex justify-end",
        "sticky top-3",
      ]}
    >
      <select onChange={e => theme(e.currentTarget.value)}>
        <option selected={isSystemTheme()} value="system">
          System
        </option>
        <option selected={isDarkTheme()} value="dark">
          Dark
        </option>
        <option selected={isLightTheme()} value="light">
          Light
        </option>
      </select>
    </div>
  );
}