Fixes #20827: fix theme toggle visibility for logo and buttons

Author: abubnalitic-nbl

netbox/project-static/dist/netbox.css

@@ -1,7 +1,7 @@
 // Disable font-ligatures for Chromium based browsers
 // Chromium requires `font-variant-ligatures: none` in addition to `font-feature-settings "liga" 0`
 * {
-  font-feature-settings: "liga" 0;
+  font-feature-settings: 'liga' 0;
   font-variant-ligatures: none;
 }
 
@@ -57,7 +57,8 @@ pre {
 }
 
 // Altering background colors
-.page, .page-tabs .nav-tabs .nav-link.active {
+.page,
+.page-tabs .nav-tabs .nav-link.active {
   background-color: var(--#{$prefix}bg-surface-tertiary) !important;
 }
 
@@ -70,23 +71,23 @@ pre {
 // Dark mode colors
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
-    --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%);
+    --#{$prefix}alert-color: darken(var(--#{$prefix}warning), 10%);
     --#{$prefix}link-color: #{$bright-teal};
-    --#{$prefix}link-color-rgb: 0,242,212;
-    --#{$prefix}link-hover-color-rgb: 0,242,212;
+    --#{$prefix}link-color-rgb: 0, 242, 212;
+    --#{$prefix}link-hover-color-rgb: 0, 242, 212;
     --#{$prefix}secondary: #{$gray-400};
     --#{$prefix}primary: #{$bright-teal};
     --#{$prefix}primary-fg: #{$rich-black};
-    --#{$prefix}primary-rgb: 0,242,212;
+    --#{$prefix}primary-rgb: 0, 242, 212;
     --#{$prefix}btn-active-color: #{$rich-black};
   }
 }
 
 // Dark mode overrides
-body[data-bs-theme=dark] {
+body[data-bs-theme='dark'] {
   // Override background color alpha value
   ::selection {
-    background-color: rgba(var(--tblr-primary-rgb),.48);
+    background-color: rgba(var(--tblr-primary-rgb), 0.48);
   }
 
   .btn-primary {
@@ -95,7 +96,9 @@ body[data-bs-theme=dark] {
 
   // Change content color when primary teal changes with theme
   .bg-primary {
-    .card-title,a,i {
+    .card-title,
+    a,
+    i {
       color: $rich-black !important;
     }
   }
@@ -110,14 +113,17 @@ body[data-bs-theme=dark] {
 
   // Background colors to match brand colors
   background-color: $rich-black;
-  .navbar, .page-header {
+  .navbar,
+  .page-header {
     background-color: $rich-black;
   }
-  .page, .page-tabs .nav-tabs .nav-link.active {
+  .page,
+  .page-tabs .nav-tabs .nav-link.active {
     background-color: $rich-black-light !important;
   }
 
-  .page-link.active, .active>.page-link {
+  .page-link.active,
+  .active > .page-link {
     color: $rich-black;
   }
 
@@ -152,13 +158,28 @@ pre code {
 }
 
 // Use an icon instead of Tabler's native "caret" for dropdowns (avoids a Safari bug)
-.dropdown-toggle:after{
-  font-family: "Material Design Icons";
+.dropdown-toggle:after {
+  font-family: 'Material Design Icons';
   content: '\F0140';
   padding-right: 9px;
   border-bottom: none;
   border-left: none;
   transform: none;
-  vertical-align: .05em;
+  vertical-align: 0.05em;
   height: auto;
 }
+
+// Theme-based visibility utilities
+// Tabler's .hide-theme-* utilities expect data-bs-theme on :root, but NetBox applies
+// it to body. These overrides use higher specificity selectors to ensure theme-based
+// visibility works correctly. The :root:not(.dummy) pattern provides the additional
+// specificity needed to override Tabler's :root:not() rules.
+:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-light,
+:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-dark {
+  display: none !important;
+}
+
+:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-light,
+:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-dark {
+  display: inline-flex !important;
+}