Theme switcher and BULMA

vue/app.vue

@@ -1,15 +1,18 @@
 <template>
-  <LanguageSwitcher />
-  <p>
-    {{ t('app.hello') }}
-  </p>
-
-  <RouterView />
+<LanguageSwitcher/>
+<br>
+<ThemeSwitcher/>
+<br>
+<RouterView />
 </template>
 
 <script setup>
 import { useI18n } from 'vue-i18n'
-import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
+import { applyTheme } from '@/components/theme';
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+
+applyTheme();
 
 const { t } = useI18n();
 </script>

vue/components/LanguageSwitcher.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="dropdown">
-    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
-      {{ locale.toUpperCase() }}
-    </button>
-    <ul class="dropdown-menu">
-      <li v-for="loc in SUPPORT_LOCALES" :key="loc">
-        <a class="dropdown-item" href="#" @click.prevent="setLocale(loc)">{{ loc.toUpperCase() }}</a>
-      </li>
-    </ul>
+  <div class="dropdown is-hoverable">
+    <div class="dropdown-trigger">
+      <button class="button">
+        <span>{{ locale.toUpperCase() }}</span>
+      </button>
+    </div>
+    <div class="dropdown-menu">
+      <div class="dropdown-content">
+        <button v-for="loc in SUPPORT_LOCALES" :key="loc" @click.prevent="setLocale(loc)" class="dropdown-item">
+          {{ loc.toUpperCase() }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 

vue/components/ThemeSwitcher.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="dropdown is-hoverable">
+    <div class="dropdown-trigger">
+      <button class="button">
+        <span>Barvna tema</span>
+      </button>
+    </div>
+    <div class="dropdown-menu">
+      <div class="dropdown-content">
+        <button class="dropdown-item" @click.prevent="setTheme('light')">
+          Svetlo
+        </button>
+        <button class="dropdown-item" @click.prevent="setTheme('dark')">
+          Temno
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { setTheme } from './theme';
+</script>

vue/components/theme.js

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+
+
+const theme = ref(localStorage.getItem('theme') || 'auto');
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+
+export function applyTheme() {
+  const resolved = theme.value === 'auto' ? (prefersDark.matches ? 'dark' : 'light') : theme.value;
+  document.documentElement.setAttribute('data-theme', resolved);
+}
+
+export function setTheme(value) {
+  theme.value = value;
+  localStorage.setItem('theme', value);
+  applyTheme();
+}
+
+prefersDark.addEventListener('change', () => {
+  if (theme.value === 'auto') applyTheme();
+});

vue/css/all.css

@@ -0,0 +1,14 @@
+
+@import 'vue-multiselect/dist/vue-multiselect.css';
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
+@import 'bulma/css/bulma.min.css';
+
+.dropdown {
+  --bulma-dropdown-menu-min-width: 4rem;
+}
+
+a.dropdown-item,
+button.dropdown-item {
+  padding-inline-end: 1rem;
+}

vue/main.js

@@ -3,11 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes, handleHotUpdate } from 'vue-router/auto-routes'
 import { i18n, setLocale, initialLocale } from './i18n.js'
 
-import '@fortawesome/fontawesome-free/css/all.min.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap/dist/js/bootstrap.bundle.min.js'
-import 'vue-multiselect/dist/vue-multiselect.css';
-
+import './css/all.css'
 
 import App from './app.vue'
 

vue/routes/test.vue

@@ -1,8 +0,0 @@
-<template>
-  {{ t('common.save') }}
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-</script>