From 84af22fd311212a0466a8a1d97c5f0e9ef26e658 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Thu, 16 Apr 2026 08:48:29 +0200 Subject: [PATCH] feat: set global color-scheme Sets the current theme via the `color-scheme` CSS prop, ensuring that native browser elements like scroll bars have the proper color. --- index.html | 1 - .../src/components/OcDatepicker/OcDatepicker.vue | 8 -------- packages/web-pkg/src/composables/piniaStores/theme.ts | 1 + 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/index.html b/index.html index 928de98696..2ad332ab42 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - __TITLE__ diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue index 00268b7265..49d2cd54f8 100644 --- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue +++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue @@ -120,13 +120,5 @@ watch( .oc-date-picker input::-webkit-calendar-picker-indicator { @apply cursor-pointer; } - - .oc-date-picker-dark input { - color-scheme: dark; - } - - .oc-date-picker-dark input::-webkit-calendar-picker-indicator { - filter: invert(0); - } } diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts index e8b255ce1d..33429c309b 100644 --- a/packages/web-pkg/src/composables/piniaStores/theme.ts +++ b/packages/web-pkg/src/composables/piniaStores/theme.ts @@ -119,6 +119,7 @@ export const useThemeStore = defineStore('theme', () => { currentLocalStorageThemeName.value = unref(currentTheme).label } + document.documentElement.style.colorScheme = theme.isDark ? 'dark' : 'light' const customizableDesignTokens = [ { name: 'roles', prefix: 'role' }, { name: 'colorPalette', prefix: 'color' }