Styling & Themes (NEW)
With TailwindCSS + DaisyUI
Styling
TailwindCSS is installed by default with the typography, DaisyUI and prettier plugins.
TailwindCSS
- TailwindCSS is a utility-first CSS framework. It is very useful to quickly style your website.
- Check the TailwindCSS documentation for more information.
DaisyUI
- DaisyUI is a TailwindCSS component library and is very useful to quickly build a website.
- Check the DaisyUI documentation for more information.
Themes (with DaisyUI)
By default, the light
and dark
theme of DaisyUI are included.
- You can add themes in
tailwind.config.js
. - Please check https://daisyui.com/docs/themes/ on how to add and create custom themes.
- When the
default
theme is selected, the theme will adhere to the system theme (dark or light).
How it works
DaisyUI 4.0 introduced a new component called ThemeController
to switch between themes with only CSS. However, using only the built in ThemeController
component would not persist the selected theme on page reload.
Therefore we added some extra code and created a custom ThemeController
component that involves saving the theme in a cookie and writable store.
In the root +layout.svelte
there is a hidden checkbox that is always checked. This checkbox is used to select a theme using the $themeStore
store.
The $themeStore
is a writable store that is used to store the current theme. This store in itself won’t persist the theme on page reload.
Check the custom ThemeController component on how to do this.
<script lang="ts">
// ...
// Set theme from page data, which gets value from cookie (see root +layout.server.ts)
$themeStore = $page.data.theme;
// ...
</script>
<input type="checkbox" name="theme" class="theme-controller hidden" checked value={$themeStore} />
On a page load (in the root +layout.server.ts
), the theme is set based on a cookie with name ‘theme’ or defaults to 'default'
(system theme).
export const load = async ({ locals: { getSession }, cookies}) => {
// Get the theme from the cookie, or default to 'default'
const theme = cookies.get('theme') || 'default';
return {
session: await getSession(),
theme
};
};