diff --git a/frontend/src/app.js b/frontend/src/app.js
index 1d1d91bc84..f58f8ab02f 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -95,8 +95,20 @@ class App extends Component {
     this.navigateClientUrlToLib();
 
     this.initCurrentTabByLocation();
+    this.colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this.colorSchemeQuery.addEventListener('change', this.handleColorSchemeChange);
   }
 
+  componentWillUnmount() {
+    this.colorSchemeQuery.removeEventListener('change', this.handleColorSchemeChange);
+  }
+
+  handleColorSchemeChange = (e) => {
+    const isDark = e.matches;
+    document.body.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
+    this.forceUpdate();
+  };
+
   initCurrentTabByLocation = () => {
     // when visit the siteRoot page, highlight the 'Files' tab in the side nav.
     if (location.pathname == siteRoot) {