diff --git a/netbox/project-static/bundle.js b/netbox/project-static/bundle.js index 6f651cd05..22a6e304a 100644 --- a/netbox/project-static/bundle.js +++ b/netbox/project-static/bundle.js @@ -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', diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css index 7a3cd7859..51a816c42 100644 Binary files a/netbox/project-static/dist/netbox-print.css and b/netbox/project-static/dist/netbox-print.css differ diff --git a/netbox/project-static/styles/_dark.scss b/netbox/project-static/styles/_dark.scss deleted file mode 100644 index c0c02e610..000000000 --- a/netbox/project-static/styles/_dark.scss +++ /dev/null @@ -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'; -} diff --git a/netbox/project-static/styles/_print.scss b/netbox/project-static/styles/_print.scss index 735f591d8..6074687c7 100644 --- a/netbox/project-static/styles/_print.scss +++ b/netbox/project-static/styles/_print.scss @@ -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'; diff --git a/netbox/project-static/styles/flatpickr-dark.scss b/netbox/project-static/styles/flatpickr-dark.scss deleted file mode 100644 index 94ebd775a..000000000 --- a/netbox/project-static/styles/flatpickr-dark.scss +++ /dev/null @@ -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; - } -} diff --git a/netbox/project-static/styles/theme-dark.scss b/netbox/project-static/styles/theme-dark.scss deleted file mode 100644 index 4bbe5cea5..000000000 --- a/netbox/project-static/styles/theme-dark.scss +++ /dev/null @@ -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,"); - -$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,"); - -// 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,"); -$accordion-button-active-icon: url("data:image/svg+xml,"); - -// 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,"); - -// Code -$code-color: $gray-200; -$kbd-color: $white; -$kbd-bg: $gray-300; -$pre-color: null; - -// Tabbed content -$tab-content-bg: $darkest; diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html index 0f6c9d9be..8003ba9bc 100644 --- a/netbox/templates/base/base.html +++ b/netbox/templates/base/base.html @@ -51,11 +51,6 @@ href="{% static 'netbox-light.css'%}?v={{ settings.VERSION }}" onerror="window.location='{% url 'media_failure' %}?filename=netbox-light.css'" /> -