tests/README_THEME_TESTS.md

Theme Consistency Tests

Overview

This directory contains property-based tests for the Admin UI Modernization feature, specifically testing theme consistency across dark and light modes.

Test Files

1. verify_theme.js (Node.js)

A command-line verification script that checks:

• All required CSS custom properties are defined in dark theme
• All required overrides are defined in light theme
• Property naming consistency

Run with:

npm run test:theme

or directly:

node tests/verify_theme.js

2. test_theme_consistency.html (Browser-based)

An interactive HTML test page that performs comprehensive testing:

• Required CSS custom properties verification
• WCAG AA contrast ratio testing (4.5:1 for normal text)
• Property-based theme switching simulation (100 iterations)
• Visual color swatches and contrast demonstrations

Run with: Open the file in a web browser:

file:///path/to/tests/test_theme_consistency.html

Or serve it with a local server:

python -m http.server 8888
# Then open: http://localhost:8888/tests/test_theme_consistency.html

Property Being Tested

Property 1: Theme consistency

For any theme mode (light/dark), all CSS custom properties should be defined and color contrast ratios should meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text)

Validates: Requirements 1.4, 5.3, 14.3

Required Properties

The tests verify that the following CSS custom properties are defined:

Colors

• color-primary, color-accent, color-success, color-warning, color-error
• bg-primary, bg-secondary
• text-primary, text-secondary
• glass-bg, glass-border, border-color

Gradients

• gradient-primary, gradient-glass

Typography

• font-family-primary, font-size-base, font-weight-normal
• line-height-normal, letter-spacing-normal

Spacing

• spacing-xs, spacing-sm, spacing-md, spacing-lg, spacing-xl

Shadows

• shadow-sm, shadow-md, shadow-lg

Blur

• blur-sm, blur-md, blur-lg

Transitions

• transition-fast, transition-base, ease-in-out

Light Theme Overrides

The light theme must override these properties:

• bg-primary, bg-secondary
• text-primary, text-secondary
• glass-bg, glass-border, border-color

WCAG AA Contrast Requirements

• Normal text: 4.5:1 minimum contrast ratio
• Large text: 3.0:1 minimum contrast ratio

The tests verify these combinations:

• Primary text on primary background
• Secondary text on primary background
• Primary text on secondary background

Test Results

✓ PASSED - All tests passed successfully

• All required CSS custom properties are defined
• Light theme overrides are properly configured
• Contrast ratios meet WCAG AA standards

Implementation Details

The design tokens are defined in:

static/css/design-tokens.css

This file contains:

• :root selector for dark theme (default)
• [data-theme="light"] selector for light theme overrides