SGDS Background Color Utilities Skill

Helps developers use SGDS background color utilities that adapt to light/dark themes using semantic tokens.

Prerequisites

Required: Complete setup from sgds-utilities-setup skill first.

Theme files required: Background color utilities require both utility CSS and theme files (day.css and night.css) for theme-aware colors.

Core Concept

All SGDS background utilities use the sgds:bg-{variant}-{modifier} pattern with the sgds: prefix.

Background colors are theme-aware - they automatically adapt when toggling between day/night themes (unless using fixed variants).

Token Categories Overview

Component vs Page Level