danvics/Sink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add Laptop icon to theme switcher and improve style

Browse source
This commit is contained in:
ccbikai 2024-06-04 18:59:18 +08:00
parent 5c61271fcf
commit 3ff84f61cb
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
components/SwitchTheme.vue
View file

@ -1,5 +1,5 @@
<script setup>
import { Sun, Moon } from 'lucide-vue-next'
import { Sun, Moon, Laptop } from 'lucide-vue-next'
const colorMode = useColorMode()
</script>
@ -9,10 +9,10 @@ const colorMode = useColorMode()
<DropdownMenuTrigger as-child>
<Button variant="ghost">
<Sun
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
class="absolute w-5 h-5 transition-all scale-100 dark:scale-0"
/>
<Moon
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
class="w-5 h-5 transition-all scale-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
@ -21,13 +21,25 @@ const colorMode = useColorMode()
align="end"
class="min-w-min"
>
<DropdownMenuItem @click="colorMode.preference = 'light'">
<DropdownMenuItem
class="cursor-pointer"
@click="colorMode.preference = 'light'"
>
<Sun class="w-4 h-4 mr-1" />
Light
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'dark'">
<DropdownMenuItem
class="cursor-pointer"
@click="colorMode.preference = 'dark'"
>
<Moon class="w-4 h-4 mr-1" />
Dark
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'system'">
<DropdownMenuItem
class="cursor-pointer"
@click="colorMode.preference = 'system'"
>
<Laptop class="w-4 h-4 mr-1" />
System
</DropdownMenuItem>
</DropdownMenuContent>

2
components/layouts/Header.vue
View file

@ -71,7 +71,7 @@ const showMenu = ref(false)
class="w-5 h-5 mr-1"
/>
GitHub</a>
<span class="px-2 py-2">
<span class="ml-1">
<SwitchTheme />
</span>
</div>