Tw Theme Switching 3way

Theme Switcher Component

<!-- templates/components/_theme_switcher.html -->
<div x-data="{
  theme: localStorage.getItem('theme') || 'dark',
  themes: [
    { value: 'dark', label: 'Dark', icon: 'moon' },
    { value: 'light', label: 'Light', icon: 'sun' },
    { value: 'contrast', label: 'Contrast', icon: 'eye' }
  ],
  setTheme(t) {
    this.theme = t;
    document.documentElement.setAttribute('data-theme', t);
    localStorage.setItem('theme', t);
  }
}" class="flex gap-1 rounded-lg bg-[var(--color-bg-secondary)] p-1">
  <template x-for="t in themes" :key="t.value">
    <button @click="setTheme(t.value)"
            :class="theme === t.value
              ? 'bg-[var(--color-accent)] text-[var(--color-accent-text)]'
              : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'"
            class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
            :aria-pressed="theme === t.value"
            :title="t.label"
            x-text="t.label" x-cloak>
    </button>
  </template>
</div>

Head Script (FOUC prevention)

<script>
  (function() {
    const t = localStorage.getItem('theme')
      || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
    document.documentElement.setAttribute('data-theme', t);
  })();
</script>

Theme-Aware Component Example

<div class="rounded-lg border-2
            border-[var(--color-border)]
            bg-[var(--color-bg-secondary)]
            shadow-[0_2px_8px_var(--color-shadow)]">
  <div class="p-4 border-b border-[var(--color-border)]">
    <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">Title</h3>
  </div>
  <div class="p-4">
    <p class="text-[var(--color-text-secondary)]">Body content</p>
    <button class="mt-4 bg-[var(--color-accent)] text-[var(--color-accent-text)]
                   px-4 py-2 rounded-lg hover:bg-[var(--color-accent-hover)]">
      Action
    </button>
  </div>
</div>

Anti-Patterns

Red Flags

• Theme switcher not using the reusable component
• Hardcoded white/black text on accent backgrounds
• localStorage key not theme (inconsistent naming)
• Alpine.js x-show/x-if without x-cloak

Quality Gate

& .\.venv\Scripts\python.exe -m ruff check . --fix
& .\.venv\Scripts\python.exe -m ruff format .
& .\.venv\Scripts\python.exe manage.py check --settings=app.settings_dev

References

• templates/components/_theme_switcher.html — canonical component
• static/css/src/_themes.scss — all 3 theme definitions
• .claude/rules/tailwind-tokens.md — token rules