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!