Merge pull request #62 from logto-io/gao--set-theme-by-system-config

feat(ui): set theme according to system configuration

packages/ui/razzle.config.js

@@ -26,6 +26,7 @@ module.exports = {
       '^.+\\.(css|less|scss)$': 'babel-jest',
       '@/(.*)': '<rootDir>/src/$1',
     };
+    config.setupFilesAfterEnv = [...config.setupFilesAfterEnv, './src/jest.setup.ts'];
 
     return config;
   },

packages/ui/src/App.tsx

@@ -1,22 +1,27 @@
 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';
 import Register from './pages/Register';
 import './scss/normalized.scss';
 
-initI18n();
+void 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;

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;
+}

packages/ui/src/init/i18n.ts

@@ -3,8 +3,8 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import resources from '@logto/phrases';
 
-const initI18n = () => {
-  void i18n
+const initI18n = async () =>
+  i18n
     .use(initReactI18next)
     .use(LanguageDetector)
     .init({
@@ -14,6 +14,5 @@ const initI18n = () => {
         escapeValue: false,
       },
     });
-};
 
 export default initI18n;

packages/ui/src/jest.setup.ts

@@ -0,0 +1,18 @@
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+export {};