starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Add User-Selectable Themes and a Dark Theme #2947

New Issue
Closed
opened 2025-12-29 18:23:52 +01:00 by adam · 22 comments
adam commented 2025-12-29 18:23:52 +01:00
Owner
Copy Link

Originally created by @ReK42 on GitHub (Oct 11, 2019).

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

Originally created by @ReK42 on GitHub (Oct 11, 2019). ### 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](https://bootswatch.com/3/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: ```css .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](https://user-images.githubusercontent.com/4775937/66684238-6e9dd900-ec2e-11e9-8486-ce32cb1ecd14.png)
adam added the type: featurestatus: needs ownerpending closure labels 2025-12-29 18:23:52 +01:00
adam closed this issue 2025-12-29 18:23:52 +01:00
adam commented 2025-12-29 18:23:53 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 14, 2019):

Blocked by #3294

@jeremystretch commented on GitHub (Oct 14, 2019): Blocked by #3294
adam commented 2025-12-29 18:23:53 +01:00
Author
Owner
Copy Link

@ReK42 commented on GitHub (Oct 15, 2019):

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?

@ReK42 commented on GitHub (Oct 15, 2019): 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?
adam commented 2025-12-29 18:23:53 +01:00
Author
Owner
Copy Link

@Grokzen commented on GitHub (Oct 16, 2019):

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.

@Grokzen commented on GitHub (Oct 16, 2019): 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.
adam commented 2025-12-29 18:23:53 +01:00
Author
Owner
Copy Link

@ReK42 commented on GitHub (Oct 16, 2019):

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.

@ReK42 commented on GitHub (Oct 16, 2019): 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.
adam commented 2025-12-29 18:23:54 +01:00
Author
Owner
Copy Link

@lampwins commented on GitHub (Oct 16, 2019):

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.

@lampwins commented on GitHub (Oct 16, 2019): 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.
adam commented 2025-12-29 18:23:54 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 17, 2019):

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.

@jeremystretch commented on GitHub (Oct 17, 2019): 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.
adam commented 2025-12-29 18:23:54 +01:00
Author
Owner
Copy Link

@ReK42 commented on GitHub (Oct 21, 2019):

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.

@ReK42 commented on GitHub (Oct 21, 2019): 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.
adam commented 2025-12-29 18:23:55 +01:00
Author
Owner
Copy Link

@bellwood commented on GitHub (Oct 25, 2019):

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.

@bellwood commented on GitHub (Oct 25, 2019): 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.
adam commented 2025-12-29 18:23:55 +01:00
Author
Owner
Copy Link

@agn-7 commented on GitHub (Dec 23, 2019):

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.
@agn-7 commented on GitHub (Dec 23, 2019): I used bootstrap [bootswatch theme version 3.4.1](https://github.com/thomaspark/bootswatch/releases/tag/v3.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.
adam commented 2025-12-29 18:23:55 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Dec 29, 2019):

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 on GitHub (Dec 29, 2019): 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.
adam commented 2025-12-29 18:23:55 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Dec 29, 2019):

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.

@hSaria commented on GitHub (Dec 29, 2019): 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.
adam commented 2025-12-29 18:23:55 +01:00
Author
Owner
Copy Link

@agn-7 commented on GitHub (Dec 30, 2019):

@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.

@agn-7 commented on GitHub (Dec 30, 2019): @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.
adam commented 2025-12-29 18:23:56 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Dec 30, 2019):

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.

@hSaria commented on GitHub (Dec 30, 2019): 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.
adam commented 2025-12-29 18:23:56 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Apr 24, 2020):

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.

@jeremystretch commented on GitHub (Apr 24, 2020): 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.
adam commented 2025-12-29 18:23:56 +01:00
Author
Owner
Copy Link

@stale[bot] commented on GitHub (May 8, 2020):

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 on GitHub (May 8, 2020): 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](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).
adam commented 2025-12-29 18:23:56 +01:00
Author
Owner
Copy Link

@stale[bot] commented on GitHub (May 23, 2020):

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 on GitHub (May 23, 2020): 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](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).
adam commented 2025-12-29 18:23:56 +01:00
Author
Owner
Copy Link

@abrahamvegh commented on GitHub (May 25, 2020):

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

@abrahamvegh commented on GitHub (May 25, 2020): Is this a wontfix, or just needs an owner? Or is that the intended behavior of the bot?
adam commented 2025-12-29 18:23:56 +01:00
Author
Owner
Copy Link

@DanSheps commented on GitHub (May 25, 2020):

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?

@DanSheps commented on GitHub (May 25, 2020): 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?
adam commented 2025-12-29 18:23:57 +01:00
Author
Owner
Copy Link

@abrahamvegh commented on GitHub (May 25, 2020):

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

@abrahamvegh commented on GitHub (May 25, 2020): Sure, I could take a crack at trying to build out the CSS, although I have zero Python knowledge, which may hinder me.
adam commented 2025-12-29 18:23:57 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (May 26, 2020):

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.

@jeremystretch commented on GitHub (May 26, 2020): 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.
adam commented 2025-12-29 18:23:57 +01:00
Author
Owner
Copy Link

@stale[bot] commented on GitHub (Jun 9, 2020):

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 on GitHub (Jun 9, 2020): 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](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).
adam commented 2025-12-29 18:23:57 +01:00
Author
Owner
Copy Link

@stale[bot] commented on GitHub (Jun 16, 2020):

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.

@stale[bot] commented on GitHub (Jun 16, 2020): 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.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label pending closure status: needs owner type: feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#2947
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?