ソースを参照

fix(ui): Improve dark mode form control contrast

Fixes form check input border contrast in dark mode by using solid grey
instead of translucent border. Updates checked checkbox glyph color to
rich black for better visibility against teal primary background.

Fixes #22879
Martin Hauser 2 ヶ月 前
親
コミット
4660fbb0ab

ファイルの差分が大きいため隠しています
+ 0 - 0
netbox/project-static/dist/netbox.css


+ 5 - 0
netbox/project-static/styles/_variables.scss

@@ -18,6 +18,11 @@ $table-cell-padding-y: 0.5rem;
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
 
+// Tabler borders unchecked form controls with the translucent token, which drops to
+// 1.1:1 against the dark-mode control fill. Restate it as a solid grey in dark mode.
+$form-check-input-border: var(--tblr-border-width) var(--tblr-border-style)
+  light-dark(var(--tblr-border-color-translucent), var(--tblr-gray-600));
+
 // Brand colors
 $rich-black: #001423;
 $rich-black-light: #081B2A;

+ 9 - 0
netbox/project-static/styles/overrides/_tabler.scss

@@ -160,6 +160,15 @@ html[data-bs-theme='dark'] {
     --tblr-table-hover-bg: inherit;
     --tblr-table-hover-color: inherit;
   }
+
+  // Tabler bakes a white glyph into the checked data URI, which reads at 1.4:1 against
+  // the teal dark-mode primary. A data URI is an isolated document, so the color cannot
+  // come from a custom property and has to be baked in at build time.
+  .form-check-input:checked[type='checkbox'] {
+    --tblr-form-check-bg-image: #{escape-svg(
+        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$rich-black}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>")
+      )};
+  }
 }
 
 // Do not apply padding to <code> elements inside a <pre>

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません