Adjust visualizations for dark/light mode compatibility

open-telemetry · Oct 18, 2024 · 5af0b6f · 5af0b6f
1 parent e6eef27
commit 5af0b6f
Show file tree

Hide file tree

Showing 4 changed files with 2,408 additions and 380 deletions.
diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss
@@ -39,3 +39,28 @@
 .registry-entry {
   @extend .shadow;
 }
+
+// Toggle svg colors for dark and light mode
+$color-mode-type: data;
+$dark-fill-color: #ffffff;
+$light-fill-color: #000000;
+
+// Dark mode styles
+@include color-mode(dark) {
+  @media (prefers-color-scheme: dark) {
+    #svg255 path,
+    #svg-waterfall path {
+      fill: $dark-fill-color;
+    }
+  }
+}
+
+// Light mode styles
+@include color-mode(light) {
+  @media (prefers-color-scheme: light) {
+    #svg255 path,
+    #svg-waterfall path {
+      fill: $light-fill-color;
+    }
+  }
+}