feat: use system theme if default (#48568)
* feat: use system theme if default * feat: add system to theme * feat: detect if system theme should be used * fix: remove system from Themes * fix: change 'system' to 'default' Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> * fix: change 'system' to 'default' Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> * fix: check if user is logged in for system theme Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>pull/48761/head
parent
cbf1b09f23
commit
628764f270
|
@ -90,9 +90,15 @@ interface DefaultLayoutProps extends StateProps, DispatchProps {
|
|||
block?: string;
|
||||
superBlock?: string;
|
||||
t: TFunction;
|
||||
useTheme?: boolean;
|
||||
}
|
||||
|
||||
const getSystemTheme = () =>
|
||||
`${
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches === true
|
||||
? 'dark-palette'
|
||||
: 'light-palette'
|
||||
}`;
|
||||
|
||||
class DefaultLayout extends Component<DefaultLayoutProps> {
|
||||
static displayName = 'DefaultLayout';
|
||||
|
||||
|
@ -143,17 +149,18 @@ class DefaultLayout extends Component<DefaultLayoutProps> {
|
|||
superBlock,
|
||||
t,
|
||||
theme = 'default',
|
||||
user,
|
||||
useTheme = true
|
||||
user
|
||||
} = this.props;
|
||||
|
||||
const useSystemTheme = fetchState.complete && isSignedIn === false;
|
||||
|
||||
return (
|
||||
<div className='page-wrapper'>
|
||||
<Helmet
|
||||
bodyAttributes={{
|
||||
class: useTheme
|
||||
? `${theme === 'default' ? 'light-palette' : 'dark-palette'}`
|
||||
: 'light-palette'
|
||||
class: useSystemTheme
|
||||
? getSystemTheme()
|
||||
: `${theme === 'night' ? 'dark' : 'light'}-palette`
|
||||
}}
|
||||
meta={[
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue