Initial Dark mode Implementation

[iamsrijan724]

Initial functionality of dark mode! Please test locally to make sure dark mode is appearing on all pages. Next week, will nitpick and make it better (ex. some of the text on charts could be more readable).

[kierstinhicks]

hi srijan, looks good! approved

[TrickkyRicky]

Hey guys I like the color but could we update the titles to be white so that they contrast better with the background(ADMIN Page)

It also looks like you guys didn't add the dark mode colors to the Nonprofit page nor the Supplier change but some of the changes you made affect the other pages. Could you also update those to show the proper dark mode colors as well

NonProfit IMG

Supplier IMG

[TrickkyRicky]

Also not sure if this is in scope but if your doing dark mode for the website could we also look into changing the tables to have dark attributes since its just a white canvas with a dark background

[kierstinhicks]

Hi @TrickkyRicky thanks for the feedback. Great points. @iamsrijan724 we can work to make these updates this week

[iamsrijan724]

Hi Ricky,Thanks! We were thinking of just getting these changes merged in and then next week we can do these more detailed changes. Is that okay?  Sent from my iPhoneOn Mar 16, 2026, at 7:00 AM, kierstinhicks ***@***.***> wrote:kierstinhicks left a comment (C4G/AtlantaFoodConsortium#28) Hi @TrickkyRicky thanks for the feedback. Great points. @iamsrijan724 we can work to make these updates this week —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[iamsrijan724]

I won’t be able to do any development tasks until Thursday since I am traveling for work. I think if we merge it in as is, we can have basic dark mode functionality for the peer evaluation. Sent from my iPhoneOn Mar 16, 2026, at 7:06 AM, Srijan Srivatsa ***@***.***> wrote:Hi Ricky,Thanks! We were thinking of just getting these changes merged in and then next week we can do these more detailed changes. Is that okay?  Sent from my iPhoneOn Mar 16, 2026, at 7:00 AM, kierstinhicks ***@***.***> wrote:kierstinhicks left a comment (C4G/AtlantaFoodConsortium#28) Hi @TrickkyRicky thanks for the feedback. Great points. @iamsrijan724 we can work to make these updates this week —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[TrickkyRicky]

I won’t be able to do any development tasks until Thursday since I am traveling for work. I think if we merge it in as is, we can have basic dark mode functionality for the peer evaluation. Sent from my iPhoneOn Mar 16, 2026, at 7:06 AM, Srijan Srivatsa @.> wrote:Hi Ricky,Thanks! We were thinking of just getting these changes merged in and then next week we can do these more detailed changes. Is that okay?  Sent from my iPhoneOn Mar 16, 2026, at 7:00 AM, kierstinhicks @.> wrote:kierstinhicks left a comment (C4G/AtlantaFoodConsortium#28) Hi @TrickkyRicky thanks for the feedback. Great points. @iamsrijan724 we can work to make these updates this week —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

@iamsrijan724, @kierstinhicks
The issue should represent the full completion of the work. The dark mode is inconsistent with the other elements on the page and it also affects other pages other than admin. It may be better to go without this feature on the survey since its incomplete

[iamsrijan724]

Okay, in that case probably better to leave dark mode off of the peer evaluation.  Sent from my iPhoneOn Mar 16, 2026, at 11:44 AM, Richard Young ***@***.***> wrote:TrickkyRicky left a comment (C4G/AtlantaFoodConsortium#28) I won’t be able to do any development tasks until Thursday since I am traveling for work. I think if we merge it in as is, we can have basic dark mode functionality for the peer evaluation. Sent from my iPhoneOn Mar 16, 2026, at 7:06 AM, Srijan Srivatsa @.> wrote:Hi Ricky,Thanks! We were thinking of just getting these changes merged in and then next week we can do these more detailed changes. Is that okay?  Sent from my iPhoneOn Mar 16, 2026, at 7:00 AM, kierstinhicks @.> wrote:kierstinhicks left a comment (C4G/AtlantaFoodConsortium#28) Hi @TrickkyRicky thanks for the feedback. Great points. @iamsrijan724 we can work to make these updates this week —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***> @iamsrijan724, @kierstinhicks The issue should represent the full completion of the work. The dark mode is inconsistent with the other elements on the page and it also affects other pages other than admin. It may be better to go without this feature on the survey since its incomplete —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[mrysav]

@iamsrijan724 @kierstinhicks @TrickkyRicky Agreed - if dark mode makes the text illegible, unfortunately, we probably shouldn't merge this into the main branch.

It is still OK to merge things into the staging branch as needed for testing, and whatever is merged there will be what your peers see for evaluation.

[iamsrijan724]

Hi all -
Sounds good. Merged this work into staging for peer evaluation. I’ll hold off on further dark mode changes until after peer eval, then address the remaining consistency feedback before completing this PR merging to main.

[dipenp495]

Dark Mode

• Applied dark mode theming to all pages and components
• Replaced hardcoded light-mode colors (bg-white, text-slate-*, border-slate-*) with theme-aware CSS variables (bg-card, text-foreground, text-muted-foreground, border-border)
• Added dark: variants for status badges, KPI cards, and colored UI elements
• Fixed hydration mismatch in ThemeSwitcher by deferring render until mounted
• Created shared ag-grid theme (src/lib/ag-grid-theme.ts) matching the site's color scheme for Announcements, Discussions, and Users tables
• Fixed home page login card visibility in dark mode (added border)
• Fixed chart heading colors across all chart components

Supplier Dashboard

• Pulled in supplier dashboard enhancements from feat-supplier-dashboard (drill-down KPIs, sortable tables, trend charts)
• Updated shared chart components (KPICard, BarChartComponent) to support new props (active, onClick, cellColors)

[mrysav]

@dipenp495 Merging all of those commits into this branch has unfortunately made it quite difficult to review and merge, and additionally, merging staging into this branch was not the right choice. The staging branch was intended to be entirely separate and not something that should be merged into branches that would get merged to main.

I reopened a new PR with just the dark mode changes, or at least, I hope most of them: #58. Let's please review and get that one merged. @iamsrijan724 @kierstinhicks Please make finishing that PR your priority.

@dipenp495 Please direct your additional work to your other supplier dashboard PR.