diff --git a/src-ui/src/app/services/app-view.service.ts b/src-ui/src/app/services/app-view.service.ts
index 33b47ce82..b44c8965f 100644
--- a/src-ui/src/app/services/app-view.service.ts
+++ b/src-ui/src/app/services/app-view.service.ts
@@ -19,11 +19,11 @@ export class AppViewService {
let darkModeEnabled = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED)) || GENERAL_SETTINGS.DARK_MODE_ENABLED_DEFAULT
if (darkModeUseSystem) {
- this.renderer.addClass(this.document.body, 'dark-mode-preferred')
- this.renderer.removeClass(this.document.body, 'dark-mode')
+ this.renderer.addClass(this.document.body, 'color-scheme-system')
+ this.renderer.removeClass(this.document.body, 'color-scheme-dark')
} else {
- this.renderer.removeClass(this.document.body, 'dark-mode-preferred')
- darkModeEnabled ? this.renderer.addClass(this.document.body, 'dark-mode') : this.renderer.removeClass(this.document.body, 'dark-mode')
+ this.renderer.removeClass(this.document.body, 'color-scheme-system')
+ darkModeEnabled ? this.renderer.addClass(this.document.body, 'color-scheme-dark') : this.renderer.removeClass(this.document.body, 'dark-mode')
}
}
diff --git a/src-ui/src/index.html b/src-ui/src/index.html
index f6a313a48..b688b25b5 100644
--- a/src-ui/src/index.html
+++ b/src-ui/src/index.html
@@ -8,7 +8,7 @@
-
+
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 1f8380bad..a122f1d86 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -319,11 +319,11 @@ $border-color-dark-mode: #47494f;
}
}
-body.dark-mode {
+body.color-scheme-dark {
@include dark-mode;
}
-@media (prefers-color-scheme: dark) {
- body.dark-mode-preferred {
+body.color-scheme-system {
+ @media (prefers-color-scheme: dark) {
@include dark-mode;
}
}