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/variables/_colors.scss.
/* 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;
Each color theme includes two branding colors,
$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:
There’s an uncountable number of color pickers on the web. We found the ones below to be particularly well made. Happy color picking!
1. https://colorhunt.co Colorhunt - Color Palettes for Designers and Artists
2. https://www.webdesignrankings.com/resources/lolcolors LolColors - Curated color palette inspiration
3. https://coolors.co Coolors - The super fast color schemes generator!