skills.rest
shishiv30
shishiv30COMMUNITY
Explore all skills by this author →
WebsiteGitHub

change-page-theme

Modify web page themes by updating CSS custom properties for hue, saturation, and lightness.

Updated Dec 17, 2022
Search Tags:#frontend#styling#customization#theme#dark mode#css variables
One-click install
npx skills add https://github.com/shishiv30/pure --skill change-page-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: change-page-theme
Source: https://github.com/shishiv30/pure/tree/main/.cursor/skills/change-page-theme
Command: npx skills add https://github.com/shishiv30/pure --skill change-page-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows users to easily modify the visual appearance of web pages by changing color themes and enabling dark mode, enhancing user experience and accessibility.

Core Features & Use Cases

  • Global Theme Updates: Modify CSS custom properties in a central theme.js file for site-wide changes.
  • Per-Page Overrides: Apply specific theme settings to individual pages via their configuration.
  • Dark Mode Support: Automatically adjusts theme for dark mode with predefined lightness rules.
  • Logo Customization: Update logo images and sizes for different themes.
  • Use Case: A marketing team wants to quickly brand a new landing page with a specific color palette and ensure it looks good in both light and dark modes.

Quick Start

Edit the data/theme.js file to change the --color-major-hue to 180 for a cyan theme.

Frequently Asked Questions about change-page-theme

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

FAQPage Schema
How do I change CSS custom properties for a global web page theme?▼

To change a global web page theme, you modify CSS custom properties like hue, saturation, and lightness in a central theme data file, which applies site-wide styling updates dynamically through inline CSS injection.

How does dark mode support work with CSS variables?▼

Dark mode support works by automatically adjusting CSS custom properties using predefined lightness rules, ensuring theme variations maintain visual accessibility when switching between light and dark modes.

Can I customize logo assets for different page themes?▼

Yes, you can customize logo assets for different page themes by updating logo images and sizes within the structured theme data file, managed alongside server-side generation.

What is the best way to update website styling for dark mode without external dependencies?▼

The best way to update website styling for dark mode without external dependencies is to use a structured theme data file that adjusts CSS custom properties for lightness variations and injects styles inline.

Related Skills

Explore More Design & Creative Skills→
Shaarav4795Shaarav4795

tailwind-theme-builder

Generate CSS-variable themes for Tailwind v4 with shadcn/ui in React.

Community
Intermediate
LamseyahEliasLamseyahElias

sketch

Generate 2-3 standalone HTML variants for side-by-side UI design comparison.

Community
Intermediate
Kevin-Liu-01Kevin-Liu-01
16

reticle-design-system

Organize UI design tokens, layout primitives, and components into a cohesive system.

Community
Intermediate
darthlinuxerdarthlinuxer

tailwind-patterns

Define Tailwind v4 design tokens and responsive patterns in CSS-first stylesheets.

Community
Intermediate