Theme switcher and BULMA

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();
+});