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 text), and accent 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
  • anchors
    The primary anchor 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 elements that need to provide subtle differentiation with white
  • medium
    General gray for elements like form field placeholders and disabled text over white
  • dark
    A dark slate gray for text and other near-black elements
  • white
    Bright white
  • black
    Pitch black
  • clear
    Transparent (no color)
  • ...and add your own!

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, $contrast-alpha: 0.90
                                                        $hex-accent-color: #91afe6,
                                                        $hex-color-dark: #3880ff,
                                                        $hex-contrast-color-dark: #ffffff, $contrast-alpha-dark: 0.80,
                                                        $hex-accent-color-dark: #91afe6
                                                    );
            
                                                    // SECONDARY COLOR
                                                    ...
scrollable

The color configuration will generate CSS custom properties like this: 

                                                
                                                    // PRIMARY COLOR
                                                    --sf-color-primary: #3880ff;
                                                    --sf-color-primary-contrast: rgba(255, 255, 255, 0.9);
                                                    --sf-color-primary-accent: #91afe6;
                                                    --sf-color-primary-dark: #3880ff;
                                                    --sf-color-primary-contrast-dark: rgba(255, 255, 255, 0.8);
                                                    --sf-color-primary-accent-dark: #91afe6;
            
                                                    // SECONDARY COLOR
                                                    ...
scrollable

Usage

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

                                                
            
                                                    .warning {
            
                                                        border: solid 0.1rem var(--sf-color-warning-accent);
                                                        background-color: var(--sf-color-warning);
                                                        color: var(--sf-color-warning-contrast);
                                                    }
scrollable

Since these colors are stored in CSS custom properties, you can easily create color themes using only CSS and/or JavaScript. And dark theme mode is handled automatically.

Auto Dark Mode

If you specify dark mode color variations for your color sets you will get auto-dark-mode for free! Whenever the device is switched to dark mode, the web application will automatically switch the color theme.