DEV Community

loading...
Cover image for I made this SCSS or CSS theme generator

I made this SCSS or CSS theme generator

jadenconcord profile image Jaden Concord ・2 min read

Theme generator preview
This app prompts you for colors, sizes, and other things to create an SCSS theme file that you can use for a site or app. It actually uses CSS variables so you can dynamically change the theme with JavaScript. You can use it here. I like to use it when I am starting an app and I take a screenshot of the palate in the top left and make the design in Inkscape. The Randomize Theme button is very nice to use to find a good color scheme to start with. Here is a sample output of a theme:
Alt Text
I am still working on the SCSS output but here is what the output looks like:
Alt Text
As you can see, it is a very long file. That is because it gathers the SCSS variables, calculates new variables, makes them into CSS variables, and finally makes SCSS variables to use the CSS variables. Also it has conditions for it to be light or dark, light with dark, dark with light themes which makes it long.

I just made this so I haven't used the SCSS result so there will definitely be lots of changes but this is one of the apps that I plan to make, next is a CSS defaults theme using this site SCSS results.

Again the demo is [here](Alt Text.
The Github repo is here and I would appreciate any issues that were posted.

Discussion (1)

pic
Editor guide
Collapse
redeakaa profile image
Okoro Redemption

Nice idea.