CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: Use system theme (#60)

Browse source 
Use resolvedTheme theme from next-theme
This commit is contained in:
Joaquin "Florius" Azcarate 2022-04-01 22:36:03 +02:00 committed by GitHub
parent e3e9d993f2
commit dee06fab90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/components/header/controls.tsx
View file

@ -8,11 +8,11 @@ import { useTheme } from 'next-themes'
const Controls = () => { const Controls = () => {
const [mounted, setMounted] = useState(false) const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme() const { resolvedTheme, setTheme } = useTheme()
useEffect(() => setMounted(true), []) useEffect(() => setMounted(true), [])
if (!mounted) return null if (!mounted) return null
const switchThemes = () => { const switchThemes = () => {
if (theme === 'dark') { if (resolvedTheme === 'dark') {
setTheme('light') setTheme('light')
} else { } else {
setTheme('dark') setTheme('dark')
@ -26,7 +26,7 @@ const Controls = () => {
h="28px" h="28px"
pure pure
onChange={switchThemes} onChange={switchThemes}
value={theme} value={resolvedTheme}
> >
<Select.Option value="light"> <Select.Option value="light">
<span className={styles.selectContent}> <span className={styles.selectContent}>

8
client/components/header/header.tsx
View file

@ -39,7 +39,7 @@ const Header = () => {
const { signedIn: isSignedIn, signout } = useSignedIn() const { signedIn: isSignedIn, signout } = useSignedIn()
const userData = useUserData(); const userData = useUserData();
const [pages, setPages] = useState<Tab[]>([]) const [pages, setPages] = useState<Tab[]>([])
const { setTheme, theme } = useTheme() const { setTheme, resolvedTheme } = useTheme()
useEffect(() => { useEffect(() => {
setBodyHidden(expanded) setBodyHidden(expanded)
@ -63,9 +63,9 @@ const Header = () => {
name: isMobile ? "Change theme" : "", name: isMobile ? "Change theme" : "",
onClick: function () { onClick: function () {
if (typeof window !== 'undefined') if (typeof window !== 'undefined')
setTheme(theme === 'light' ? 'dark' : 'light'); setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
}, },
icon: theme === 'light' ? <MoonIcon /> : <SunIcon />, icon: resolvedTheme === 'light' ? <MoonIcon /> : <SunIcon />,
value: "theme", value: "theme",
} }
] ]
@ -133,7 +133,7 @@ const Header = () => {
} }
// TODO: investigate deps causing infinite loop // TODO: investigate deps causing infinite loop
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMobile, isSignedIn, theme, userData]) }, [isMobile, isSignedIn, resolvedTheme, userData])
const onTabChange = useCallback((tab: string) => { const onTabChange = useCallback((tab: string) => {
if (typeof window === 'undefined') return if (typeof window === 'undefined') return