aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/DarkToggle.svelte
blob: be1fe858da5fb9772733e9f566643ece465a920b (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  import { t } from "$lib/translations";
  import { theme } from "$lib/store";
  let dark = () => {
    $theme = $theme === "dark" ? "light" : "dark";
    document.cookie = `theme=${$theme}; path=/; max-age=86400`;
  };
</script>

<button
  class="flex justify-center items-center hover:opacity-80 gap-2 font-bold"
  onclick={dark}
>
  <iconify-icon
    icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"}
    width="30"
></iconify-icon>

  {$t(`nav.${$theme === "dark" ? "light" : "dark"}`)}
</button>