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

fix: fixing glitch on dark mode icon

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-05 21:25:42 -03:00
parent 09ec9f28e3
commit c646eb129c
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,20 +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()"
<!-- workaround for bug with component when refreshing the page --> >
<component <component
:is="RadixIconsMoon" :is="isDark ? RadixIconsSun : RadixIconsMoon"
v-if="!isDark" class="w-[20px] h-5 text-foreground"
class="w-[20px] h-5 text-foreground" />
/> </Button>
<RadixIconsSun v-if="isDark" class="w-[20px] h-5 text-foreground" /> </ClientOnly>
</Button>
</div> </div>
</div> </div>
</div> </div>