Skip to content

Theming

Jump to bottom
Farah edited this page Dec 14, 2022 · 4 revisions

How to integrate an custom theme ?

Web app contains a variables.css file with all constants to define an theme.

To create a new custom theme, just edit this file.

variables.css

variables.css contains all constants about colors and images URLs.

Path in project: src/main/resources/css/variables.css

How to change the logo ?

variables.css contains --logo-url and --logo-width parameters to define logo and its width.

Example:

--logo-url: url("/img/logo-ozwillo.png");

How to change global colors ?

variables.css contain --primary-color, --secondary-color and --tertiary-color parameters to define global colors.

Example:

  • --primary-color: #6f438e;
  • --secondary-color: #4c2d62;
  • --tertiary-color: #FFF;

To enrich the design and be able to use different colors for the various pages and elements of the app, more variables related to the colors have been added. We now have different shades of the primary and secondary colors.

Example:

Dark shades of primary color:

  • --clr-primary-1: #432855;
  • --clr-primary-2: #4e2f63;
  • --clr-primary-3: #593672;
  • --clr-primary-4: #643c80;

Lighter shades of primary color:

  • --clr-primary-6: #7d5699
  • --clr-primary-7: #8c69a5
  • --clr-primary-8: #9a7bb0
  • --clr-primary-9: #a98ebb;

Same logic applies for the secondary color. This way, we can ensure consistency across different components and be able to use the various shades on different pages and elements.

How to generate various shades of primary and secondary color ?

In order to custom a specific theme, you need to choose a primary and secondary color that will be your --clr-primary-5: #xxxxxx; and --clr-secondary-5: #xxxxxx;. Then go visit : https://noeldelgado.github.io/shadowlord/#6e428e , enter your primary and secondary color, and the tool will generate different shades of your custom colors. The objective is to select 8 more shades for each color (4 lighter and 4 darker) and use them in your variables.css

And more

  • --bg-content-color: change background color of each page
  • --button-primary-color: change color of border and text for all buttons
  • --button-secondary-color: change background for all buttons
  • --button-tertiary-color: change background for all buttons when they are active
  • --footer-color: change background color of footer
  • --footer-logo-url: change logo in footer
  • --nav-color: change background color of navigation bar
  • --separator-color: change color for each separator (used for tables and lists of items)
Clone this wiki locally