Table of contents

Color

SFUMATO uses color sets, which allow you to easily set up and control the color theme for an entire website or parts of one. Each color in a color set defines a color, contrast color (e.g. for overlay text), tint color, and shade color.

Color sets

In the _config-colors.scss file, SFUMATO includes a collection of color sets. You should modify these color sets to suit your project needs. And you can create your own colors following the pattern already established.

  • primary
    The primary color used in your project
  • secondary
    The secondary color used in your project
  • tertiary
    The tertiary color used in your project
  • buttons
    The primary button color used in your project
  • success
    Color that indicates success (typically green)
  • warning
    Color that indicates warning (typically orange-yellow)
  • danger
    Color that indicates danger or error (typically red)
  • light
    Light gray for objects that need to provide subtle differentiation with white
  • medium
    General gray for objects like form field placeholders and disabled text over white
  • dark
    A dark slate gray for text and other near-black objects

Changing colors

In the file _config-colors.scss you will find the default color sets. Edit them (and add new colors) to suit your project. Below is an example definition for the color "primary".

                                        
                                            // PRIMARY COLOR
                                            @include sf-generate-css-color-property(
                                                $name: "primary", 
                                                $hex-color: #3880ff, 
                                                $hex-contrast-color: #ffffff, 
                                                $alpha: 1.0, 
                                                $shade-pct: 15%, 
                                                $tint-pct: 20%);

                                            // SECONDARY COLOR
                                            ...
                                        
                                    

The color configuration will generate CSS custom properties like this:

                                        
                                            // PRIMARY COLOR
                                            --sf-color-primary: #3880ff;
                                            --sf-color-primary-contrast: #ffffff;
                                            --sf-color-primary-shade: #0962ff;
                                            --sf-color-primary-tint: #6099ff;
                                        
                                            // SECONDARY COLOR
                                            ...
                                        
                                    

Hex or RGBa?

Always specify colors in hex notation.

Color output will always be hex for alpha values of 1.0. If you use an alpha value below 1.0, RGBa values will be used.

Usage

You can use the colors in SCSS or CSS like this:

                                    

                                        .warning {

                                            border: solid 0.1rem var(--sf-color-warning-shade);
                                            background-color: var(--sf-color-warning);
                                            color: var(--sf-color-warning-contrast);
                                        }

                                    
                                

Since these colors are stored in CSS custom properties, you can easily create color themes using only CSS and/or JavaScript.