playbooks

home / skills / jeremylongshore / claude-code-plugins-plus-skills / windsurf-theme-customization

windsurf-theme-customization skill

/plugins/saas-packs/skill-databases/windsurf/skills/windsurf-theme-customization

This skill configures Windsurf themes and accessibility settings to optimize readability and compliance across fonts, colors, and UI scaling.

npx playbooks add skill jeremylongshore/claude-code-plugins-plus-skills --skill windsurf-theme-customization

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
1.9 KB
---
name: "windsurf-theme-customization"
description: |
  Configure Windsurf themes and visual settings for accessibility. Activate when users mention
  "change theme", "customize colors", "accessibility settings", "visual preferences",
  or "dark mode". Handles theme configuration and accessibility compliance. Use when working with windsurf theme customization functionality. Trigger with phrases like "windsurf theme customization", "windsurf customization", "windsurf".
allowed-tools: Read,Write,Edit
version: 1.0.0
license: MIT
author: "Jeremy Longshore <[email protected]>"
---

# Windsurf Theme Customization

## Overview

This skill enables comprehensive theme customization within Windsurf. It covers color schemes, font configurations, UI scaling, and accessibility settings. Proper theme configuration reduces eye strain, improves code readability, and ensures compliance with accessibility standards like WCAG 2.1 for team members with visual impairments.

## Prerequisites

- Windsurf IDE installed
- Understanding of accessibility requirements
- Color vision considerations for team
- Preferred font selections
- Display resolution and scaling needs

## Instructions

1. **Select Base Theme**
2. **Configure Colors**
3. **Set Up Fonts**
4. **Enable Accessibility Features**
5. **Verify Compliance**


See `{baseDir}/references/implementation.md` for detailed implementation guide.

## Output

- Customized theme configuration
- Font settings optimized for readability
- Accessibility-compliant color scheme
- Cross-panel consistent styling

## Error Handling

See `{baseDir}/references/errors.md` for comprehensive error handling.

## Examples

See `{baseDir}/references/examples.md` for detailed examples.

## Resources

- [Windsurf Theme Guide](https://docs.windsurf.ai/features/themes)
- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [Accessible Color Palettes](https://docs.windsurf.ai/guides/accessibility)

Overview

This skill enables comprehensive theme customization within Windsurf, focusing on color schemes, font choices, UI scaling, and accessibility settings. It helps teams reduce eye strain, improve code readability, and meet accessibility standards such as WCAG 2.1. Use it to create consistent, cross-panel visual styles that suit individual preferences and organizational requirements.

How this skill works

The skill walks through selecting a base theme, configuring color palettes with accessibility contrast checks, and setting font families and sizes for optimal readability. It enables accessibility features like high-contrast modes, reduced motion, and scalable UI controls, then validates the configuration against WCAG 2.1 guidelines. Finally, it outputs a ready-to-apply Windsurf theme package and a short verification report.

When to use it

  • You want to switch to dark mode or any alternate theme across Windsurf panels.
  • You need to customize colors and fonts for team members with visual impairments.
  • Preparing a theme that must meet WCAG 2.1 contrast and readability requirements.
  • You want consistent styling across editor, terminal, and UI panels.
  • Setting up default visual preferences for a new workspace or onboarding.

Best practices

  • Start from a well-tested base theme before making wide changes to avoid regressions.
  • Run automated contrast checks and manual reviews with real users who have accessibility needs.
  • Prefer semantic color tokens (background, surface, accent, error) over hard-coded hex values.
  • Keep font sizes scalable and avoid relying solely on weight for emphasis.
  • Document theme choices and provide a simple toggle to revert to defaults.

Example use cases

  • Create a high-contrast dark theme for low-light coding sessions and verify WCAG AA compliance.
  • Configure a dyslexia-friendly font and increased line height for a developer who requests it.
  • Automate theme rollout across a team with consistent accent colors and readable font settings.
  • Adjust UI scaling and spacing for a high-DPI monitor to improve readability without breaking layouts.
  • Provide multiple saved presets (default, accessibility, compact) for quick switching.

FAQ

Will the skill automatically enforce WCAG compliance?

The skill runs contrast and accessibility checks and flags violations, but final compliance should include manual testing with assistive technologies.

Can I apply the customized theme across multiple workspaces?

Yes. The skill exports theme packages that can be imported into other Windsurf workspaces for consistent application.

Does it support per-panel styling (editor vs terminal)?

It allows per-panel color and font adjustments so you can tailor the editor, terminal, and UI panels independently while keeping overall coherence.