Add color-scheme to the root styling (#4477)

Signed-off-by: Miki <[email protected]>
opensearch-project · Jul 3, 2023 · 021671a · 021671a
1 parent 3f357b5
commit 021671a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add configurable defaults and overrides to uiSettings ([#4344](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4344))
 - Introduce new fonts for the Next theme ([#4381](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4381))
 - Bump OUI to `1.1.2` to make `anomalyDetection` icon available ([#4408](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4408))
+- Add `color-scheme` to the root styling ([#4477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4477))
 - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412))
 
 ### 🐛 Bug Fixes

diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx
@@ -43,6 +43,9 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
     <style
       dangerouslySetInnerHTML={{
         __html: `
+          :root {
+            color-scheme: ${darkMode ? 'dark' : 'light'};
+          }
 
           *, *:before, *:after {
             box-sizing: border-box;