[+] Theme Button

src/App.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts">
+import {applyTheme} from "@/logic/theme";
 import { Component, Vue } from 'vue-facing-decorator';
 import Divider from "@/components/divider.vue";
 import LangButton from "@/components/LangButton.vue";
@@ -52,6 +53,7 @@ export default class App extends Vue
         )
 
         document.getElementById("app").dataset.lang = getLang()
+        applyTheme()
     }
 }
 </script>

src/components.d.ts

@@ -40,5 +40,6 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SubmitPrompt: typeof import('./components/SubmitPrompt.vue')['default']
     SwitchButton: typeof import('./components/SwitchButton.vue')['default']
+    ThemeButton: typeof import('./components/ThemeButton.vue')['default']
   }
 }

src/components/LangButton.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="lang-btns" v-if="showBtn">
+        <ThemeButton />
         <div class="clickable hy-button" 
             @click="() => click(l)" v-for="l in targets" :key="l">
             {{ supportedLang[l] }}
@@ -11,9 +12,10 @@
 import { Component, Vue } from 'vue-facing-decorator';
 import { getLang, Lang, setLang, supportedLang } from "@/logic/config";
 import { info } from "@/logic/utils";
+import ThemeButton from "@/components/ThemeButton.vue";
 
 
-@Component({ components: {} })
+@Component({ components: {ThemeButton} })
 export default class LangButton extends Vue {
     lang = getLang()
     supportedLang = supportedLang

src/components/ThemeButton.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="clickable hy-button theme-button" :key="theme" v-on:click="changeTheme()">
+        <Icon class="iconR" icon="mynaui:sun" v-if="theme != 'dark'" />
+        <Icon class="iconR" icon="mynaui:moon" v-else />
+    </div>
+</template>
+
+<script lang="ts">
+import {applyTheme, getTheme, setTheme} from "@/logic/theme";
+import {Vue, Component} from 'vue-facing-decorator';
+import {Icon} from '@iconify/vue';
+
+@Component({components: {Icon}})
+export default class ThemeButton extends Vue {
+    theme = getTheme()
+
+    changeTheme(): void {
+        if (this.theme == 'dark') {
+            setTheme('light')
+        } else {
+            setTheme('dark')
+        }
+        applyTheme()
+        this.theme = getTheme()
+    }
+}
+</script>
+
+<style lang="sass">
+@import "../css/colors"
+@import "../css/global"
+
+.theme-button
+    padding: 10px
+    width: 25px
+    height: 25px
+    border-radius: 9008px
+    border-color: $color-text-main
+    border-width: 1px
+    border-style: solid
+
+    .iconR
+        width: 20px
+        height: 20px
+        color: $color-text-main
+
+[data-theme="dark"]
+    .iconR
+        color: $color-text-dark-main
+</style>

src/logic/theme.ts

@@ -2,7 +2,7 @@ export type Theme = 'dark' | 'light' | 'unset'
 
 export function getTheme(): Theme {
     if (localStorage.getItem('theme')) {
-        return JSON.parse(localStorage.getItem('theme')) as Theme
+        return localStorage.getItem('theme') as Theme
     }
     if (window.matchMedia) {
         if (window.matchMedia('(prefers-color-scheme: dark)').matches) {