Fixes #5322 - Scrollbars are rendered always in the light mode.

app/assets/javascripts/app/controllers/_plugin/theme.coffee

@@ -51,6 +51,7 @@ class App.Theme extends App.Controller
       App.Event.trigger('ui:theme:saved', data)
 
     document.documentElement.dataset.theme = @currentTheme(data.theme)
+    document.documentElement.style.colorScheme = @currentTheme(data.theme)
     App.Event.trigger('ui:theme:changed', data)
 
 App.Config.set('theme', App.Theme, 'Plugins')

app/frontend/apps/desktop/components/UserTaskbarTabs/UserTaskbarTabs.vue

@@ -240,6 +240,7 @@ const { popover, popoverTarget, toggle, isOpen: popoverIsOpen } = usePopover()
           ref="dndParentRef"
           class="flex flex-col gap-1.5 overflow-y-auto p-1"
           data-theme="dark"
+          :style="{ colorScheme: 'dark' }"
         >
           <li
             v-for="tabEntityKey in dndTaskbarTabListOrder"

app/frontend/apps/desktop/stores/__tests__/theme.spec.ts

@@ -22,19 +22,23 @@ const mockUserTheme = (theme: string | undefined) => {
   })
 }
 
+const getRoot = () => document.querySelector(':root') as HTMLElement
+
 const haveDOMTheme = (theme: string | undefined) => {
-  const root = document.querySelector(':root') as HTMLElement
+  const root = getRoot()
+
   if (!theme) {
     root.removeAttribute('data-theme')
+    root.style.colorScheme = 'normal'
   } else {
     root.dataset.theme = theme
+    root.style.colorScheme = theme
   }
 }
 
-const getDOMTheme = () => {
-  const root = document.querySelector(':root') as HTMLElement
-  return root.dataset.theme
-}
+const getDOMTheme = () => getRoot().dataset.theme
+
+const getDOMColorScheme = () => getRoot().style.colorScheme
 
 describe('useThemeStore', () => {
   beforeEach(() => {
@@ -96,9 +100,9 @@ describe('useThemeStore', () => {
       },
     )
 
-    const themStore = useThemeStore()
-    const { updateTheme } = themStore
-    const { currentTheme, savingTheme } = storeToRefs(themStore)
+    const themeStore = useThemeStore()
+    const { updateTheme } = themeStore
+    const { currentTheme, savingTheme } = storeToRefs(themeStore)
 
     await updateTheme(EnumAppearanceTheme.Dark)
 
@@ -131,12 +135,14 @@ describe('useThemeStore', () => {
 
     expect(currentTheme).toBe(EnumAppearanceTheme.Dark)
     expect(getDOMTheme()).toBe(EnumAppearanceTheme.Dark)
+    expect(getDOMColorScheme()).toBe(EnumAppearanceTheme.Dark)
 
     mockMediaTheme(EnumAppearanceTheme.Light)
     addEventListener.mock.calls[0][1]()
 
     expect(currentTheme).toBe(EnumAppearanceTheme.Dark)
     expect(getDOMTheme()).toBe(EnumAppearanceTheme.Dark)
+    expect(getDOMColorScheme()).toBe(EnumAppearanceTheme.Dark)
   })
 
   describe('isDarkMode', () => {

app/frontend/apps/desktop/stores/theme.ts

@@ -25,7 +25,10 @@ const sanitizeTheme = (theme: string): AppThemeName => {
 }
 
 const saveDOMTheme = (theme: AppThemeName) => {
-  getRoot().dataset.theme = theme
+  const root = getRoot()
+
+  root.dataset.theme = theme
+  root.style.colorScheme = theme
 }
 
 export const useThemeStore = defineStore('theme', () => {

i18n/zammad.pot

@@ -13797,7 +13797,7 @@ msgstr ""
 msgid "The admin password auth email could not be sent."
 msgstr ""
 
-#: app/frontend/apps/desktop/stores/theme.ts:39
+#: app/frontend/apps/desktop/stores/theme.ts:42
 msgid "The appearance could not be updated."
 msgstr ""