gkucmierz/nonograms
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add system theme option to navbar

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-09 23:17:52 +01:00
parent 746444aa42
commit 0f139108a7
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/NavBar.vue
View File

@@ -2,7 +2,7 @@
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'; import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { usePuzzleStore } from '@/stores/puzzle'; import { usePuzzleStore } from '@/stores/puzzle';
import { useI18n } from '@/composables/useI18n'; import { useI18n } from '@/composables/useI18n';
import { Gamepad2, Palette, CircleHelp, Sun, Moon, Menu, X, ChevronDown, ChevronUp } from 'lucide-vue-next'; import { Gamepad2, Palette, CircleHelp, Sun, Moon, Menu, X, ChevronDown, ChevronUp, Monitor } from 'lucide-vue-next';
const store = usePuzzleStore(); const store = usePuzzleStore();
const { t, locale, setLocale, locales } = useI18n(); const { t, locale, setLocale, locales } = useI18n();
@@ -210,15 +210,18 @@ watch(isMobileMenuOpen, (val) => {
<!-- Theme Menu --> <!-- Theme Menu -->
<div class="nav-dropdown"> <div class="nav-dropdown">
<button class="btn-neon nav-btn" @click.stop="toggleThemeMenu"> <button class="btn-neon nav-btn" @click.stop="toggleThemeMenu">
<Palette :size="18" /> Theme <Palette :size="18" /> {{ t('theme.label') }}
</button> </button>
<transition name="slide-fade"> <transition name="slide-fade">
<div v-if="isThemeOpen" class="dropdown-menu theme-menu"> <div v-if="isThemeOpen" class="dropdown-menu theme-menu">
<button class="dropdown-item" @click="setTheme('system')">
<Monitor :size="16" /> {{ t('theme.system') }}
</button>
<button class="dropdown-item" @click="setTheme('light')"> <button class="dropdown-item" @click="setTheme('light')">
<Sun :size="16" /> Light <Sun :size="16" /> {{ t('theme.light') }}
</button> </button>
<button class="dropdown-item" @click="setTheme('dark')"> <button class="dropdown-item" @click="setTheme('dark')">
<Moon :size="16" /> Dark <Moon :size="16" /> {{ t('theme.dark') }}
</button> </button>
</div> </div>
</transition> </transition>
@@ -301,15 +304,18 @@ watch(isMobileMenuOpen, (val) => {
<!-- Mobile Theme Menu --> <!-- Mobile Theme Menu -->
<div class="mobile-group"> <div class="mobile-group">
<button class="mobile-item-trigger" @click="toggleThemeMenu"> <button class="mobile-item-trigger" @click="toggleThemeMenu">
<span class="flex-center gap-10"><Palette :size="20" /> Theme</span> <span class="flex-center gap-10"><Palette :size="20" /> {{ t('theme.label') }}</span>
<component :is="isThemeOpen ? ChevronUp : ChevronDown" :size="16" /> <component :is="isThemeOpen ? ChevronUp : ChevronDown" :size="16" />
</button> </button>
<div v-if="isThemeOpen" class="mobile-sub-menu"> <div v-if="isThemeOpen" class="mobile-sub-menu">
<button class="mobile-sub-item" @click="setTheme('system')">
<Monitor :size="16" /> {{ t('theme.system') }}
</button>
<button class="mobile-sub-item" @click="setTheme('light')"> <button class="mobile-sub-item" @click="setTheme('light')">
<Sun :size="16" /> Light <Sun :size="16" /> {{ t('theme.light') }}
</button> </button>
<button class="mobile-sub-item" @click="setTheme('dark')"> <button class="mobile-sub-item" @click="setTheme('dark')">
<Moon :size="16" /> Dark <Moon :size="16" /> {{ t('theme.dark') }}
</button> </button>
</div> </div>
</div> </div>