diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 75f7a9f1d..9688902b7 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import AppContent from './components/AppContent';
+import useTheme from './hooks/use-theme';
 import initI18n from './init/i18n';
 import Consent from './pages/Consent';
 import SignIn from './pages/SignIn';
@@ -9,14 +10,18 @@ import './scss/normalized.scss';
 
 initI18n();
 
-const App = () => (
-  <AppContent theme="dark">
-    <Switch>
-      <Route exact path="/sign-in" component={SignIn} />
-      <Route exact path="/sign-in/consent" component={Consent} />
-      <Route exact path="/Register" component={Register} />
-    </Switch>
-  </AppContent>
-);
+const App = () => {
+  const theme = useTheme();
+
+  return (
+    <AppContent theme={theme}>
+      <Switch>
+        <Route exact path="/sign-in" component={SignIn} />
+        <Route exact path="/sign-in/consent" component={Consent} />
+        <Route exact path="/register" component={Register} />
+      </Switch>
+    </AppContent>
+  );
+};
 
 export default App;
diff --git a/packages/ui/src/hooks/use-theme.ts b/packages/ui/src/hooks/use-theme.ts
new file mode 100644
index 000000000..b9e9a09d3
--- /dev/null
+++ b/packages/ui/src/hooks/use-theme.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { Theme } from '@/components/AppContent';
+
+const darkThemeWatchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+const getThemeBySystemConfiguration = (): Theme => (darkThemeWatchMedia.matches ? 'dark' : 'light');
+
+export default function useTheme() {
+  const [theme, setTheme] = useState(getThemeBySystemConfiguration());
+
+  useEffect(() => {
+    const changeTheme = () => {
+      setTheme(getThemeBySystemConfiguration());
+    };
+
+    darkThemeWatchMedia.addEventListener('change', changeTheme);
+    return () => {
+      darkThemeWatchMedia.removeEventListener('change', changeTheme);
+    };
+  }, []);
+
+  return theme;
+}