diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 36ed4defc..fc27a79e7 100644 Binary files a/netbox/project-static/dist/netbox.css and b/netbox/project-static/dist/netbox.css differ diff --git a/netbox/project-static/styles/_variables.scss b/netbox/project-static/styles/_variables.scss index afd4bc6bd..9a4d510b7 100644 --- a/netbox/project-static/styles/_variables.scss +++ b/netbox/project-static/styles/_variables.scss @@ -21,3 +21,16 @@ $hover-bg: rgba(var(--tblr-secondary-rgb), 0.08); // Ensure active nav-pill has a background color in dark mode $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15); + +// Colors +$rich-black: #001423; +$rich-black-light: #081B2A; +$rich-black-lighter: #0D202E; +$rich-black-lightest: #1A2C39; +$bright-teal: #00F2D4; +$dark-teal: #00857D; + +$primary: $dark-teal; + +// Navbar active dropdown border color +$navbar-active-border-color: $bright-teal; diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index 97f1298df..120f37990 100644 --- a/netbox/project-static/styles/overrides/_tabler.scss +++ b/netbox/project-static/styles/overrides/_tabler.scss @@ -35,12 +35,76 @@ pre { display: inline-block;; } -table a { - // Adjust table anchor link contrast as not enough contrast in dark mode - filter: brightness(110%); +table th.orderable a { + color: var(--#{$prefix}body-color); } // Override background color alpha value [data-bs-theme=dark] ::selection { background-color: rgba(var(--tblr-primary-rgb),.48) } + +// Dark mode colors +@if $enable-dark-mode { + @include color-mode(dark, true) { + --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%); + --#{$prefix}link-color: #{$bright-teal}; + --#{$prefix}secondary: #{$gray-400}; + } +} + +// Slightly increase alert contrast between bg and text +.alert { + background: var(--#{$prefix}bg-surface); +} + +// Altering background colors +.page, .page-tabs .nav-tabs .nav-link.active { + background-color: var(--#{$prefix}bg-surface-tertiary)!important; +} +.page-body .card .card-header { + background: var(--tblr-bg-surface-secondary)!important; +} + +.footer .text-primary { + color: $rich-black!important; +} + +// Dark mode overrides +body[data-bs-theme=dark] { + + // Background colors to match brand colors + background-color: $rich-black; + .navbar, .page-header { + background-color: $rich-black; + } + .page, .page-tabs .nav-tabs .nav-link.active { + background-color: $rich-black-light!important; + } + + // Adjust dark table link color without affecting buttons and badges + table { + a { + color: $bright-teal; + } + .badge a { + color: inherit; + } + .btn { + color: var(--#{$prefix}body-color); + } + } + + // Adjusting text colors + .text- { + &muted { + color: var(--#{$prefix}secondary-color) !important; + } + &secondary { + color: $gray-400!important; + } + } + .footer .text-primary { + color: white!important; + } +} diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index fe7b8e75a..e7dd35507 100644 --- a/netbox/project-static/styles/transitional/_navigation.scss +++ b/netbox/project-static/styles/transitional/_navigation.scss @@ -1,5 +1,13 @@ // Navbar styling .navbar-vertical.navbar-expand-lg { + background-color: $rich-black; + .dropdown-item { + color: white!important; + } + .text-secondary { + color: $bright-teal!important; + } + .navbar-collapse { .dropdown-menu { .dropdown-item {