feat/dark mode : Added shadcn dark mode to dashboard

[aloktomarr]

What does this PR do?

This PR adds dark mode support to the dashboard using shadcn/ui theme variables and next-themes for theme management.

Fixes#763

###Type of change
feature

Changes

• Added theme provider setup using next-themes
• Implemented theme toggle component in the top navigation bar
• Updated navigation components to use theme variables
• Applied dark mode styles to sidebar and navigation items
• Ensured consistent styling across light and dark modes

Screenshots

[Add before/after screenshots showing light and dark modes]

Testing Done

• Tested theme switching between light, dark, and system modes
• Verified styles in both light and dark modes
• Checked navigation item states (hover, active)
• Tested across different browsers

Notes

• Uses existing shadcn theme variables from globals.css
• Maintains consistent styling with the existing design system

[davemooreuws]

Thank you for the PR @aloktomarr

Can you try testing with a running project that contains all the resources? There are some missing spots. For example:

Go into /pkg/dashboard/frontend/test-app and install the dependencies then run nitric start

I'll review what you can done so far.

[davemooreuws]

I cannot view the lines, they should be a light color

[davemooreuws]

the help dialog does not work in dark mode:

[aloktomarr]

Hi David,

Thank you for taking the time to review the PR. I have added the missing classes to the components, which should resolve the issues with dark mode.

Please have a look and let me know if any further changes are needed. Thanks!

[davemooreuws]

Hi David,

Thank you for taking the time to review the PR. I have added the missing classes to the components, which should resolve the issues with dark mode.

Please have a look and let me know if any further changes are needed. Thanks!

Hi David,

Thank you for taking the time to review the PR. I have added the missing classes to the components, which should resolve the issues with dark mode.

Please have a look and let me know if any further changes are needed. Thanks!

Hi Alok,

Thanks for the update! I appreciate you adding the missing classes to resolve some of the dark mode issues.

I took a look at the changes, and I have a few suggestions to further align things with our design goals:

1. Light Mode: We’d like to keep the light mode as is, since it has changed a bit with text colors, borders on architecture diagram etc. Can we ensure the light mode stays consistent with the current version?

2. Theme Button Placement: Could we move the theme button to the right of the help button? I think that would improve the layout and accessibility.

3. Primary Color on Dark Mode: For the dark mode, we’d like to keep the primary color as blue, rather than purple. Can we adjust this accordingly?

4. API Explorer: I noticed there are still a few issues on the API Explorer page in dark mode (e.g., tabs, selected items, etc.). Could you take another look at that?

5. Dark Mode Colors: We’d like to align the dark mode theme with our current color palette. Can we update the dark mode variables to match those defined here: Tailwind CSS colors?

6. Headings on Dark Mode: It looks like the headings for sections (e.g., websockets, secrets, etc.) are still showing up as black on dark mode. Can we change them to the appropriate light color for consistency?

7. Formatting: Do a yarn format to fix the prettier issues on tests.

If you think it would help, I can submit a PR with these changes. Let me know what you think, or if you'd prefer to handle it yourself.

Thanks again for your work on this!

[aloktomarr]

Hi David,

First off, my sincere apologies for the very long silence on this I stepped away and it sat untouched for about a year. Thanks for your patience, and for the detailed, thoughtful review. I've now gone back through all your points and pushed an update:

1. Light mode — kept as-is. My changes only edit the .dark block and appenddark: variants to components, so light-mode classes are untouched.

2. Theme button placement — moved the theme toggle to the right of the Help button. ✅

3. Primary color in dark mode — the dark --primary was an HSL value being read through rgb(var(--primary)) (so it rendered incorrectly). Set it to the brand blue 44 64 247, matching light mode. ✅

4. API Explorer — the shared Tabs component had hardcoded light colors (bg-white, text-gray-900, dividers) with no dark variants; added dark: variants for the tabs and selected items. ✅

5. Dark mode palette — aligned the .dark CSS variables with the docs palette you linked (background, foreground, muted, accent, popover, border, card, ring). ✅

6. Headings — h1–h6 were hardcoded text-gray-900; added dark:text-gray-50 so section headings are light in dark mode. Also gave html.dark a dark background. ✅

7. Formatting — I ran into a prettier-plugin-tailwindcss version difference locally (a fresh install resolves a newer patch that re-sorts classes across ~170 files), so I kept the diff limited to the intended files rather than adding noise. Could you confirm the expected prettier/plugin versions (or let CI's yarn format settle it)? I'll match whatever the repo expects.

Thanks again, and sorry once more for the delay!