|
| 1 | +--- |
| 2 | +id: TASK-293 |
| 3 | +title: Add "Neon Love" theme preset (from Tauon Music Box) |
| 4 | +status: To Do |
| 5 | +assignee: [] |
| 6 | +created_date: '2026-03-07 23:13' |
| 7 | +labels: |
| 8 | + - frontend |
| 9 | + - theme |
| 10 | +dependencies: [] |
| 11 | +references: |
| 12 | + - 'app/frontend/styles.css (metro-teal theme pattern, lines 194-343)' |
| 13 | + - app/frontend/js/stores/ui.js (theme switching logic) |
| 14 | + - app/frontend/main.js (pre-Alpine theme init) |
| 15 | + - app/frontend/views/settings.html (theme preset buttons) |
| 16 | + - task-162 (Metro Teal implementation — prior art) |
| 17 | + - /Users/lance/Desktop/love.css (Love palette source) |
| 18 | + - >- |
| 19 | + /Users/lance/Desktop/tauon/Screenshot 2026-03-07 at 4.11.39 PM.png (visual |
| 20 | + reference) |
| 21 | +documentation: |
| 22 | + - 'https://love.holllo.cc (Love color palette)' |
| 23 | + - 'https://github.com/taiko2k/tauon/wiki/Theming (Tauon theme format)' |
| 24 | +priority: medium |
| 25 | +--- |
| 26 | + |
| 27 | +## Description |
| 28 | + |
| 29 | +<!-- SECTION:DESCRIPTION:BEGIN --> |
| 30 | +Add a third theme preset called "Neon Love", inspired by the Tauon Music Box theme of the same name. The theme uses the [Love color palette](https://love.holllo.cc) — dark purple backgrounds with a rainbow of neon accent colors. |
| 31 | + |
| 32 | +## Reference |
| 33 | + |
| 34 | +- **Love CSS palette**: `/Users/lance/Desktop/love.css` (MIT license, v0.1.0) |
| 35 | +- **Screenshot**: `/Users/lance/Desktop/tauon/Screenshot 2026-03-07 at 4.11.39 PM.png` |
| 36 | +- **Tauon source**: The Neon Love `.ttheme` file uses Love palette colors for its dark variant |
| 37 | +- **Existing theme to follow as pattern**: Metro Teal (`[data-theme-preset='metro-teal']` in `app/frontend/styles.css:194-343`) |
| 38 | + |
| 39 | +## Color Palette (Love Dark Variant) |
| 40 | + |
| 41 | +Backgrounds (deep purple): |
| 42 | +- `--db-1: #1F1731` (darkest, main bg) |
| 43 | +- `--db-2: #2A2041` (card/panel bg) |
| 44 | + |
| 45 | +Foreground (light lavender): |
| 46 | +- `--df-1: #F2EFFF` (primary text) |
| 47 | +- `--df-2: #E6DEFF` (secondary text) |
| 48 | + |
| 49 | +Accent rainbow (10 neon colors): |
| 50 | +- `--da-1: #F99FB1` (rose) |
| 51 | +- `--da-2: #FAA56C` (orange) |
| 52 | +- `--da-3: #D2B83A` (gold) |
| 53 | +- `--da-4: #96C839` (lime green — used for "now playing" indicator in Tauon) |
| 54 | +- `--da-5: #3BD18A` (emerald) |
| 55 | +- `--da-6: #3ECDBF` (teal) |
| 56 | +- `--da-7: #41C8E5` (cyan — primary accent in Tauon: buttons, seek bar, volume) |
| 57 | +- `--da-8: #98B9F8` (blue) |
| 58 | +- `--da-9: #D5A6F8` (violet) |
| 59 | +- `--da-10: #F99ADD` (magenta — album text in Tauon) |
| 60 | + |
| 61 | +Grays: |
| 62 | +- `--dg-1: #E2E2E2`, `--dg-2: #C6C6C6`, `--dg-3: #ABABAB` |
| 63 | + |
| 64 | +## Tauon Neon Love Color Assignments |
| 65 | + |
| 66 | +From the `.ttheme` file, these are how Tauon maps Love colors to UI elements: |
| 67 | +- Track title text: `#F2EFFF` (--df-1, lavender white) |
| 68 | +- Track artist: `#41C8E5` (--da-7, cyan) |
| 69 | +- Track album: `#F99ADD` (--da-10, magenta/pink) |
| 70 | +- Track index: `#3BD18A` (--da-5, emerald green) |
| 71 | +- Now playing indicator: `#96C839` (--da-4, lime green) |
| 72 | +- Favorite marker: `#D2B83A` (--da-3, gold) |
| 73 | +- Buttons active / seek bar / volume: `#41C8E5` (--da-7, cyan) |
| 74 | +- Menu background: `#1F1731` (--db-1) |
| 75 | +- Menu highlight: `#3C2864` (derived purple) |
| 76 | +- Playing highlight: cyan at 30 alpha |
| 77 | +- Selection highlight: lavender `#D2BEFF` at 15 alpha |
| 78 | + |
| 79 | +## Proposed MT CSS Variable Mapping |
| 80 | + |
| 81 | +``` |
| 82 | +[data-theme-preset='neon-love'] { |
| 83 | + --background: 268 37% 14%; /* #1F1731 */ |
| 84 | + --foreground: 251 100% 97%; /* #F2EFFF */ |
| 85 | + --card: 268 34% 19%; /* #2A2041 */ |
| 86 | + --card-foreground: 251 100% 97%; |
| 87 | + --popover: 268 34% 19%; |
| 88 | + --popover-foreground: 251 100% 97%; |
| 89 | + --primary: 191 76% 58%; /* #41C8E5 cyan */ |
| 90 | + --primary-foreground: 268 37% 14%; |
| 91 | + --secondary: 268 30% 22%; /* slightly lighter purple */ |
| 92 | + --secondary-foreground: 251 100% 97%; |
| 93 | + --muted: 268 30% 22%; |
| 94 | + --muted-foreground: 0 0% 67%; /* #ABABAB */ |
| 95 | + --accent: 191 76% 58%; /* cyan, same as primary */ |
| 96 | + --accent-foreground: 268 37% 14%; |
| 97 | + --destructive: 0 84% 60%; |
| 98 | + --destructive-foreground: 251 100% 97%; |
| 99 | + --border: 268 25% 25%; |
| 100 | + --input: 268 30% 22%; |
| 101 | + --ring: 191 76% 58%; |
| 102 | +
|
| 103 | + --mt-playing-bg: 268 40% 18%; /* subtle purple tint */ |
| 104 | + --mt-playing-fg: 81 55% 51%; /* #96C839 lime green */ |
| 105 | + --mt-row-even: 268 37% 14%; /* #1F1731 */ |
| 106 | + --mt-row-odd: 268 34% 16%; /* slightly lighter */ |
| 107 | + --mt-row-hover: 268 30% 22%; |
| 108 | + --mt-progress-bg: 268 25% 25%; |
| 109 | + --mt-progress-fill: 191 76% 58%; /* cyan */ |
| 110 | + --mt-toast-bg: hsl(191 76% 58%); |
| 111 | + --mt-toast-fg: #1F1731; |
| 112 | +} |
| 113 | +``` |
| 114 | + |
| 115 | +## Implementation Steps |
| 116 | + |
| 117 | +### 1. CSS (`app/frontend/styles.css`) |
| 118 | +- Add `[data-theme-preset='neon-love']` variable block (after metro-teal block, ~line 224) |
| 119 | +- Add component-specific overrides mirroring the metro-teal pattern (track rows, footer, progress bar, sidebar, titlebar, settings panels, etc.) |
| 120 | +- The neon-love theme is always dark mode (like metro-teal) |
| 121 | + |
| 122 | +### 2. Theme Store (`app/frontend/js/stores/ui.js`) |
| 123 | +- Add `'neon-love'` to the `setThemePreset()` validation array (line 144) |
| 124 | +- Add `'neon-love'` case to `applyThemePreset()` — force dark class like metro-teal does |
| 125 | + |
| 126 | +### 3. Pre-Alpine Init (`app/frontend/main.js`) |
| 127 | +- Add `'neon-love'` to the early theme application logic (~line 122-140) |
| 128 | + |
| 129 | +### 4. Settings UI (`app/frontend/views/settings.html`) |
| 130 | +- Add a third theme preset button "Neon Love" alongside "Light" and "Metro Teal" (~lines 47-62) |
| 131 | + |
| 132 | +### 5. Tests |
| 133 | +- Update any theme-related unit tests to include the new preset name |
| 134 | +- Add Playwright visual regression snapshot for neon-love if visual regression tests exist |
| 135 | +<!-- SECTION:DESCRIPTION:END --> |
| 136 | + |
| 137 | +## Acceptance Criteria |
| 138 | +<!-- AC:BEGIN --> |
| 139 | +- [ ] #1 Neon Love theme preset selectable in Settings > Appearance alongside Light and Metro Teal |
| 140 | +- [ ] #2 Theme uses Love dark palette: deep purple backgrounds (#1F1731, #2A2041), lavender text (#F2EFFF), cyan primary accent (#41C8E5) |
| 141 | +- [ ] #3 Now-playing track row uses lime green indicator (#96C839) matching Tauon's Neon Love |
| 142 | +- [ ] #4 All component overrides present: track rows, footer, progress bar, sidebar, titlebar, settings panels, borders |
| 143 | +- [ ] #5 Theme persists across app restart (saved to settings store) |
| 144 | +- [ ] #6 No flash of wrong theme on startup (pre-Alpine init handles neon-love) |
| 145 | +- [ ] #7 All existing tests pass with the new theme added |
| 146 | +- [ ] #8 deno lint, deno fmt, cargo clippy, cargo fmt all pass |
| 147 | +<!-- AC:END --> |
0 commit comments