SCSS Color Shades Generator: Dynamic CSS Variable Creation for Theming

color-shades-generator.scss

// Import the Sass math module for division and other mathematical operations
@use "sass:math";

// Function to generate a series of color shades from a base color
@function generate-shades($base-color) {
    // Initialize an empty map to store the shades
    $shades: ();
    // Define the scale for the shades
    $scale: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
    
    // Iterate over each value in the scale to generate shades
    @each $value in $scale {
        // Determine if the shade should be lighter or darker than the base color
        $is-lighter: $value < 500;
        // Calculate the percentage to mix with white or black
        $percentage: if($is-lighter, 1 - math.div($value, 1000), math.div($value - 500, 500));
        // Choose white for lighter shades, black for darker
        $mix-color: if($is-lighter, #ffffff, #000000);
        // Generate the shade by mixing the base color with white or black
        $shade: mix($mix-color, $base-color, $percentage * 100%);
        // Add the generated shade to the map
        $shades: map-merge(
            $shades,
            (
                $value: $shade
            )
        );
    }
    // Return the map of generated shades
    @return $shades;
}

// Mixin to create CSS variables for the color shades
@mixin generate-color-vars($base-name, $base-color) {
    // Generate shades using the base color
    $shades: generate-shades($base-color);
    // Define CSS variables within the :root selector for global access
    :root {
        // Iterate over each shade to create a CSS variable
        @each $shade, $color in $shades {
            // The variable name includes the base name and the shade value
            --#{$base-name}-#{$shade}: #{$color};
        }
    }
}

This SCSS code snippet provides a powerful and flexible way to generate a series of color shades from a single base color. It utilizes the sass:math module for precise mathematical operations and includes a function (generate-shades) and a mixin (generate-color-vars). The generate-shades function creates a map of color shades by blending the base color with either white or black, depending on the desired lightness or darkness of the shade. The generate-color-vars mixin then iterates over this map to create CSS custom properties (variables) for each shade, making them available globally by default (when placed within the :root selector). This approach allows for easy theming and consistent color usage throughout a project.

SCSS Color Shades Generator: Dynamic CSS Variable Creation for Theming

The SCSS Color Shades Generator is a powerful tool designed to help developers generate a comprehensive set of color shades from a base color. These shades are then converted into CSS variables, making them easily accessible throughout your project for consistent theming.

Features

• Generate Color Shades: Automatically generate light and dark shades of a base color.
• CSS Variables: Output the shades as CSS custom properties.
• Flexible Theming: Easily adjust your theme colors by changing the base color.

How to Use

Step 1: Setup

Ensure you have SCSS set up in your project. This tool requires the use of the sass:math module for calculations.

Step 2: Include the Functions and Mixins

Add the following SCSS code to a file in your project, for example, functions.scss. This file contains the necessary function and mixin for generating color shades and corresponding CSS variables.

@use "sass:math";

@function generate-shades($base-color) {
    $shades: ();
    $scale: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
    @each $value in $scale {
        $is-lighter: $value < 500;
        $percentage: if($is-lighter, 1 - math.div($value, 1000), math.div($value - 500, 500));
        $mix-color: if($is-lighter, #ffffff, #000000);
        $shade: mix($mix-color, $base-color, $percentage * 100%);
        $shades: map-merge($shades, ($value: $shade));
    }
    return $shades;
}

@mixin generate-color-vars($base-name, $base-color) {
    $shades: generate-shades($base-color);
    :root {
        @each $shade, $color in $shades {
            --#{$base-name}-#{$shade}: #{$color};
        }
    }
}

Step 3: Generating Your Color Shades

To use the color shades generator, you'll need to include the functions.scss in your main SCSS file and call the mixin with your desired base color and name.

Example usage in your global.scss:

@use "path/to/functions" as funcs;

@include funcs.generate-color-vars('primary', #336699);

This will generate CSS variables for color shades named --primary-50, --primary-100, ..., --primary-950, which you can use anywhere in your CSS.

Step 4: Apply the Colors

Now that your color shades are defined as CSS variables, you can use them in your styles like so:

body {
    background-color: var(--primary-500);
    color: var(--primary-50);
}

Customization

You can generate multiple color palettes by calling the mixin with different base colors and names. This allows for extensive customization and theming options across your application.

By following these steps, you can integrate the SCSS Color Shades Generator into your project, enhancing your theming capabilities with dynamically generated color shades.

This Markdown guide provides a comprehensive overview of how to integrate and use the SCSS Color Shades Generator in a project, from setup to application, including examples and customization options.