Create or migrate a root stylesheet implementing CSS-only light, dark, and system color modes.
npx skills add https://github.com/alvis/.agents --skill css-alvis
Please help me install this Agent Skill. Skill: css Source: https://github.com/alvis/.agents/tree/main/plugins/web/skills/css Command: npx skills add https://github.com/alvis/.agents --skill css-alvis
:root[data-theme] contract with a two-tier token system, without touching JavaScript or components. ## Core Features & Use Cases - Stylesheet scaffolding: Creates theme.css, globals.css, or app.css with the full light/dark/system color-mode contract using @layer theme, prefers-color-scheme media queries, and data-theme attribute selectors. - Migration with approval gates: Detects conflicting setups like .dark classes, Tailwind darkMode: 'class', or JS-driven theming, then presents a bounded migration plan and waits for explicit approval before editing anything beyond the target stylesheet. - Two-tier token wiring: Defines tier-one --theme-light-*/--theme-dark-* source values mapped to tier-two --ui-* semantic tokens, preserving existing custom colors, imports, and layer order. - Use Case: A Next.js project uses Tailwind class-based dark mode and you want system-preference support. The skill detects the conflict, proposes switching to darkMode: ['selector', '[data-theme="dark"]'], and rewrites the root stylesheet to the attribute-based contract after your approval. ## Quick Start Use the css skill to set up light, dark, and system color modes in my project's globals.css and migrate away from class-based dark mode.High-intent search queries and answers about installing and using this skill.
Define tier-one --theme-light-* and --theme-dark-* custom properties, map them to --ui-* semantic tokens, and use :root[data-theme] selectors for explicit modes plus prefers-color-scheme media queries on :root:not([data-theme]) for system mode. Place all branches inside @layer theme with matching color-scheme values.
Replace darkMode: 'class' with darkMode: ['selector', '[data-theme="dark"]'] in the Tailwind config, or remove the option entirely on Tailwind v4 where the selector strategy is default. Then rewrite theme selectors from .dark to :root[data-theme="dark"] in the root stylesheet.
Yes, it reads tailwind.config and postcss.config to detect conflicts and composes with Tailwind @theme, which owns brand semantics while the skill's @layer theme block owns per-mode palettes. A separate runtime-toggle reference covers Next.js App Router integration for the optional JavaScript toggle.
System mode is expressed by the absence of the data-theme attribute, resolved via prefers-color-scheme media queries targeting :root:not([data-theme]). Setting data-theme="system" or an empty value does not work; the attribute must be removed entirely.
No, the workflow preserves custom colors, imports, layer order, explanatory comments, and unknown token roles. Destructive changes like replacing class-mode selectors require explicit approval first, and the stylesheet is never wholesale replaced to match the template.
Avoid it when you need runtime toggle JavaScript implemented in the same pass, component-level styling, or brand semantics managed by Tailwind @theme. The skill only edits the root stylesheet and hands off runtime toggling to a separate consumer recipe.
cromesdkInstalls and configures Tailwind CSS v4 in Angular 20 workspaces with PostCSS setup and stylesheet wiring.
rangojsImplements light/dark mode theming with FOUC prevention in Rango router applications.
NextSpark-jsGuide Tailwind CSS v4 theming with CSS variables and next-themes in Next.js.
syncfusionApply and customize Syncfusion Vue themes with CSS variables and Theme Studio.