set color-scheme based on current theme (#1360)

iTwin · Jun 16, 2023 · 30f5b28 · 30f5b28
1 parent 2a73b0e
commit 30f5b28
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/nervous-birds-shake.md b/.changeset/nervous-birds-shake.md
@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': patch
+'@itwin/itwinui-variables': patch
+---
+
+The `color-scheme` property will now be correctly set for dark theme, resulting in better theming of built-in html elements.
diff --git a/...bitmaps_reference/iTwinUI_tag_State_hover_basic_dark_0_demo-basic_0_desktop.png b/...bitmaps_reference/iTwinUI_tag_State_hover_basic_dark_0_demo-basic_0_desktop.png
diff --git a/...maps_reference/iTwinUI_tag_State_hover_basic_hc_dark_0_demo-basic_0_desktop.png b/...maps_reference/iTwinUI_tag_State_hover_basic_hc_dark_0_demo-basic_0_desktop.png
diff --git a/...esults/bitmaps_reference/iTwinUI_tag_Type_Basic_dark_0_demo-basic_0_desktop.png b/...esults/bitmaps_reference/iTwinUI_tag_Type_Basic_dark_0_demo-basic_0_desktop.png
diff --git a/...lts/bitmaps_reference/iTwinUI_tag_Type_Basic_hc_dark_0_demo-basic_0_desktop.png b/...lts/bitmaps_reference/iTwinUI_tag_Type_Basic_hc_dark_0_demo-basic_0_desktop.png
diff --git a/packages/itwinui-variables/src/index.scss b/packages/itwinui-variables/src/index.scss
@@ -9,6 +9,7 @@
 
 // global vars shared between all themes
 :where([data-iui-theme]) {
+  color-scheme: light dark;
   @include spacing;
   @include component-heights;
   @include border-radii;
@@ -20,6 +21,7 @@
 }
 
 :where([data-iui-theme='light']) {
+  color-scheme: light;
   @include themes.light-theme;
 
   &:where([data-iui-contrast='high']) {
@@ -28,6 +30,7 @@
 }
 
 :where([data-iui-theme='dark']) {
+  color-scheme: dark;
   @include themes.dark-theme;
 
   &:where([data-iui-contrast='high']) {