versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: 💄 Improve appearance of dropdown menus and settings pages

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-02-09 19:50:57 +01:00
parent 9ba59cfd21
commit 7e9ccbc932
No known key found for this signature in database
13 changed files with 68 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/sidebars/theme-switcher.vue
View file

@ -1,44 +0,0 @@
<script setup lang="ts">
import { Moon, Sun, Wrench } from "lucide-vue-next";
import { Button } from "../ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
const colorMode = useColorMode();
const themeNames = {
light: "Light",
dark: "Dark",
system: "System",
} as Record<string, string>;
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" class="w-full justify-start">
<Sun class="size-[1.2rem] scale-100 transition-all dark:scale-0 dark:hidden inline" />
<Moon class="size-[1.2rem] scale-0 transition-all dark:scale-100 hidden dark:inline" />
{{ themeNames[colorMode.preference] }}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" >
<DropdownMenuItem @click="colorMode.preference = 'light'">
<Sun class="size-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'dark'">
<Moon class="size-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'system'">
<Wrench class="size-4 mr-2" />
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>