Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: minor fix to display the correct icon on dark mode (#326)

Browse Source 
fixing the glitch when reloading the page on dark mode and the icon changing back to light mode.
This commit is contained in:
Lucas Nunes 2024-02-06 14:01:39 -03:00 committed by GitHub
parent 6ab704a6fb
commit 25f4a7292a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -138,17 +138,19 @@ watch(() => $route.path, (n) => {
<component :is="link.icon" class="w-[20px] h-5" /> <component :is="link.icon" class="w-[20px] h-5" />
</Button> </Button>
<Button <ClientOnly>
class="flex items-center justify-center" <Button
aria-label="Toggle dark mode" class="flex items-center justify-center"
:variant="'ghost'" aria-label="Toggle dark mode"
:size="'icon'" @click="toggleDark()" :variant="'ghost'"
> :size="'icon'" @click="toggleDark()"
<component >
:is="isDark ? RadixIconsSun : RadixIconsMoon" <component
class="w-[20px] h-5 text-foreground" :is="isDark ? RadixIconsSun : RadixIconsMoon"
/> class="w-[20px] h-5 text-foreground"
</Button> />
</Button>
</ClientOnly>
</div> </div>
</div> </div>
</div> </div>