Add User-Selectable Themes and a Dark Theme

Environment

• Python version: 3.6.8
• NetBox version: 2.6.5

Proposed Functionality

Add a dark theme to the user interface and allow the choice of theme to be selected and saved per-user. Potentially implement in a way which allows administrators to add more themes or customized versions of themes.

Use Case

Dark themes reduce eye strain and I have modified my own installation of netbox to use a dark theme, however some users prefer light themes. Implementing a way for users to select their preferred theme would satisfy all parties, plus allow for theme modification without forking or otherwise editing the netbox installation.

Database Changes

Add a theme preference field to the User model. The default theme can be set via the Django configuration file.

External Dependencies

As an example for implementation, I have added the Bootswatch Slate theme to my installation. See the attached screenshot. This involved replacing the default static/css/bootstrap.min.css file and making the following modifications to base.css to touch up the styling of select2 and netbox itself:

.footer {
    border-top: 1px solid #3e444c;
}
.table-headings th {
    background-color: #3e444c;
}
.text-muted {
    color: #c8c8c8;
}

.select2-container--bootstrap .select2-results__option {
    color: #272b30;
}
.select2-container--bootstrap .select2-results__option[aria-disabled=true] {
    color: #999;
}
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
    background-color: #d6e4f0;
    cursor: not-allowed;
}

[jeremystretch]

Marking this as open for anyone who wants to take on the CSS component. Bear in mind that we cannot modify the stock Bootstrap template, or interfere with the existing style. Implementation of an optional dark mode must exist in parallel to the current theme.

[lampwins]

I would not be interested in directly supporting theming of the UI other than dark mode. We have much more pressing matters to throw development time at and after all, we are an IT utility application.

Given that most major browsers are supporting dark mode now via prefers-color-scheme I think it would be unwise for us to implement this directly. Instead, most of the heavy lifting should be taken care of when boostrap implements support for prefers-color-scheme https://github.com/twbs/bootstrap/issues/27514. AS already pointed out, I am sure we will need to tweek some things here and there but the industry as a whole is clearly moving away from custom dark themes.