NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-08-17 21:18:16 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Remove dark mode styling

Browse Source
This commit is contained in:
Jeremy Stretch 2023-12-29 12:29:22 -05:00
parent 8254e707b6
commit edcdc90911
7 changed files with 2 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/bundle.js
View File

@ -75,7 +75,7 @@ async function bundleStyles() {
const entryPoints = {
'netbox-external': 'styles/_external.scss',
'netbox-light': 'styles/_light.scss',
'netbox-dark': 'styles/_dark.scss',
// 'netbox-dark': 'styles/_dark.scss',
'netbox-print': 'styles/_print.scss',
rack_elevation: 'styles/_rack_elevation.scss',
cable_trace: 'styles/_cable_trace.scss',

BIN
netbox/project-static/dist/netbox-print.css vendored
View File

Binary file not shown.

10
netbox/project-static/styles/_dark.scss
View File

@ -1,10 +0,0 @@
// Entry for netbox-dark.css stylesheet.
html[data-netbox-color-mode='dark'] {
// Imports are scoped under the body when its data-netbox-color-mode attribute is set to 'dark'.
@import './theme-dark.scss';
@import './bootstrap.scss';
@import './select.scss';
@import './flatpickr-dark.scss';
@import './netbox.scss';
}

4
netbox/project-static/styles/_print.scss
View File

@ -7,9 +7,7 @@
--nbx-body-color: #000 !important;
}
html,
html[data-netbox-color-mode='dark'],
html[data-netbox-color-mode='light'] {
html {
@import './theme-light';
@import './bootstrap';
@import './select';

122
netbox/project-static/styles/flatpickr-dark.scss
View File

@ -1,122 +0,0 @@
// Dark Mode Styles for Flatpickr.
$flatpickr-bg: $gray-800;
$flatpickr-color: $body-color;
$flatpickr-border-color: $gray-700;
$flatpickr-title-color: $gray-300;
$flatpickr-disabled-color: $gray-500;
.flatpickr-calendar {
color: $flatpickr-color;
background: $flatpickr-bg;
border-radius: $border-radius;
box-shadow: 1px 0 0 $flatpickr-border-color, -1px 0 0 $flatpickr-border-color,
0 1px 0 $flatpickr-border-color, 0 -1px 0 $flatpickr-border-color, 0 3px 13px rgb(0 0 0 / 8%);
&.arrowTop:before,
&.arrowTop:after {
border-bottom-color: $flatpickr-bg;
}
span.flatpickr-weekday {
color: $flatpickr-title-color;
}
.numInputWrapper {
span.arrowUp:after {
border-bottom-color: $input-color;
}
span.arrowDown:after {
border-top-color: $input-color;
}
}
.flatpickr-months {
.flatpickr-month {
color: $flatpickr-color;
fill: $flatpickr-color;
}
.flatpickr-next-month,
.flatpickr-prev-month {
color: $flatpickr-color;
fill: $flatpickr-color;
&:hover svg {
fill: $danger;
}
}
.flatpickr-current-month select {
background: $flatpickr-bg;
}
}
.flatpickr-day {
color: $flatpickr-color;
&.selected,
&.startRange,
&.endRange,
&.selected.inRange,
&.startRange.inRange,
&.endRange.inRange,
&.selected:focus,
&.startRange:focus,
&.endRange:focus,
&.selected:hover,
&.startRange:hover,
&.endRange:hover,
&.selected.prevMonthDay,
&.startRange.prevMonthDay,
&.endRange.prevMonthDay,
&.selected.nextMonthDay,
&.startRange.nextMonthDay,
&.endRange.nextMonthDay {
color: color-contrast($blue-300);
background: $blue-300;
border-color: $blue-300;
}
&:hover {
color: color-contrast($secondary);
background: $secondary;
border-color: $secondary;
}
&.flatpickr-disabled,
&.flatpickr-disabled:hover,
&.prevMonthDay,
&.nextMonthDay,
&.notAllowed,
&.notAllowed.prevMonthDay,
&.notAllowed.nextMonthDay {
color: $flatpickr-disabled-color;
&:hover {
color: color-contrast($secondary);
background: $secondary;
border-color: $secondary;
}
}
}
.flatpickr-time {
input {
color: $input-color;
background: $flatpickr-bg;
&:hover,
&:active {
background: $flatpickr-bg;
}
}
.flatpickr-time-separator {
color: $flatpickr-disabled-color;
}
}
&.showTimeInput.hasTime .flatpickr-time {
border-top: 1px solid $flatpickr-border-color;
}
}

291
netbox/project-static/styles/theme-dark.scss
View File

@ -1,291 +0,0 @@
// Dark Mode Theme Variables and Overrides.
@use 'sass:map';
@import './theme-base';
// Theme colors (BS5 classes)
$primary: $blue-300;
$secondary: $gray-500;
$success: $green-300;
$info: $cyan-300;
$warning: $yellow-300;
$danger: $red-300;
$light: $gray-300;
$dark: $gray-500;
$theme-colors: (
// BS5 theme colors
'primary': $primary,
'secondary': $secondary,
'success': $success,
'info': $info,
'warning': $warning,
'danger': $danger,
'light': $light,
'dark': $dark,
// General-purpose palette
'blue': $blue-300,
'indigo': $indigo-300,
'purple': $purple-300,
'pink': $pink-300,
'red': $red-300,
'orange': $orange-300,
'yellow': $yellow-300,
'green': $green-300,
'teal': $teal-300,
'cyan': $cyan-300,
'gray': $gray-300,
'black': $black,
'white': $white
);
// Gradient
$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));
// Body
$body-bg: $darker;
$body-color: $white;
$body-text-align: null;
$border-color: $gray-700;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
$text-muted: $gray-400;
$blockquote-footer-color: $gray-600;
$mark-bg: #fcf8e3;
$link-color: $blue-200;
$link-hover-color: $blue-100;
// Alerts
$alert-bg-scale: -5%;
$alert-border-scale: -20%;
$alert-color-scale: 20%;
// Tables
$table-color: $gray-100;
$table-border-color: $border-color;
$table-striped-color: $table-color;
$table-striped-bg: rgba($white, $table-striped-bg-factor);
$table-active-color: $table-color;
$table-active-bg: rgba($white, $table-active-bg-factor);
$table-hover-color: $table-color;
$table-hover-bg: rgba($white, $table-hover-bg-factor);
$table-flush-header-bg: $gray-700;
// Buttons
$btn-box-shadow: inset 0 1px 0 rgba($black, 0.15), 0 1px 1px rgba($white, 0.075);
$btn-active-box-shadow: inset 0 3px 5px rgba($white, 0.125);
$btn-link-disabled-color: $gray-300;
// Forms
$component-active-bg: $primary;
$component-active-color: $black;
$form-text-color: $text-muted;
$input-bg: $gray-900;
$input-disabled-bg: $gray-700;
$input-color: $gray-100;
$input-border-color: $gray-700;
$input-focus-bg: $input-bg;
$input-focus-border-color: tint-color($component-active-bg, 10%);
$input-focus-color: $input-color;
$input-placeholder-color: $gray-700;
$input-plaintext-color: $body-color;
input {
color-scheme: dark;
}
$form-check-input-active-filter: brightness(90%);
$form-check-input-bg: $input-bg;
$form-check-input-border: 1px solid rgba(255, 255, 255, 0.25);
$form-check-input-checked-color: $component-active-color;
$form-check-input-checked-bg-color: $component-active-bg;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
$form-check-input-indeterminate-color: $component-active-color;
$form-check-input-indeterminate-bg-color: $component-active-bg;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
$form-switch-color: rgba(255, 255, 255, 0.25);
$form-switch-focus-color: $input-focus-border-color;
$form-switch-checked-color: $component-active-color;
$input-group-addon-color: $input-color;
$input-group-addon-bg: $gray-700;
$input-group-addon-border-color: $input-border-color;
$form-select-color: $input-color;
$form-select-disabled-color: $gray-500;
$form-select-bg: $input-bg;
$form-select-disabled-bg: $input-disabled-bg;
$form-select-indicator-color: $form-select-color;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
$form-select-border-color: $input-border-color;
$form-range-track-bg: $gray-300;
$form-range-thumb-bg: $component-active-bg;
$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg: $gray-500;
$form-file-button-color: $input-color;
$form-file-button-bg: $input-group-addon-bg;
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);
$form-feedback-valid-color: $success;
$form-feedback-invalid-color: $danger;
// Navs
$nav-link-color: $body-color;
$nav-link-hover-color: null;
$nav-link-disabled-color: $gray-800;
$nav-tabs-border-color: $border-color;
$nav-tabs-link-hover-border-color: rgba($gray-800, 0.5) rgba($gray-800, 0.5) $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-100;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-800 $gray-800 $nav-tabs-link-active-bg;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
$navbar-light-color: $darker;
$navbar-light-toggler-border-color: $gray-700;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-toggler-border-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
// Dropdowns
$dropdown-color: $body-color;
$dropdown-bg: $gray-900;
$dropdown-border-color: rgba($white, 0.15);
$dropdown-link-color: $gray-100;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $gray-600;
$dropdown-link-disabled-color: $gray-800;
$dropdown-header-color: $gray-600;
// Pagination
$pagination-color: $link-color;
$pagination-bg: $gray-800;
$pagination-border-color: $gray-600;
$pagination-focus-color: $link-hover-color;
$pagination-focus-bg: $gray-400;
$pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-400;
$pagination-hover-border-color: $gray-500;
$pagination-active-color: $component-active-color;
$pagination-active-bg: $component-active-bg;
$pagination-active-border-color: $pagination-active-bg;
$pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $gray-800;
$pagination-disabled-border-color: $gray-600;
// Cards
$card-border-color: rgba($white, 0.125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $gray-900;
// Accordion
$accordion-color: $body-color;
$accordion-bg: transparent;
$accordion-border-color: $border-color;
$accordion-button-color: $accordion-color;
$accordion-button-bg: $accordion-bg;
$accordion-button-active-bg: shade-color($blue-300, 10%);
$accordion-button-active-color: color-contrast($accordion-button-active-bg);
$accordion-button-focus-border-color: $input-focus-border-color;
$accordion-icon-color: $accordion-color;
$accordion-icon-active-color: $accordion-button-active-color;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
// Tooltips
$tooltip-color: $body-color;
$tooltip-bg: $gray-700;
$tooltip-arrow-color: $tooltip-bg;
$form-feedback-tooltip-opacity: $tooltip-opacity;
// Popovers
$popover-bg: $gray-700;
$popover-border-color: rgba($white, 0.2);
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-body-color: $body-color;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, 0.05);
// Toasts
$toast-color: null;
$toast-background-color: rgba($white, 0.85);
$toast-border-color: rgba(0, 0, 0, 0.1);
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, 0.85);
$toast-header-border-color: rgba(0, 0, 0, 0.05);
// Badges
$badge-color: $white;
// Modals
$modal-content-color: null;
$modal-content-bg: $gray-800;
$modal-content-border-color: rgba($white, 0.2);
$modal-backdrop-bg: $black;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
// Progress bars
$progress-bg: $gray-600;
$progress-bar-color: $white;
$progress-bar-bg: $primary;
// List group
$list-group-color: $body-color;
$list-group-bg: $card-bg;
$list-group-border-color: rgba($white, 0.125);
$list-group-hover-bg: rgba($gray-100, 0.15);
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-300;
$list-group-action-hover-color: $body-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: rgba($gray-300, 0.125);
// Image thumbnails
$thumbnail-bg: $body-bg;
$thumbnail-border-color: $gray-300;
// Figures
$figure-caption-color: $gray-600;
// Breadcrumbs
$breadcrumb-divider-color: $gray-100;
$breadcrumb-active-color: $body-color;
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/%3E%3C/svg%3E");
// Carousel
$carousel-control-color: $white;
$carousel-indicator-active-bg: $white;
$carousel-caption-color: $white;
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
// Close
$btn-close-color: $white;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
// Code
$code-color: $gray-200;
$kbd-color: $white;
$kbd-bg: $gray-300;
$pre-color: null;
// Tabbed content
$tab-content-bg: $darkest;

5
netbox/templates/base/base.html
View File

@ -51,11 +51,6 @@
href="{% static 'netbox-light.css'%}?v={{ settings.VERSION }}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox-light.css'"
/>
<link
rel="stylesheet"
href="{% static 'netbox-dark.css'%}?v={{ settings.VERSION }}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'"
/>
<link
rel="stylesheet"
media="print"