Themescura 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.
There are currently five axis to adjust the color:
Similar to brand color, and is the most prominent color on the screen.
Compliments primary color, for now only shades the gradient and rarely in accents
The color of the surface of the cards
Tip: Bit of transparency helps in modals/poups blur
The background of the page
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.
- 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.
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.
Change the style of the base cards.
- Royal Decree
Note: default themes cannot be edited/removed, create a new theme to edit them
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.