skills.rest
vitakili
vitakiliCOMMUNITY
Explore all skills by this author →
GitHub

theme-visitor-components

Provide visitor-facing color mode and theme preset switching in Payload CMS.

9|1|Updated Oct 5, 2025
Search Tags:#frontend#ui-components#dark-mode#color-mode#theme-management#payloadcms#theme-switcher
One-click install
npx skills add https://github.com/vitakili/payload-plugins --skill theme-visitor-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-visitor-components
Source: https://github.com/vitakili/payload-plugins/tree/main/packages/theme-management/.claude/skills/theme-visitor-components
Command: npx skills add https://github.com/vitakili/payload-plugins --skill theme-visitor-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Site visitors often need a simple way to customize the look and feel of a Payload CMS site, including color modes and theme presets, without admin access or complex setup.

Core Features & Use Cases

  • ColorModeToggle: a accessible icon button to switch light/dark/auto modes with a ripple animation when supported.
  • ThemeSwitcher: a runtime preset switcher that applies CSS color presets and persists the choice to localStorage.
  • Use Case: End-user theming to improve accessibility and branding without admin changes.

Quick Start

Drop ColorModeToggle and ThemeSwitcher into the UI inside a ThemeProvider to enable end-user theming.

Frequently Asked Questions about theme-visitor-components

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

FAQPage Schema
How do I add a dark mode toggle for site visitors in Payload CMS?▼

To add a dark mode toggle for site visitors in Payload CMS, drop the ColorModeToggle component into your UI wrapped by ThemeProvider to enable accessible light, dark, and auto switching with ripple animations.

What's the best way to let users switch theme presets at runtime without admin access?▼

The best way to let users switch theme presets at runtime without admin access is using the ThemeSwitcher component, which applies CSS color presets and persists the user's choice to localStorage for future visits.

Does the visitor-facing theme switcher support server-side rendering?▼

Yes, the visitor-facing theme switcher supports server-side rendering through SSR-safe integration, ensuring that theme controls and color mode toggles hydrate correctly without layout shifts or hydration mismatches.

Can I implement end-user color mode controls without modifying the Payload CMS admin panel?▼

Yes, you can implement end-user color mode controls without modifying the Payload CMS admin panel by adding client-side UI components like ColorModeToggle and ThemeSwitcher directly into your front-end application.

How do accessibility features work in frontend theme management components?▼

Accessibility features in frontend theme management components work by providing accessible icon buttons for color mode switching and ensuring runtime preset changes are keyboard navigable and screen reader friendly within the ThemeProvider context.

Do I need to configure ThemeProvider before using ColorModeToggle and ThemeSwitcher?▼

Yes, you need to configure ThemeProvider before using ColorModeToggle and ThemeSwitcher, as these end-user theming components must be dropped into the UI inside the ThemeProvider wrapper to function correctly.

Related Skills

Explore More Design & Creative Skills→
vitakilivitakili
9

theme-management-setup

Install and configure the @kilivi-dev/payloadcms-theme-management plugin in Payload CMS v3 with Next.js App Router.

Community
Advanced
joshtoljoshtol
18

theme-implementer

Implement and test visual themes for emotive-mascot platform using CSS variables and localStorage persistence.

Community
Intermediate
ArnavPuriArnavPuri
3

dark-mode

Implement dark mode themes with CSS and JavaScript.

Community
Intermediate
adityaarsharmaadityaarsharma
2

orbit-designer-dark-mode

Automate dark mode audits for WordPress plugins with CSS and WCAG AA checks.

Community
Intermediate