Dark Mode
How to Switch Dark Mode?
You can easily switch the theme of the application by clicking the moon/sun icon in the top right corner of the application.
<button title="Toggle Theme" :class="$store.app.menu=='horizontal'?'bg-neutral-0 dark:bg-neutral-903':'bg-neutral-20 dark:bg-neutral-903'" x-cloak x-show="$store.app.theme === 'light'" @click="$store.app.toggleTheme('dark')" class="flex size-9 items-center justify-center rounded-full border border-neutral-30 text-xl dark:border-neutral-500">
<i class="las la-moon"></i>
</button>
<button title="Toggle Theme" x-cloak x-show="$store.app.theme === 'dark'" @click="$store.app.toggleTheme('light')" class="flex size-9 items-center justify-center rounded-full border border-neutral-30 bg-neutral-20 text-xl dark:border-neutral-500 dark:bg-neutral-700">
<i class="las la-sun"></i>
</button>
<div class="flex items-center gap-4 bb-dashed-n30">
<button class="border p-6 rounded-lg border-primary-300 dark:border-neutral-500 bg-primary-50 text-primary-300 dark:text-neutral-10 dark:bg-neutral-903" @click="$store.app.toggleTheme('light')">
<i class="las la-sun text-3xl"></i>
</button>
<button class="border p-6 rounded-lg dark:border-primary-300 bg-neutral-0 dark:text-primary-300 dark:bg-neutral-903" @click="$store.app.toggleTheme('dark')">
<i class="las la-moon text-3xl"></i>
</button>
</div>
Custom Css for Dark Mode
You can write your own custom css for dark mode by overriding the default css. use this following code to write your own custom css for dark mode.
body.dark //selector{
}
This code only works in dark mode.