---
id: 9e9e93c7-6c34-42d9-ac04-99cbb3e320fa
type: solution
title: "Foundry VTT v13 Light/Dark Theme Implementation"
tags: [vagabond-rpg, foundryvtt, scss, theming, pattern]
importance: 0.8
confidence: 0.8
created: "2025-12-15T14:45:28.034857+00:00"
updated: "2025-12-15T14:45:28.034857+00:00"
---

Implemented light/dark theme system for Vagabond RPG Foundry VTT system. Key components: 1) _theme-variables.scss defines CSS custom properties on .vagabond class (light) and .vagabond.dark-theme class (dark). 2) All SCSS color variables (-*) converted to CSS custom properties (var(--color-*)). 3) Themes registered in system.json with name, label, and default flag. 4) For rgba() and darken() which can't use CSS vars directly, used hardcoded values. 5) Dark theme uses warm-tinted darks (#1e1a16 primary) with parchment-colored text (#e8dcc8). 6) Select dropdown arrows need separate SVG for each theme due to fill color. Pattern: Keep SCSS vars for non-themeable values (spacing, font-size, transitions), use CSS vars for all colors.