Simplytheme Color setup

Introduction

This document provides an overview and explanation of the Simplytheme theming color setup in SCSS . The provided code is a structured system for defining and using color palettes for theming, which allows for easy adaptation between light and dark themes and enhance maintainability and flexibility.

Core Principles

At the heart of the Simplytheme theming color setup are three core principles:

1. Consistency

Individual color values must be assigned to a variable, and variables must be used across the project theming through out the project.

2. Adaptability

The setup is designed for easy adaptability for light and dark themes without excessive code duplication.

3. Maintainability

This setup organizes colors systematically, making it simpler to change and manage colors across the entire project.

Organizing Colors

The setup categorizes colors into four main groups:

1. Primary Colors

Primary colors represent your brand's core identity. By default, Simplytheme defines $brand-primary-1 and $brand-primary-2. These two colors anchor your brand's identity throughout the project and should not be renamed or removed.

The setup generates different shades of these primary colors, offering 11 variations from dark to light. If specific colors are required, create a new variable by adding -## at the end of the color variable depends on the shade darkness. More info for variations please check CSS Color Variables section.

Additional branding colors can be added, if the brand has excessive number of main branding colors, and those colors are not main branding colors, consider adding them in Secondary Colors section. Here’s a code example for Primary Colors:

2. Secondary Colors

Secondary colors are additional brand colors that complement the primary palette. It follows the same rules as Primary Colors if additional colors or shades need to be added. . By default, Simplytheme provides four secondary color variables. These should not be renamed or removed as they are integral to the theme setup. Here’s a code example for Secondary Colors:

3. Greyscale Palette

Greyscale colors are commonly used for text, backgrounds, borders, and dividers, in our setup, defining a single $grey color automatically generates 11 shades of grey for different usage purposes, ranging from darkest to lightest. Manual adjustments can be made for specific shades. $grey variable shouldn’t be renamed or removed. More info for variations please check CSS Color Variables section. Here’s a code example:

4. Descriptive Colors

Descriptive colors are used for specific functions, such as alert messages, to draw attention to important elements. Four variables are predefined for these purposes. They shouldn’t be renamed or removed. Here’s a code example:

CSS Color Variables

The key to the adaptability of this system lies in the use of CSS color variables. These variables make it easy to switch between light and dark themes without rewriting extensive code. For example, changing the primary color from a light to a dark theme only requires adjusting a SCSS variables that assigned to the CSS variable that’s using the same variable name that will apply to the entire theme rather than rewriting numerous additional codes.

The setup follows a systematic naming convention for CSS color variables, ensuring that you can easily select the appropriate color for different parts of your project.

The function being used at the code example below generates an array of shades from darkest to lightest, depends on the shade of the color, the number assigned to the color can be adjusted, also feel free to adjust the darken and lighten amount as needed. If specific colors need to be assigned to a value, overwrite it after the function:

The end result would provide us a list of CSS color variables as below, 00 being the darkest and 100 being the lightest:

Dark Theme Color Sets

Simplytheme is fully prepared for dark themes. By taking advantage of CSS variables, switching to dark mode is straightforward. When a dark theme is detected, different values can be assigned to the same CSS variables, significantly reducing the effort required to set up dark theme styles. Here’s an code example:

Enhancing Code Readability

To improve code readability and ease of access to colors, a helpful function color($name) is provided. This function is recommended for fetching colors based on their names or usage, ensuring a more maintainable and readable codebase. For example:

Conclusion

By following this color setup, you can efficiently manage and adapt your project's theming to different visual modes while maintaining a structured and maintainable SCSS codebase.

Link to Simplytheme color setup file: https://github.com/kalamuna/simplytheme/blob/main/src/sass/01-base/settings/_colors.scss