Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-20 21:32:31 -05:00
Code Issues Activity

feat(ui): set theme according to system configuration

Browse source
This commit is contained in:
Gao Sun 2021-08-02 21:11:38 +08:00
parent c760d53e25
commit a245f5f1e6
No known key found for this signature in database
GPG key ID: 0F0EFA2E36639F31
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/ui/src/App.tsx
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import AppContent from './components/AppContent'; import AppContent from './components/AppContent';
import useTheme from './hooks/use-theme';
import initI18n from './init/i18n'; import initI18n from './init/i18n';
import Consent from './pages/Consent'; import Consent from './pages/Consent';
import SignIn from './pages/SignIn'; import SignIn from './pages/SignIn';
@ -9,14 +10,18 @@ import './scss/normalized.scss';
initI18n(); initI18n();
const App = () => ( const App = () => {
<AppContent theme="dark"> const theme = useTheme();
<Switch>
<Route exact path="/sign-in" component={SignIn} /> return (
<Route exact path="/sign-in/consent" component={Consent} /> <AppContent theme={theme}>
<Route exact path="/Register" component={Register} /> <Switch>
</Switch> <Route exact path="/sign-in" component={SignIn} />
</AppContent> <Route exact path="/sign-in/consent" component={Consent} />
); <Route exact path="/register" component={Register} />
</Switch>
</AppContent>
);
};
export default App; export default App;

22
packages/ui/src/hooks/use-theme.ts Normal file
View file

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