Changing Colors in the Example App

Changing Colors in the Example App

In this quick tutorial, we are going to apply new colors to the Scrivito Example App. Changing the colors to reflect your brand or to express a specific mood will further customize our example app into your own personalized web application. It’s easy, give it a try!

To change the colors, you will need some minor understanding of CSS and Sass. Sass offers variables for colors (and other kinds of values). This is great because you can set a color in just one place to have it updated wherever the variable is used.

Find the variables

To begin, in the Scrivito Example App directory open the file src/assets/stylesheets/variables/_colors.scss and find the /* colors section:

$primary and $secondary are the two main branding colors used in the example app. They are applied to buttons, drop-down menus, icons and several other elements. By changing the value of these two main variables you can easily make the example app your own. The other variables starting with $theme define colors which are mainly used for section backgrounds.

In total, eight sets of those colors exist in the Example App, representing themes you can choose from. To change the theme to be used, comment out the active one and remove the comment marks from the one you want.

Pick your colors

The hardest part of changing the default colors is picking the right ones. Sometimes this is as easy as asking the marketing department or a designer. There are also many color pickers available online that let you find the colors that suit you, e.g.:

In web design, there are several ways to specify a color; the most straightforward ones are: a hexadecimal value, RGB values, and an HTML color name. Using a name is easiest, but there is only a rather small set of named colors among the almost infinite number of variations. Thus, we recommend using hexadecimal values and will do so for the example app. Hex values can be easily identified as they always start with a “#”.

  •  Hexadecimal

    $primary: #4ECDC4 !default;
    $secondary: #FF6B6B !default;

  •  RGB

    $primary: rgb(66, 86, 244) !default;
    $secondary: rgb(247, 4, 4) !default;

  •  Name

    $primary: green !default;
    $secondary: grey !default;

You will see many other color variables in “src/assets/stylesheets/_colors.scss” which you can change – go ahead and play around with them and see what works for you.