Choosing a Color Theme in the Scrivito Example App

As of recently, the Scrivito Example App comes with several color themes. If one of them is perfect for your website based on this app, you can simply use it as is. But you can also change the colors individually to give your site the look and feel you want it to have. Switching the color theme is as easy as commenting the active one out and uncommenting the one you want. For detailed instructions, see Changing Colors in the Example App.

The Example App uses Sass, and Sass offers variables. Variables are extremely handy because you can define values such as colors in just one place to have them applied wherever the variables are used. For the Example App, the color values are defined in the file src/assets/stylesheets/_colors.scss.

Branding and background colors

Each color theme includes two branding colors, $primary and $secondary, which are applied to controls, icons and the like, as well as five $theme-grey* colors used for section backgrounds. Here’s what the eight included themes look like:

Copy
/* colors
================================================== */

/* colors theme 01 - original */
$primary: #4ecdc4 !default;
$secondary: #ff6b6b !default;
$theme-grey: #2e353c;
$theme-greydark: #3d4142;
$theme-greylight: #dadada;
$theme-greymiddle: #716f73;
$theme-greywhite: #fbfbfb;

Color variants overview

Theme 01 – original

Theme 02 – green 01

Theme 03 – green 02

Theme 04 – red 01

Theme 05 – red 02

Theme 06 – blue

Theme 07 – yellow

Theme 08 – pink

Little helpers

There’s an uncountable number of color pickers on the web. We found the ones below to be particularly well made. Happy color picking!

More great blog posts from Alexander Geßler

  • Let’s Talk Bootstrap 4

    A detailed guide to upgrading from BS3 to BS4

    The following is a wrap-up of the biggest changes and what you might need to know when transitioning your project from BS3 to BS4, and of some things I learned while upgrading the Scrivito Example App. For a quick overview of how we implemented these changes check out our "The Scrivito Example...

  • A Note on Twitter Bootstrap 3

    Twitter tells us in their release notes: Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system. This sounds so cool. But in real life this could lead to problems with old-fashioned CSS apps. They did not...