Skills
.Work. You
Rest

change-page-theme

Community

Customize page themes and dark mode.

Design & Creative#frontend#styling#customization#theme#dark mode#css variables
Authorshishiv30
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: change-page-theme
Download link: https://github.com/shishiv30/pure/archive/main.zip#change-page-theme

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.