Dark theme support for management plugin (Issue 3478)

[efimov90]

Proposed Changes

Implementation of dark theme.

Fixes #3478

Added support of dark theme to management plugin.
By default used system settings.
Added switcher to footer (i don't like it looks at header and don't want to make big changes).
Added a bit of organization for css colors for easier further tinkering/expand/reduce groups of colors.

Types of Changes

What types of changes does your code introduce to this project?
Put an x in the boxes that apply

• Bug fix (non-breaking change which fixes issue #NNNN)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause an observable behavior change in existing systems)
• Documentation improvements (corrections, new content, etc)
• Cosmetic change (whitespace, formatting, etc)
• Build system and/or CI

Checklist

Put an x in the boxes that apply.
You can also fill these out after creating the PR.
If you're unsure about any of them, don't hesitate to ask on the mailing list.
We're here to help!
This is simply a reminder of what we are going to look for before merging your code.

• I have read the CONTRIBUTING.md document
• I have signed the CA (see https://cla.pivotal.io/sign/rabbitmq) (Unable to open page: 504 Gateway Time-out)
• I have added tests that prove my fix is effective or that my feature works (It's UI feature, no need to run tests, css and new element added)
• All tests pass locally with my changes (It's UI feature, no need to run tests, css and new element added)
• If relevant, I have added necessary documentation to https://github.com/rabbitmq/rabbitmq-website (Not relevant, small feature with user friendly control)
• If relevant, I have added this change to the first version(s) in release-notes that I expect to introduce it

Further Comments

If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution
you did and what alternatives you considered, etc.

[lukebakken]

This is really great, thank you.

I started up RabbitMQ with your branch and browsed to the management UI using Chrome 134.0.6998.89. I did a force-refresh in case any previous assets were cached. My system (Windows 11) is dark mode by default, and everything came up dark as expected. I switched to light mode, and a few UI elements were still dark:

Let me know if there is any more information you need.

[michaelklishin]

Another piece of feedback from our team: the Sun-and-Moon theme switcher feel really out of place. Can we steal (reuse) the switcher icon from rabbitmq.com (Docusaurus) instead?

[efimov90]

@lukebakken, thanks, i missed this bug. It works well without switcher, for switcher it requires to manually define color-scheme in separate files that affect theme palette

[lukebakken]

Thank you! The issue I reported appears to be fixed, but I do see the following behavior. I saw it the first time I tested, but didn't report it in case it was a quirk.

• Set your system to dark theme
• Start up RabbitMQ using this code
• Open incognito window and browse to localhost:15672
• The login window appears dark, as expected. Log in.
• The UI is dark, as expected. Now, choose the light mode via the switcher. Nothing happens! See the following image, which shows that "Light" is selected.

If I then refresh the window, and choose "Light" again, it switches and continues to work correctly.

[efimov90]

@michaelklishin, not quite sure "out of place" means where it is or only icon style? About icons - i just make them quick as possible, so they can be replaced by any icon you prefer. If it isn't restricted by license i can use icons from Docusaurus

[michaelklishin]

@efimov90 our website is MPL2-licensed while Docusaurus is MIT-licensed.

[lukebakken]

OK, my AI lawyer says we can use the Docusaurus code / icons - https://www.google.com/search?q=mpl2+mit+license+compatibility

If @efimov90 doesn't beat me to it, maybe I can figure it out.

[lukebakken]

SVG code for light and dark icons from Docusaurus can be found here, in LightMode and DarkMode directories:

https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-classic/src/theme/Icon

@efimov90 basically, we'd like the light/dark switcher to work the same as on rabbitmq.com. In other words, use the system default when the page loads, then clicking the icon switches the color mode, while also switching the icon.

Keeping the switcher at the bottom of the page is fine with me, especially since you said it would be more difficult to move it up top.

It has been years since I've looked at the management UI code, so thank you for taking this on.

[lukebakken]

This is awesome, thank you so much 👍

[efimov90]

I didn't still realize how to fix bug with incognito browser window. I'm pretty sure it's EJS or Sammy.js problem with navigation.

[lukebakken]

I didn't still realize how to fix bug with incognito browser window

I don't see that issue anymore. Everything looks OK!

[michaelklishin]

Merged in #13567. Will be backported for 4.1.0 there, too.

@efimov90 thank you for stepping up to contribute! We will give you full credit in the release notes, of course.

[michaelklishin]

@efimov90 here is an alpha build that includes this change.