The Color module lets theme administrators change the color schemes of a theme from the theme setting. It's a noteworthy feature that comes in handy while creating a flexible theme with a variant color palette that will be used across multiple brands; which was the case for exploration into the module.

A brief overview

The important components to make a custom Drupal theme compatible with the color module are:

  • A color.inc file where all the color schemes will be defined in hex values.
  • A stylesheet file that will use the color hex values for styling elements.
  • A library to specify the color stylesheet added globally to the theme.

This will create a theme admin form which will map the CSS color using the hex values mapped in the color.inc file. When the theme is enabled, the Color module makes a copy of the color stylesheet in the public:// directory. When the color scheme of the theme is changed, the file saved in public:// directory will be updated with the new hex values of the color.

Read more about it:

Using SASS with the color module

Let me be honest, this method is not specifically for SASS but can be used while using CSS as well.

Now, for the Color module to do it's magic it needs a stylesheet file where the CSS rules will be written. The blog, Integrating The Color Module Into Your Drupal 8 Theme lists out 2 methods approaches to set up the CSS. However, in my opinion, both the approaches even though have it's benefits but lacks usage of colors in a component-based design in a custom theme.

  1. Creating color classes will require the classes to be added to the element. However, personally, I don't like bloating CSS classes necessarily where it's not needed apart from a few selected global classes (ex: container)
  2. The second approach was to add all the selectors which need colors, but for this approach, the color stylesheet needs to be maintained for all the elements that might result in a huge file that will be difficult to debug & maintain.

Color assignment using CSS Variables

Variables are a great mechanism to manage value assignments to CSS rules. In SASS there a concept of variables that allows developers to assign values that are compiled in CSS rules.

CSS also provides variables(custom properties) that can be combined with SASS and benefit the Color module functionality to integrate with a component-based design.

As mentioned, a stylesheet is needed to have all the color rules. This will have all the colors defined in the color scheme of the theme. Other theme colors can also be added in the same file to maintain the consistency of color variables.


:root {
  // Theme color scheme
  --color-primary: #37b1bd;  
  --color-supporting-one: #ffd688;
  --color-supporting-two: #f48480;
  --color-supporting-three: #46316e;
  --color-supporting-four: #ab88b3;
  
  // Addtional colors
  --color--smoke: #707070;
  --color--dark-grey: #373a3c;
  --color--grey: #676565;
  --color--light-grey: #e6e6e6;
  --color--white: #fff;
  --color-black: #000;
}

This file will be added inside the SASS source directory with a .scss/.sass extension which when compiled will be converted to .css file but retain the same format.

Next, add a library entry in the theme to map the compiled color stylesheet file.


color:
  css:
    theme:
      dist/css/color.css: {}

Now, add this library globally in the theme under the libraries section


libraries:
  - theme/color
  - theme/global-styling

The color library needs to be at the highest level so that the color variables are available to all the stylesheets that follow. This will help when we write styles for smaller components like buttons. Since the color.css will be loaded at first it will be automatically available to all the stylesheets.

DO NOT import the color.scss file in any SASS file since the color.css will be loaded from the public:// directory. So, if the color.scss is explicitly imported in any SASS file then the color.css variables will be overwritten and the theme settings for colors will not be added when changed.

Conclusion

The Color module is an awesome module to manage multiple variants of a theme however, special care has to be taken during development on how to utilize the provided tool. When I got the requirement that the client wanted 5 different websites for their brands with the same theme but with different color schemes I started looked into using SASS. However, the maintainability of the theme would have been much difficult in that case and the Color module simplified it to many folds.