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

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


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);

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.