sgds-theming

Customize SGDS application themes with CSS token overrides.

18|10|Updated Aug 30, 2022

Search Tags:#branding #theming #dark-mode #css-tokens #font #govtech

Ready to run

npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-theming

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sgds-theming
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-theming
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enable consistent branding and theming across SGDS apps by centralising color tokens, fonts, and theme modes.

Core Features & Use Cases

Override brand colours via CSS tokens for a unified look.
Switch between day and night modes with a simple class toggle and theme files.
Apply GovTech branding using pre-defined themes to ensure consistency across products.

Quick Start

Import day theme first, then add your custom CSS overrides and optional night theme.

Frequently Asked Questions about sgds-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I customize SGDS branding with CSS tokens and color overrides?▼

Customize SGDS branding by overriding centralized CSS tokens for colors and fonts. Import day.css before applying your custom CSS overrides to ensure a unified brand look across all components and products.

How do I enable dark mode in an SGDS application?▼

Enable dark mode by adding the sgds-night-theme class to your application. This activates the optional night theme file, allowing users to switch between day and night modes through a simple class toggle.

Why does my CSS theming override not work with SGDS?▼

SGDS theming overrides fail when day.css is not loaded first. You must import the day theme file before adding custom CSS overrides to ensure CSS variables propagate changes correctly across all components.

Can I apply GovTech branding consistently across multiple SGDS products?▼

Apply GovTech branding consistently across SGDS products using pre-defined themes. This centralizes color tokens, fonts, and theme modes to solve visual fragmentation and ensure a unified look across your applications.

What is the best way to manage day and night theme modes for SGDS?▼

The best way to manage SGDS theme modes is loading day.css for default styling and toggling the sgds-night-theme class for dark mode. CSS variables then propagate your branding changes automatically across both modes.

Do I need external dependencies to theme my SGDS application?▼

No external dependencies are required to theme SGDS applications. The Skill relies solely on loading the day theme file and applying CSS variable overrides to propagate visual changes across your components.