asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: fix color mode tabs (#2541)

Browse Source
This commit is contained in:
Shahed Nasser
2022-11-03 19:53:39 +02:00
committed by GitHub
parent 3a727c6f68
commit e4e65812a6
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/docs/src/theme/ColorModeToggle/index.js
+5 -6
View File
@@ -9,14 +9,13 @@ const allowedModes = [
'auto' 'auto'
] ]
function ColorModeToggle({className, value, onChange}) { function ColorModeToggle({className, onChange}) {
const isBrowser = useIsBrowser(); const isBrowser = useIsBrowser();
const {colorMode} = useColorMode(); const [storageColorMode, setStorageColorMode] = useState('light')
const [storageColorMode, setStorageColorMode] = useState(colorMode)
useEffect(() => { useEffect(() => {
if (isBrowser) { if (isBrowser) {
const previousSelected = window.localStorage.getItem('selected-color-mode') const previousSelected = window.localStorage.getItem('selected-color-mode') || window.localStorage.getItem('theme')
if (previousSelected && allowedModes.includes(previousSelected)) { if (previousSelected && allowedModes.includes(previousSelected)) {
setStorageColorMode(previousSelected) setStorageColorMode(previousSelected)
} }
@@ -63,7 +62,7 @@ function ColorModeToggle({className, value, onChange}) {
<button <button
className={clsx( className={clsx(
'pill-button', 'pill-button',
(colorMode === 'light' && storageColorMode === 'light') && 'active' (storageColorMode === 'light') && 'active'
)} )}
onClick={() => handleColorModeChange('light')} onClick={() => handleColorModeChange('light')}
disabled={!isBrowser} disabled={!isBrowser}
@@ -74,7 +73,7 @@ function ColorModeToggle({className, value, onChange}) {
<button <button
className={clsx( className={clsx(
'pill-button', 'pill-button',
(colorMode === 'dark' && storageColorMode === 'dark') && 'active' (storageColorMode === 'dark') && 'active'
)} )}
onClick={() => handleColorModeChange('dark')} onClick={() => handleColorModeChange('dark')}
disabled={!isBrowser} disabled={!isBrowser}