Color Mode

CSS Theming System Implementation

In this assignment, you will implement a complete theming system for a product showcase website. You will apply the CSS architecture patterns and theming techniques you learned this week, creating a professional-looking site that supports both light and dark modes with smooth transitions and proper color organization.

This assignment synthesizes everything you have learned: CSS custom properties, color functions including color-mix(), modern selectors, CSS nesting, and component-based organization following CUBE CSS or BEM principles. You will work with provided HTML and JavaScript, focusing entirely on creating maintainable, well-organized CSS.

Assignment Overview

You are provided with HTML structure for a product showcase page and complete JavaScript for theme management. Your task is to create all CSS from scratch, implementing a theming system that supports light and dark modes, uses modern CSS features, and follows proper architectural patterns.

Learning Objectives

Setup Instructions

1. Download Starter Files

Download the starter files from theming-system.zip. Extract the files and you will find:

2. Add to Your Portfolio

Create a new directory in your portfolio for this assignment: 


    portfolio/
    └── unit-2/
        └── theming-system/
            ├── index.html
            ├── theme.js
            └── styles.css

3. Understand the HTML Structure

Open index.html in your browser. The page will appear unstyled initially. Review the HTML structure to understand the components you need to style:

You will be warned several times during this assignment and in the code comments not to modify the HTML structure but there is one exception. If you choose to use BEM, you may modify the class names in the HTML to match the BEM naming convention.

4. Review the JavaScript

The provided theme.js file handles all theme management functionality. It detects system preferences, manages the theme toggle, and persists user choices to localStorage. Your CSS needs to work with the .dark-theme class that JavaScript adds to the document root.

Requirements

Your CSS implementation must meet all of the following requirements. Each requirement demonstrates your understanding of modern CSS architecture and theming techniques.

1. Theme System with Custom Properties

2. Use color-mix() for Theme Variations

3. Follow CSS Architecture Patterns

4. Use Modern CSS Features

5. Create Responsive Layout

6. Ensure Accessibility

7. Polish and Details

Implementation Strategy

1. Plan Your Color System

Before writing any CSS, plan your color palette. Choose a primary brand color and decide how it will work in both light and dark themes. Sketch out your semantic color variables and think about which colors need variations.

2. Set Up Your Architecture

Decide whether you will use CUBE CSS or BEM. Structure your CSS file with clear sections and comments. If you choose to create multiple CSS files for better organization, that is acceptable and even encouraged.

3. Define Custom Properties

Start by defining all your custom properties in the :root selector. Create your base color palette, then define semantic colors that reference the base colors. Set up the dark theme overrides in the .dark-theme selector.

4. Build Base Styles

Create your reset or normalize styles, set up typography, and establish base element styles. This is your foundation layer that everything else builds upon.

5. Create Layout Patterns

Build your layout system. If using CUBE CSS, create composition classes like .flow and .grid. Style the main structural elements: header, main content area, and footer.

6. Style Components

Style individual components: buttons, cards, navigation, filter buttons, and the theme toggle. Ensure each component works in both themes and includes all necessary states (hover, focus, active).

7. Add Responsive Behavior

Implement media queries to make the layout responsive. Test at multiple screen sizes and adjust as needed.

8. Test and Refine

Test both themes thoroughly. Check color contrast, verify all interactive states work, and ensure the layout responds properly at all screen sizes. Use browser DevTools to validate your implementation.

Example Patterns

Here are some patterns you should implement in your CSS:

Theme Variable Structure


    :root {
        /* Base palette */
        --blue-50: oklch(0.5 0.15 250);
        
        /* Semantic colors - light theme */
        --color-background: oklch(0.98 0 0);
        --color-text: oklch(0.2 0 0);
        --color-primary: var(--blue-50);
    }

    .dark-theme {
        /* Semantic colors - dark theme */
        --color-background: oklch(0.15 0 0);
        --color-text: oklch(0.95 0 0);
    }

    /* Support system preference */
    @media (prefers-color-scheme: dark) {
        :root:not(.dark-theme):not(.light-theme) {
            --color-background: oklch(0.15 0 0);
            --color-text: oklch(0.95 0 0);
        }
    }

Using color-mix()


    :root {
        --color-primary: oklch(0.5 0.15 250);
        
        /* Generate variations */
        --color-primary-light: color-mix(in oklch, var(--color-primary) 60%, white);
        --color-primary-dark: color-mix(in oklch, var(--color-primary) 80%, black);
        
        /* Hover states */
        --color-primary-hover: color-mix(in oklch, var(--color-primary) 90%, black);
    }

Component with Nesting


    .card {
        background: var(--color-surface);
        border-radius: 0.5rem;
        padding: 1.5rem;
        
        h3 {
            color: var(--color-heading);
            margin: 0 0 0.5rem 0;
        }
        
        p {
            color: var(--color-text-secondary);
            line-height: 1.6;
        }
        
        &:hover {
            box-shadow: 0 0.25rem 1rem var(--color-shadow);
        }
    }

Composition Classes (CUBE CSS)


    .flow > * + * {
        margin-block-start: var(--flow-space, 1rem);
    }

    .grid {
        display: grid;
        gap: var(--grid-gap, 2rem);
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

Testing Checklist

Before submitting, verify that your implementation meets these criteria:

Submission

Once you have completed your implementation and tested thoroughly, document your work and submit it for evaluation. Complete the form below with your implementation details and design decisions, then download the PDF and submit it to Canvas.

CSS Theming System Documentation
Implementation
Portfolio Link:
Architecture Choice
Which pattern did you use and why?
Color System
How did you use color-mix() to generate your theme?
Show specific examples of your color-mix() usage with actual CSS.
What did you learn about dark theme design?
Technical Implementation
Where did you use modern selectors (:is, :where, :has, :not) and why?
What accessibility features did you implement?
Reflection
What was most challenging and how did you solve it?
How will you apply these techniques in future work?

Evaluation Criteria

Your theming system will be evaluated on how effectively it demonstrates modern CSS techniques and creates a polished, accessible user experience:

Tips for Success