Add dark mode

[matt852]

Closes: #729

What's Changed

I added dark mode to Nautobot. This makes minimal changes to the existing CSS configurations and continues using Bootstrap 3.

I added a small toggle feature using Javascript to the footer that allows toggling between light and dark mode.

The setting is saved client side on the client computer, and will remain set unless the user clears the browser session data (or uses something like incognito mode).
This does not make and database changes or store any theme-related data server-side.

[bryanculver]

This looks like a great start @matt852!

I'd like to see this go just a bit further, referencing a guide like this: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

• Using browser preference settings (I'm a day-time light mode, night-time dark mode user)

• Handling the buttons which look weird IMHO with black text.

[matt852]

@bryanculver I've updated the buttons, the status backgrounds, etc to always use white text.
I updated the JS to detect the current system theme, and set Nautobot's theme to match it. It will also change if the system theme changes.
I left in the ability for the user to select a theme from the footer button. This enables the user to force the theme for Nautobot, and will no longer update based on the system theme (unless they use a new browser, incognito mode, etc).

[glennmatthews]

Pretty cool! A few thoughts:

• Add an option to revert to system default theme after setting a manual theme? https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken/
• Do rack-elevation SVGs render correctly in dark mode?
• How well do the Swagger (/api/docs/) and GraphiQL (/graphql/) pages render in dark mode?

[matt852]

I added in support for 3 options: light mode, dark mode, and system settings. With adding a third, the toggle idea with the "light/dark" text in the footer wasn't as viable, so I created a modal that pops up. Upon selecting a theme, the page refreshes and the modal closes, or you can simply cancel out of it.

[matt852]

[matt852]

[matt852]

[matt852]

@glennmatthews @bryanculver I've addressed all of your feedback, and included screenshots for the various areas of concern.
I believe the Rack Elevations, API docs, and GraphiQL pages are all working properly now (they weren't previously...good catch!)

From my earlier comment: I added in support for 3 options: light mode, dark mode, and system settings. With adding a third, the toggle idea with the "light/dark" text in the footer wasn't as viable, so I created a modal that pops up. Upon selecting a theme, the page refreshes and the modal closes, or you can simply cancel out of it.

"System" theme is set by default right now. I can change this if desired.

Please let me know your thoughts or concerns. I know it's slightly different without using a fully separate light/dark stylesheet, but I believe it will work well until there's a broader UI overhaul and push towards Bootstrap 5 (or some other update).

EDIT: I'm just looking for overall feedback at the moment. I want to figure out some integration tests first and check a few more things. I'll let you know when it's ready for approval/merging.

[matt852]

I've confirmed the Rack elevation is dark, but when selecting "Save SVG", the SVG is rendered in light mode (as requested).

[bryanculver]

Retargeted at next as this is a new feature not addressing a bug.

[bryanculver]

😎

Screen.Recording.2022-05-24.at.14.15.07-small2.mov