diff --git a/packages/frontend/component/src/theme/theme.css.ts b/packages/frontend/component/src/theme/theme.css.ts
index 24187dc84..c471d45a1 100644
--- a/packages/frontend/component/src/theme/theme.css.ts
+++ b/packages/frontend/component/src/theme/theme.css.ts
@@ -11,8 +11,12 @@ globalStyle('html', {
vars: lightCssVariables,
});
-globalStyle('html[data-theme="dark"]', {
- vars: darkCssVariables,
+globalStyle('html', {
+ '@media': {
+ '(prefers-color-scheme: dark)': {
+ vars: darkCssVariables,
+ },
+ },
});
if (process.env.NODE_ENV === 'development') {
diff --git a/packages/frontend/core/.webpack/template.html b/packages/frontend/core/.webpack/template.html
index 4c0ee9501..0b8b6e471 100644
--- a/packages/frontend/core/.webpack/template.html
+++ b/packages/frontend/core/.webpack/template.html
@@ -2,6 +2,7 @@
+