Colors

Color Schemes

Effective color schemes are crucial for maintaining brand identity and ensuring a cohesive user experience.

ModulateCSS provides a systematic approach to create and apply adaptable color schemes, accommodating various user preferences, including light and dark modes.

Concept

Color schemes are a set of matching colors that are assigned as a whole to a module or widget to set and change the colors within that area with just a single CSS class.

Illustration of the Module Grid — **Figure 1:** Color Schemes Concept

Defining Brand Color Palettes

To establish a consistent visual identity, start by defining a primary color palette. This should include your brand's primary colors along with essential UI colors like text and background shades. Use the CSS @layer directive to encapsulate these definitions within the colors layer, ensuring they are easy to manage and override if needed.

theme.css

@layer theme {
    :root {
        --c-text-black: rgba(0, 0, 0, 0.87);
        --c-text-white: rgba(255, 255, 255, 0.87);
        --c-primary: rgba(105, 84, 196, 1);
        --c-white: rgba(255, 255, 255, 1);
        --c-gray-500: rgba(100, 100, 100, 1);
        --c-black: rgba(0, 0, 0, 1);
        /* Define a complete grayscale range from --c-gray-50 to --c-gray-900 for detailed theming */
    }
}

Implementing Light and Dark Themes

For an inclusive design that adapts to user preferences for light or dark themes, define color schemes that reflect your brand while ensuring accessibility and readability.

Light Theme: Assign light theme colors using classes that differentiate background, text, and highlight elements. This separation facilitates rapid adjustments and ensures consistency across interfaces.

theme.css

@layer theme {
    .csl-1, body {
        --cs-background: var(--c-white);
        --cs-standard: var(--c-text-black);
        --cs-highlight: var(--c-text-black);
    }
 
    .csl-2 {
        --cs-background: var(--c-gray-50);
        --cs-standard: var(--c-text-black);
        --cs-highlight: var(--c-primary);
    }
 
    /* Define light stage colors for thematic elements */
    .bgl-1, body { 
        --cs-stage: var(--c-white); 
    }
 
    .bgl-2 { 
        --cs-stage: var(--c-gray-50); 
    }
}

Dark Theme: Using the CSS media feature prefers-color-scheme, specify alternative colors for users who prefer dark modes. This approach enhances visual comfort and reduces eye strain in low-light conditions.

theme.css

@layer theme {
    @media (prefers-color-scheme: dark) {
        .csd-1, body {
            --cs-background: var(--c-gray-800);
            --cs-standard: var(--c-text-white);
            --cs-highlight: var(--c-text-white);
        }
 
        .csd-2 {
            --cs-background: var(--c-primary);
            --cs-standard: var(--c-text-white);
            --cs-highlight: var(--c-text-white);
        }
 
        /* Define dark stage colors for dynamic theming */
        .bgd-1, body { 
            --cs-stage: var(--c-black); 
        }
 
        .bgd-2 { 
            --cs-stage: var(--c-gray-800); 
        }
    }
}

Practical Application of Color Schemes

Showcasing the application of these color schemes can help developers understand how to use them effectively within their projects.

Below is an example of how to apply the defined color schemes to a web page structure, ensuring that the colors adapt dynamically to both light and dark preferences.

theme.css

.module-example {
    background: var(--cs-stage);
    header {
        background: var(--cs-background);
        h1 {
            color: var(--cs-highlight);
        },
        p {
            color: var(--cs-standard);
        }
    }
}

Default color schemes

If color schemes are not explicitly applied to an area, the default color schemes are used.

theme.html

<section class="module-example module-grid framed">
    <header>
        <h1>Headline</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p>
    </header>
</section>

Alternative color schemes

The default color schemes can be changed simply by specifying the color scheme css classes.

theme.html

<section class="module-example module-grid framed csl-2 bgl-2 csd-2 bgd-2">
    <header>
        <h1>Headline</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p>
    </header>
</section>

Nested color schemes

To change the color schemes for a nested widget, the color scheme CSS classes must be added there. In this case, if desired, the default color schemes must also be explicitly defined, as otherwise the color schemes would be inherited from the parent module.

theme.html

<section class="module-example module-grid framed csl-2 bgl-2 csd-2 bgd-2">
    <header>
        <h1>Headline</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p>
    </header>
    <section class="widget-example csl-1 bgl-1 csd-1 bgd-1">
        <!-- Inner HTML of the widget -->
    </section>
</section>

By implementing these structured color schemes, developers can maintain consistency and adaptability across different platforms and user settings, enhancing the overall accessibility and aesthetic of the web project.