Add User-Selectable Themes and a Dark Theme

ReK42 commented 5 years ago

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;
}

2019-10-11_13-52-47

jeremystretch commented 5 years ago

Blocked by #3294

ReK42 commented 5 years ago

Would it make sense to split this out into two issues? One to add the ability to install additional themes and have the administrator select the default, and a separate one to then allow users to choose a personal theme?

Grokzen commented 5 years ago

I tried it out locally in our fork and poeple loved the looks of it for like 95% of the times. The main point i got back from the people i viewed this for was the main issue of being able to select it as a preference in your profile. But the other main place where it looked iffy was in the Rack detail view where you see what devices is racked where back and front view. I also had a few other GUI artifacts that needed some touchups as the theme did not properly work on liek table headers and a few other places, but that might just be that i did not bring in the extra patch you included.

ReK42 commented 5 years ago

Yes, the patch addresses table headers, the page footer and some hard to read fonts on select2. We haven't made use of the rack diagramming feature yet so I can't comment on whether or not that needs some touching up.

I have noticed that, with the dark theme, the row colouring for the interface table on the device view is OK but could be improved. If the colours were more muted it would be easier to read the lighter fonts.

lampwins commented 5 years ago

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.

jeremystretch commented 5 years ago

To be clear, we will not be introducing support for customizable themes; only the option to toggle between the default theme and a "dark" theme.

I had originally marked this as blocked pending implementation of a mechanism for storing user preference (#3294), but if we can accomplish this in CSS alone all the better.

ReK42 commented 5 years ago

Bootstrap does not currently have a date for CSS media dark theme support, it seems to be targeted for version 6, possibly partial support in 5. Considering netbox still utilizes version 3, it may be quite a while before that becomes a reality.

In the meantime, could this be implemented as an administrator choice via configuration variable? The work towards a dark theme should not be wasted as it can be reused once the dynamic CSS support is there.

bellwood commented 5 years ago

Could I request that if we tackle this, we allow the browser to natively select dark/light based on the device preference using the CSS media feature: @media (prefers-color-scheme: dark)

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Example: https://tombrow.com/dark-mode-website-css

I'm all for allowing the user to set a preference as well, but as a dark mode user myself, this would be handy.

agn-7 commented 4 years ago

I used bootstrap bootswatch theme version 3.4.1 which is compatible with the NetBox bootstrap version:

Replace the bootswatch-3.4.1/slate/bootstrap.min.css with netbox/netbox/project-static/bootstrap-3.4.1-dist/css/bootstrap.min.css to make it dark.

Change footer section to dark color:

Change the <footer> attribute to <footer class="section footer-classic context-dark bg-image" style="background: #3e444c;"> in netbox/netbox/templates/_base.html path.

hSaria commented 4 years ago

I've done a bit of experimenting with this and can safely say that prefers-color-scheme is very clean. I'm gonna take a crack at this (just need to go around to all of the different pages and take comparison screenshots). Here are a few key points:

If prefers-color-scheme is not supported, it will default to the current (light) theme.
Toggling the system-wide preference will automatically transition the site accordingly without the need for a reload (and smoothly, too!).
Using cookies will involve either a page reload or some custom code to handle switching between the light/dark themes; media-based is automatically handled by the web engine so no need for us to write redundant code.
Apart from the new CSS files (bootstrap-stale and dark-related overrides), the change will require 2-3 lines in the _base.html template.
Will need to do some testing with v2.7, specifically relating to #2248.

I'm not sure if this will be included in v2.6 or v2.7; guidance here from the maintainers would be greatly appreciated, but I'll error on the safe side and assume v2.6.

hSaria commented 4 years ago

It would appear that the themes in Bootswatch also modify the size of lots of elements which is throwing off the layout, like the search field on the navbar on a mac will extend to another line. If it's okay with this project to maintain our own dark theme css file (largely inspired by some other theme, but excluding any layout-changing modifications), then I'm willing to write it up, but I'm not sure if it's acceptable with the maintainers to do so.

agn-7 commented 4 years ago

@hSaria Because you used the latest version of bootswatch, while you must use the bootswatch theme version 3.4.1 as I mentioned in the above comment.

hSaria commented 4 years ago

I did use 3.4.1

On 30 Dec 2019, at 6:07 am, Benyamin Jafari notifications@github.com wrote:

@hSaria Because you used the latest version of bootswatch, while you must use the bootswatch theme version 3.4.1 as I mentioned in the above comment.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

jeremystretch commented 4 years ago

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.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our contributing guide.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our contributing guide.

abrahamvegh commented 4 years ago

Is this a wontfix, or just needs an owner? Or is that the intended behavior of the bot?

DanSheps commented 4 years ago

Needs owner, but if no one claims ownership within the allotted him it marks it as wontfix as preparation for closure.

Are you interested in taking this on @abrahamvegh?

abrahamvegh commented 4 years ago

Sure, I could take a crack at trying to build out the CSS, although I have zero Python knowledge, which may hinder me.

jeremystretch commented 4 years ago

While I appreciate the offer to help, I want to point out that the needs owner tag means just that: This issue is in need of someone to own it. It needs someone to take on the design, implementation, testing, documentation, and bug fixes. None of the maintainers currently have bandwidth to work on this, so if we can't find a committed volunteer it will drop off the board for the immediate future.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our contributing guide.

stale[bot] commented 4 years ago

This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.

netbox-community / netbox