From 5af0b6f74aa0ce0b164eb552cf39c40460b44f95 Mon Sep 17 00:00:00 2001 From: susan Date: Fri, 18 Oct 2024 13:23:48 +0300 Subject: [PATCH] Adjust visualizations for dark/light mode compatibility --- assets/scss/_registry.scss | 25 + .../en/docs/collector/img/otel-collector.svg | 2759 ++++++++++++++--- static/img/otel-diagram.svg | 2 +- static/img/waterfall-trace.svg | 2 +- 4 files changed, 2408 insertions(+), 380 deletions(-) diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss index 06ed0693de9f..6bfae32ea9e2 100644 --- 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; + } + } +} diff --git a/content/en/docs/collector/img/otel-collector.svg b/content/en/docs/collector/img/otel-collector.svg index 022696c23bb7..18f0c90f4108 100644 --- a/content/en/docs/collector/img/otel-collector.svg +++ b/content/en/docs/collector/img/otel-collector.svg @@ -1,379 +1,2382 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/otel-diagram.svg b/static/img/otel-diagram.svg index 0bca7d5433b4..e10eeabb0fc1 100644 --- a/static/img/otel-diagram.svg +++ b/static/img/otel-diagram.svg @@ -1,6 +1,6 @@ - + diff --git a/static/img/waterfall-trace.svg b/static/img/waterfall-trace.svg index 794f85b9926f..14ea6abd973c 100644 --- a/static/img/waterfall-trace.svg +++ b/static/img/waterfall-trace.svg @@ -1,6 +1,6 @@ - +