From dde699e3f467329febab0d1f1d4a2c2f245b72fa Mon Sep 17 00:00:00 2001 From: w33ble Date: Sun, 11 Jan 2026 20:36:59 -0700 Subject: [PATCH] feat: change to dark mode theme based on dracula midnight colors --- index.html | 70 ++++++++++++++++++------------------ memory-bank/activeContext.md | 1 + memory-bank/progress.md | 23 ++++++------ src/main.ts | 16 ++++----- tailwind.config.js | 19 +++++++++- 5 files changed, 74 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index 6b792a7..6581a36 100644 --- a/index.html +++ b/index.html @@ -5,26 +5,26 @@ Gridfinity Calculator - +
-

Gridfinity Calculator

-

Plan your modular storage layout

+

Gridfinity Calculator

+

Plan your modular storage layout

-
-
+
+

Drawer Dimensions

- -
- - + +
+ +
@@ -32,41 +32,41 @@
- - + +
- - + +
- - + +
-
-
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 1170181..5e4b8c0 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -16,6 +16,7 @@ - Setting up the Vite/TypeScript/Tailwind environment. ## Active Decisions +- **Dark Mode Implementation**: Adopted a Dracula Midnight theme (`#21222c` background) as the primary interface style. Added custom Dracula color palette to `tailwind.config.js`. - Using **Vite** for the build tool. - Using **Vanilla TypeScript** to avoid framework overhead. - Using **Vitest** for unit testing calculation logic. diff --git a/memory-bank/progress.md b/memory-bank/progress.md index 99ea0b8..63e5a37 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -1,18 +1,19 @@ # Progress Tracking ## Milestones -- [ ] Initial Environment & Docs Setup -- [ ] Core Calculation Engine -- [ ] Web UI & Integration -- [ ] Final Build & Polish +- [x] Initial Environment & Docs Setup +- [x] Core Calculation Engine +- [x] Web UI & Integration +- [x] Final Build & Polish +- [x] Firebase deployment ## Todo List - [x] Create project structure - [x] Initialize Memory Bank documents -- [ ] Create Blueprint documents (PRD, Architecture) -- [ ] Project setup (Vite, TS, Tailwind, Vitest) -- [ ] Implement `src/calculator.ts` -- [ ] Write tests in `src/calculator.test.ts` -- [ ] Implement `index.html` UI -- [ ] Implement `src/main.ts` glue code -- [ ] Verify build output +- [x] Create Blueprint documents (PRD, Architecture) +- [x] Project setup (Vite, TS, Tailwind, Vitest) +- [x] Implement `src/calculator.ts` +- [x] Write tests in `src/calculator.test.ts` +- [x] Implement `index.html` UI +- [x] Implement `src/main.ts` glue code +- [x] Verify build output diff --git a/src/main.ts b/src/main.ts index a474c34..4f07338 100644 --- a/src/main.ts +++ b/src/main.ts @@ -70,15 +70,15 @@ function updateResults() { function setUnitStyles(unit: 'mm' | 'in') { if (unit === 'in') { - unitInBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm'); - unitInBtn.classList.remove('text-slate-600', 'hover:text-slate-900'); - unitMmBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm'); - unitMmBtn.classList.add('text-slate-600', 'hover:text-slate-900'); + unitInBtn.classList.add('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm'); + unitInBtn.classList.remove('text-dracula-comment', 'hover:text-dracula-foreground'); + unitMmBtn.classList.remove('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm'); + unitMmBtn.classList.add('text-dracula-comment', 'hover:text-dracula-foreground'); } else { - unitMmBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm'); - unitMmBtn.classList.remove('text-slate-600', 'hover:text-slate-900'); - unitInBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm'); - unitInBtn.classList.add('text-slate-600', 'hover:text-slate-900'); + unitMmBtn.classList.add('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm'); + unitMmBtn.classList.remove('text-dracula-comment', 'hover:text-dracula-foreground'); + unitInBtn.classList.remove('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm'); + unitInBtn.classList.add('text-dracula-comment', 'hover:text-dracula-foreground'); } } diff --git a/tailwind.config.js b/tailwind.config.js index dca8ba0..57840ed 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,24 @@ export default { "./src/**/*.{js,ts,jsx,tsx}", ], theme: { - extend: {}, + extend: { + colors: { + dracula: { + darker: '#21222c', + dark: '#282a36', + currentLine: '#44475a', + foreground: '#f8f8f2', + comment: '#6272a4', + cyan: '#8be9fd', + green: '#50fa7b', + orange: '#ffb86c', + pink: '#ff79c6', + purple: '#bd93f9', + red: '#ff5544', + yellow: '#f1fa8c', + } + } + }, }, plugins: [], }