Gentle Theme

Accessible, colorblind-safe themes designed for extended coding sessions

Why? • Screenshots • Variants • Accessibility • Install

Why Gentle Theme?

Most themes look beautiful but fail at accessibility. Gentle Theme is different:

Designed for developers who spend long hours coding, especially those with:

• Light sensitivity or eye strain
• Color vision deficiency (colorblindness)
• Neurodivergent needs (ADHD, autism, sensory processing)
• Preference for calm, non-distracting interfaces

Screenshots

Gentle Light

Gentle Dark

Gentle Midnight

Variants

Light Themes

Dark Themes

Midnight Themes (OLED-optimized)

Accessibility

Colorblind-Safe Palette

Based on Wong's colorblind-safe palette and IBM accessibility research:

Color Family Mapping:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
STRUCTURAL    Purple     → Keywords, control flow
DATA          Teal-Green → Strings (NOT pure green)
              Amber      → Numbers, constants
CALLABLE      Blue       → Functions, methods
TYPES         Teal       → Classes, interfaces
MARKUP        Terracotta → HTML tags (NOT pure red)
NEUTRAL       Gray       → Variables, operators
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Why this works:

• Protanopia/Deuteranopia (red-green): Teal vs Terracotta distinguishable by luminance
• Tritanopia (blue-yellow): Blue vs Purple have different saturation levels
• All types: Colors differ in both hue AND luminance

Git Status Colors

Traditional red/green is replaced with colorblind-safe alternatives:

Reduced Cognitive Load

• 4 bracket colors (not 6) - easier to track nesting
• Consistent semantics - same colors mean same things across all 6 themes
• Balanced saturation - no "loud" colors competing for attention

WCAG Compliance

All text meets WCAG AA (4.5:1 minimum contrast):

• Optimized for extended reading (not maximum contrast which causes fatigue)
• Comments visible but not competing with code

Installation

VS Code Marketplace

1. Open Extensions (Ctrl+Shift+X / Cmd+Shift+X)
2. Search "Gentle Theme"
3. Click Install
4. Ctrl+K Ctrl+T / Cmd+K Cmd+T → Select variant

Manual

cd ~/.vscode/extensions
git clone https://github.com/your-username/gentle-theme.git
# Restart VS Code

Color Palette Reference

Syntax Colors (Light / Dark)

Bracket Colors

Only 4 colors for reduced cognitive load:

Recommended Settings

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.cursorBlinking": "solid",
  "editor.smoothScrolling": true
}

For Light Sensitivity

1. Use Warm variants
2. Reduce monitor brightness to 40-60%
3. Enable OS blue light filter

Customization

{
  "workbench.colorCustomizations": {
    "[Gentle Dark]": {
      "editor.background": "#1A1C20"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Gentle Dark]": {
      "comments": "#707888"
    }
  }
}

Contributing

When contributing:

• All colors must pass WCAG AA contrast
• Test with colorblind simulators (Coblis, Color Oracle)
• Avoid pure black/white
• Consider neurodivergent users

License

MIT

Made with care for developers who need a gentler coding experience.
_{Colorblind-safe • Eye-friendly • Neurodivergent-inclusive}