DEV Community

Rob Levin
Rob Levin

Posted on

Theming AgnosticUI with open-props is easy peasy!

agnostic-svelte + open-props === easy theming 🎨

My blog uses svelte-kit and so I've been testing my AgnosticUI Svelte package (agnostic-svelte on NPM) there. I'm quite happy to report that Vest and open-props both work quite well with AgnosticUI!

Vest is a declarative form validation library that is inspired by unit testing libraries like Mocha or Jest.

You can see my experiments with integrating with Vest here.

AgnosticUI and Vest signup form experiment

open-props Supercharged CSS variables that give you a nice head-start on your CSS custom properties and/or theming efforts.

You can see my experiments with open-props here (just click the Theming tab once you get there and then select from the theme radio buttons)

open-props and AgnosticUI theming experiments

And if that's not enough, I did some experiments with CSS Grid too! All the examples have links to the GitHub source code in case you wanna snag a Grid layout:

CSS Grid experiments

The layout experiments provided are:

  • Simple Header & Footer
  • Sidenav
  • Sidenav Full Height
  • Holygrail
  • Holy Sidbars (basically holy grail but the sidebars on both side extent full height)

I hope y'all can go have a look at these experiments and find them useful!

Top comments (1)

markobog profile image
Marko Bogosavljevic

Are there any plans on implementing dark mode switch into the AgnosticUI package? By the way, the source links to those experiments are broken.