DEV Community 👩‍💻👨‍💻

Cover image for SvelteKit ❤️ Windi CSS
dan
dan

Posted on • Updated on

SvelteKit ❤️ Windi CSS

Specification

  • @sveltejs/kit: "next" (1.0.0-next.115)
  • vite-plugin-windicss: "^1.0.0" (1.0.4)
  • @sveltejs/adapter-static: "next" (1.0.0-next.13)

Features

  • store using localstorage for theme
  • dark mode correctly before everything get rendered
  • dark mode for Windi typography plugin

Demo

Sveltekit ❤️ Windi
Live Demo

Running the project

Clone this repo and cd to the directory, then run npm or yarn

pnpx degit dansvel/sveltekit-windicss myproject ## or npx
cd myproject
pnpm i ## or npm or yarn
pnpm run dev

## to generate static web
pnpm run build
Enter fullscreen mode Exit fullscreen mode

Go to Repo

Top comments (2)

Collapse
 
srgeneroso profile image
srgeneroso

Not sure if you know of (dev.to/davidwparker), he is also sharing some great work with SvelteKit, he made and example of a theme changer with nojs (dev.to/davidwparker/dark-mode-togg...), I'll try to mix both of your works as I'm in early stages (noobing) of creating a template for basic ecommerces with firebase.

Collapse
 
opensas profile image
opensas

Hi, I followed your tutorial but I can't seem to override classes, they get applied in alphabetical order instead of in the order specified.

Please have a look at this stack overflow question for an example: stackoverflow.com/questions/691696... and also in this gh issue: github.com/windicss/windicss/issue...

thanks!

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.