Skip to content

feat: dark mode + MUI component migration#658

Draft
ShyamThangaraj wants to merge 11 commits intoicssc:devfrom
ShyamThangaraj:feat/dark-mode
Draft

feat: dark mode + MUI component migration#658
ShyamThangaraj wants to merge 11 commits intoicssc:devfrom
ShyamThangaraj:feat/dark-mode

Conversation

@ShyamThangaraj
Copy link
Copy Markdown
Contributor

Summary

Adds full dark mode support to PeterPlate and cleans up the codebase by replacing hardcoded HTML elements with proper MUI components. Used MUI's built-in theming where possible, and fell back to Tailwind dark: variants where MUI didn't play nice. Also fixed some pre-existing light mode color issues along the way. Theme switching is handled by next-themes.

Changes

  • Set up the MUI dark palette and updated the dark mode CSS variables to match the Figma design
  • Replaced hardcoded text and layout elements with MUI Typography and Box components across the codebase, using semantic color props that automatically respond to the active theme
  • Fixed light mode color inconsistencies across the toolbar, sidebar, restaurant filters, cards, and dialogs
  • Updated interactive elements (dropdowns, meal selector, station tabs, view toggles, buttons, badges) to use the correct colors in both modes

Additionally closes #656

Testing Instructions

  1. nvm use 20 && docker compose up -d && pnpm run dev
  2. Seed: pnpm --filter @peterplate/db db:migrate && cd apps/server && pnpm run test:weekly
  3. Toggle Light/Device/Dark via the profile sidebar and check the home page, restaurant pages, events, about, and any dialogs

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.

bug: Dark mode login has poor contrast and doesn't look the greatest

1 participant