diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 36ed4defc..6db226cf8 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..ef40b1810 100644 --- a/netbox/project-static/styles/_variables.scss +++ b/netbox/project-static/styles/_variables.scss @@ -21,3 +21,13 @@ $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; diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index 97f1298df..3d8b46fe9 100644 --- a/netbox/project-static/styles/overrides/_tabler.scss +++ b/netbox/project-static/styles/overrides/_tabler.scss @@ -36,11 +36,55 @@ pre { } table a { - // Adjust table anchor link contrast as not enough contrast in dark mode - filter: brightness(110%); + color: $dark-teal; } // Override background color alpha value [data-bs-theme=dark] ::selection { background-color: rgba(var(--tblr-primary-rgb),.48) } + +// Side navigation +.navbar-vertical { + background-color: $rich-black; + .dropdown-item { + color: white!important; + } + .text-secondary { + color: $gray-400!important; + } +} + +// Dark mode colors +@if $enable-dark-mode { + @include color-mode(dark, true) { + --#{$prefix}link-color: #{$bright-teal}; + --#{$prefix}secondary: #{$gray-400}; + } +} + +// 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; + } + + // 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); + } + } +}