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> <script setup>
import { Sun, Moon } from 'lucide-vue-next' import { Sun, Moon, Laptop } from 'lucide-vue-next'
const colorMode = useColorMode() const colorMode = useColorMode()
</script> </script>
@ -9,10 +9,10 @@ const colorMode = useColorMode()
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="ghost"> <Button variant="ghost">
<Sun <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 <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> <span class="sr-only">Toggle theme</span>
</Button> </Button>
@ -21,13 +21,25 @@ const colorMode = useColorMode()
align="end" align="end"
class="min-w-min" 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 Light
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'dark'"> <DropdownMenuItem
class="cursor-pointer"
@click="colorMode.preference = 'dark'"
>
<Moon class="w-4 h-4 mr-1" />
Dark Dark
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'system'"> <DropdownMenuItem
class="cursor-pointer"
@click="colorMode.preference = 'system'"
>
<Laptop class="w-4 h-4 mr-1" />
System System
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>

2
components/layouts/Header.vue
View file

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