Skip to content

light theme toggle implementation#4

Open
dima648228 wants to merge 1 commit intovnmoorthy:mainfrom
dima648228:main
Open

light theme toggle implementation#4
dima648228 wants to merge 1 commit intovnmoorthy:mainfrom
dima648228:main

Conversation

@dima648228
Copy link
Copy Markdown

What & why

Implemented light/dark theme toggle feature

How

Added a persisted theme slice (light | dark) to the Zustand store in src/state/store.ts.

Dynamic Styling: updated tailwind.config.ts to use CSS variables for the ink palette. This allows the ui to swap colors automatically when the .dark class is toggled on the root element, while preserving support for tailwind's opacity modifiers

User Interface:

  • Added a theme toggle button in TopBar.tsx.
  • Updated HelpModal.tsx to document the new shortcut.
  • Map Integration: Synchronized the MapLibre basemap with the application theme. Switching to light mode now swaps the CartoDB source to light_all.

Checklist

  • pnpm typecheck clean
  • pnpm test passing
  • pnpm build succeeds
  • If a lib was changed, unit tests are added or updated
  • If a UI feature was added, the README feature table is updated

Screenshots / GIFs

Result

Light mode:
image

Dark mode
image

@dima648228 dima648228 changed the title light mode implementation light theme toggle implementation Apr 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant