Loading...

Customize

Work In Progress

Guide

Themescura

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.

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
  • Structured
  • Royal Decree
  • Brutalist

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.

Share any themes you would like to showcase!