Theme manager/Editor/Designer
(Name To Be Determined)
The above widget allows you to choose between multiple themes (styles) and modes (dark/light).
You can customize themes on the variables:
Changes are auto-saved and persisted via localstorage, so browsing other pages will not reset the theme.
Creating a new theme forks the currently applied theme and sets a randomized two word name. Change the name if you want.
For inspiration browse the Theme Showcase.
Colors
There are currently five axis to adjust the color:
- Primary Similar
to brand color, and is the most prominent color on the screen. - Secondary
Compliments primary color, for now only shades the gradient and rarely in accents - Surface The color
of the surface of the cards Tip: Bit of transparency helps in modals/poups blur - Background The background of the page
- Text The color of
the text
The rest of the colors, such as: border, shadow, color over primary, heading color, tertiary text color etc are generated from these fundamental five. Play around to see how each of these affects the rest of the colors.
Typography
- Font family
Change the family of the fonts
All fonts from Google Fonts, and your local system fonts are supported.
Recommended fonts are also shown. These recommendations are chosen for clarity and to depict various variations.
You can browse all fonts at Google Fonts
Note: Please use Title case or the exact example of the name Google Fonts suggests.
Layout
-
Border Radius
Change the base border radius
The border radius are applied in 0.5x 1x 1.5x 2x increments.
Setting to 0 removes all border-radii, squaring the corners. -
Card Type
Change the style of the base cards.
Default Themes
- Aster
- Brutalist
- Royal Decree
Note: default themes cannot be edited/removed, create a new theme to edit them
Theme Showcase
The following themes are provided for experimentation, and showcase the possibilities with the theme engine.
Click on a theme to load and apply it. If a theme was loaded and changed earlier it will not be overwritten, unless it is deleted.
Showcase of current themes is also present at the end.