nezumi/Sink
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/Sink.git synced 2026-09-22 13:48:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize theme switcher and fix style issues

Browse Source
This commit is contained in:
ccbikai
2024-06-02 20:11:57 +08:00
parent b87405abf7
commit 66f202d3d1
4 changed files with 11 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SwitchTheme.vue
+7 -8
View File
@@ -1,7 +1,5 @@
<script setup>
import { Icon } from '@iconify/vue'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Sun, Moon } from 'lucide-vue-next'
const colorMode = useColorMode()
</script>
@@ -10,18 +8,19 @@ const colorMode = useColorMode()
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost">
<Icon
icon="radix-icons:sun"
<Sun
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<Icon
icon="radix-icons:moon"
<Moon
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<span class="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent
align="end"
class="min-w-min"
>
<DropdownMenuItem @click="colorMode.preference = 'light'">
Light
</DropdownMenuItem>
components/layouts/Header.vue
+4 -4
View File
@@ -36,7 +36,7 @@ const showMenu = ref(false)
@touchmove.prevent
>
<div
class="flex-col w-full h-auto overflow-hidden bg-background rounded-lg md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
class="flex-col w-full h-auto overflow-hidden rounded-lg bg-background md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
>
<a
href="/"
@@ -59,13 +59,13 @@ const showMenu = ref(false)
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0"
>
<a
class="w-full px-6 py-2 mr-0 text-gray-700 dark:text-gray-300 cursor-pointer md:px-3 md:mr-2 lg:mr-3 md:w-auto"
class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer dark:text-gray-300 md:px-3 md:mr-2 lg:mr-3 md:w-auto"
href="/dashboard"
>Dashboard</a>
<a
href="https://github.com/ccbikai/sink"
target="_blank"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:mr-2 lg:mr-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
>
<GitHubIcon
class="w-5 h-5 mr-1"
@@ -79,7 +79,7 @@ const showMenu = ref(false)
</div>
<div
class="absolute right-0 flex flex-col items-center justify-center w-10 h-10rounded-full cursor-pointer md:hidden"
class="absolute right-0 flex flex-col items-center justify-center w-10 cursor-pointer h-10rounded-full md:hidden"
@click="showMenu = !showMenu"
>
<Ellipsis