[frontend-next] Refactored fronted

frontend/src/App.vue

@@ -1,12 +1,33 @@
-<template>
-    <div id="app">
-        <router-view/>
-    </div>
-</template>
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import {useSettingsStore} from '@/pinia'
+import {dark_mode} from '@/lib/theme'
 
-<style lang="less">
-#app {
-    height: 100%;
+let media = window.matchMedia('(prefers-color-scheme: dark)')
+const callback = (media: { matches: any; }) => {
+    const settings = useSettingsStore()
+    if (media.matches) {
+        dark_mode(true)
+        settings.set_theme('dark')
+    } else {
+        dark_mode(false)
+        settings.set_theme('default')
+    }
+}
+callback(media)
+if (typeof media.addEventListener === 'function') {
+    media.addEventListener('change', callback)
+} else if (typeof media.addListener === 'function') {
+    media.addListener(callback)
 }
 
+</script>
+
+<template>
+    <router-view/>
+</template>
+
+<style lang="less" scoped>
+
 </style>