skills.rest
chuan-khuna
chuan-khunaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

add-theme

Create a CSS preset and register it in global styles and ThemeToggle.

3|1|Updated Mar 5, 2024
Search Tags:#theming#web-development#ui-design#color-palette#theme-toggle#add-theme#css-preset
One-click install
npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill add-theme-chuan-khuna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-theme
Source: https://github.com/chuan-khuna/digital-garden-2024/tree/main/project-skills/add-theme
Command: npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill add-theme-chuan-khuna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Add a new visual theme to the digital garden site by creating a CSS preset, importing it in global styles, and wiring the ThemeToggle component.

Core Features & Use Cases

  • Create a CSS preset in src/styles/presets named after the theme and ensure all CSS variables use oklch values.
  • Update src/styles/global.css to import the new preset and ensure theme is loaded site-wide.
  • Extend ThemeToggle.astro to include the new theme, map syntax highlighting, and expose a toggle button for it.

Quick Start

Define a new theme by creating a CSS preset, importing it in global styles, and updating ThemeToggle to expose the new option.

Frequently Asked Questions about add-theme

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

FAQPage Schema
How do I add a new visual theme to my digital garden site?▼

Yes, you can create custom color palettes for web development by defining a named CSS preset. The process requires ensuring all CSS variables within the preset use oklch values for accurate color representation.

How do I wire a ThemeToggle component to switch CSS presets?▼

You wire a ThemeToggle component by modifying ThemeToggle.astro to register the new theme, map syntax highlighting, and expose a toggle button. This allows users to switch between different CSS presets dynamically.

Do I need to use oklch values when creating a CSS preset for theming?▼

You extend ThemeToggle.astro by including the new theme, mapping syntax highlighting, and exposing a toggle button for it. This ensures the theme is loaded site-wide and users can select it from the toggle interface.

What is the best way to ensure a new theme loads site-wide in Astro?▼

The best way to ensure a new theme loads site-wide is to update src/styles/global.css to import the new preset. This guarantees the visual style is applied across all pages of the digital garden site.

Related Skills

Explore More Design & Creative Skills→
miptah21miptah21
2

setting-up-astro-project

Initialize Astro CLI Airflow projects with directory structure and dependency configuration.

Community
Intermediate
adperemadperem

normalize

Audit and realign UI features to match design system tokens and patterns.

Community
Advanced
anderskevanderskev
75

tailwind-v4

Configure Tailwind CSS v4 themes using @theme directives and OKLCH colors.

Community
Advanced
doncan-orozcodoncan-orozco

theme-factory

Manage and apply UI themes to Papyro applications via Tailwind CSS.

Community
Intermediate