skills.rest
GovTechSG
GovTechSGOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-theming
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ricardohg1998-createricardohg1998-create

design-system-forge

Define design tokens, base UI components, and governance artifacts with automated documentation.

Community
Advanced
LaPaGaYoLaPaGaYo

setup-deploy

Configure Nexus deployment settings and write the deploy contract to .planning/deploy/.

Community
Advanced
amarnath3003amarnath3003
4

Dataset Lab UI Kit - Replication Skill

Recreate a neumorphic Control Console design system with Tailwind CSS and React components.

Community
Advanced
kws-projectskws-projects
2

color-management

Manage design tokens in Tailwind CSS projects using OKLCH color spaces.

Official
Advanced