-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Add a guide for setting dark mode by default (#34839)
- Loading branch information
1 parent
b884b7f
commit 107a137
Showing
17 changed files
with
331 additions
and
19 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
docs/data/joy/customization/dark-mode/DarkModeByDefault.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import * as React from 'react'; | ||
import { CssVarsProvider } from '@mui/joy/styles'; | ||
import Sheet from '@mui/joy/Sheet'; | ||
import Chip from '@mui/joy/Chip'; | ||
import Typography from '@mui/joy/Typography'; | ||
|
||
export default function DarkModeByDefault() { | ||
return ( | ||
<CssVarsProvider | ||
defaultMode="dark" | ||
// the props below are specific to this demo, | ||
// you might not need them in your app. | ||
// | ||
// the selector to apply CSS theme variables stylesheet. | ||
colorSchemeSelector="#demo_dark-mode-by-default" | ||
// | ||
// the local storage key to use | ||
modeStorageKey="demo_dark-mode-by-default" | ||
> | ||
<div id="demo_dark-mode-by-default"> | ||
<Sheet sx={{ px: 3, py: 1.5, borderRadius: 'sm' }}> | ||
<Typography | ||
component="div" | ||
endDecorator={ | ||
<Chip variant="outlined" color="primary" size="sm"> | ||
Default | ||
</Chip> | ||
} | ||
fontSize="lg" | ||
> | ||
Dark mode | ||
</Typography> | ||
</Sheet> | ||
</div> | ||
</CssVarsProvider> | ||
); | ||
} |
37 changes: 37 additions & 0 deletions
37
docs/data/joy/customization/dark-mode/DarkModeByDefault.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import * as React from 'react'; | ||
import { CssVarsProvider } from '@mui/joy/styles'; | ||
import Sheet from '@mui/joy/Sheet'; | ||
import Chip from '@mui/joy/Chip'; | ||
import Typography from '@mui/joy/Typography'; | ||
|
||
export default function DarkModeByDefault() { | ||
return ( | ||
<CssVarsProvider | ||
defaultMode="dark" | ||
// the props below are specific to this demo, | ||
// you might not need them in your app. | ||
// | ||
// the selector to apply CSS theme variables stylesheet. | ||
colorSchemeSelector="#demo_dark-mode-by-default" | ||
// | ||
// the local storage key to use | ||
modeStorageKey="demo_dark-mode-by-default" | ||
> | ||
<div id="demo_dark-mode-by-default"> | ||
<Sheet sx={{ px: 3, py: 1.5, borderRadius: 'sm' }}> | ||
<Typography | ||
component="div" | ||
endDecorator={ | ||
<Chip variant="outlined" color="primary" size="sm"> | ||
Default | ||
</Chip> | ||
} | ||
fontSize="lg" | ||
> | ||
Dark mode | ||
</Typography> | ||
</Sheet> | ||
</div> | ||
</CssVarsProvider> | ||
); | ||
} |
51 changes: 51 additions & 0 deletions
51
docs/data/joy/customization/dark-mode/IdentifySystemMode.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import * as React from 'react'; | ||
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; | ||
import Typography from '@mui/joy/Typography'; | ||
|
||
const Identifier = () => { | ||
const { systemMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return ( | ||
<Typography component="div" fontSize="lg" sx={{ opacity: 0 }}> | ||
Calculating… | ||
</Typography> | ||
); | ||
} | ||
return ( | ||
<Typography component="div" fontSize="lg"> | ||
Your system is in{' '} | ||
<Typography | ||
variant="outlined" | ||
fontSize="md" | ||
sx={{ | ||
boxShadow: 'sm', | ||
py: 0.25, | ||
fontFamily: 'code', | ||
bgcolor: 'background.level1', | ||
}} | ||
> | ||
{systemMode} | ||
</Typography>{' '} | ||
mode. | ||
</Typography> | ||
); | ||
}; | ||
|
||
export default function IdentifySystemMode() { | ||
return ( | ||
<CssVarsProvider | ||
defaultMode="system" | ||
// The props below are specific to this demo, | ||
// you might not need them in your app. | ||
// | ||
// the local storage key to use. | ||
modeStorageKey="demo_identify-system-mode" | ||
> | ||
<Identifier /> | ||
</CssVarsProvider> | ||
); | ||
} |
51 changes: 51 additions & 0 deletions
51
docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import * as React from 'react'; | ||
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; | ||
import Typography from '@mui/joy/Typography'; | ||
|
||
const Identifier = () => { | ||
const { systemMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return ( | ||
<Typography component="div" fontSize="lg" sx={{ opacity: 0 }}> | ||
Calculating… | ||
</Typography> | ||
); | ||
} | ||
return ( | ||
<Typography component="div" fontSize="lg"> | ||
Your system is in{' '} | ||
<Typography | ||
variant="outlined" | ||
fontSize="md" | ||
sx={{ | ||
boxShadow: 'sm', | ||
py: 0.25, | ||
fontFamily: 'code', | ||
bgcolor: 'background.level1', | ||
}} | ||
> | ||
{systemMode} | ||
</Typography>{' '} | ||
mode. | ||
</Typography> | ||
); | ||
}; | ||
|
||
export default function IdentifySystemMode() { | ||
return ( | ||
<CssVarsProvider | ||
defaultMode="system" | ||
// The props below are specific to this demo, | ||
// you might not need them in your app. | ||
// | ||
// the local storage key to use. | ||
modeStorageKey="demo_identify-system-mode" | ||
> | ||
<Identifier /> | ||
</CssVarsProvider> | ||
); | ||
} |
10 changes: 10 additions & 0 deletions
10
docs/data/joy/customization/dark-mode/IdentifySystemMode.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<CssVarsProvider | ||
defaultMode="system" | ||
// The props below are specific to this demo, | ||
// you might not need them in your app. | ||
// | ||
// the local storage key to use. | ||
modeStorageKey="demo_identify-system-mode" | ||
> | ||
<Identifier /> | ||
</CssVarsProvider> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import * as React from 'react'; | ||
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; | ||
import Box from '@mui/joy/Box'; | ||
import Button from '@mui/joy/Button'; | ||
|
||
const useEnhancedEffect = | ||
typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; | ||
|
||
function ModeSwitcher() { | ||
const { mode, setMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
|
||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
|
||
if (!mounted) { | ||
return null; | ||
} | ||
return ( | ||
<Button | ||
variant="outlined" | ||
color="neutral" | ||
onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')} | ||
> | ||
{mode === 'dark' ? 'Turn light' : 'Turn dark'} | ||
</Button> | ||
); | ||
} | ||
|
||
export default function ModeToggle() { | ||
// the `node` is used for attaching CSS variables to this demo, | ||
// you might not need it in your application. | ||
const [node, setNode] = React.useState<HTMLElement | null>(null); | ||
useEnhancedEffect(() => { | ||
setNode(document.getElementById('mode-toggle')); | ||
}, []); | ||
|
||
return ( | ||
<CssVarsProvider | ||
// the props below are specific to this demo, | ||
// you might not need them in your app. | ||
// | ||
// the element to apply [data-joy-color-scheme] attribute. | ||
colorSchemeNode={node || null} | ||
// | ||
// the selector to apply the CSS theme variables stylesheet. | ||
colorSchemeSelector="#mode-toggle" | ||
// | ||
// the local storage key to use. | ||
modeStorageKey="mode-toggle-demo" | ||
> | ||
<Box | ||
id="mode-toggle" | ||
sx={{ | ||
textAlign: 'center', | ||
flexGrow: 1, | ||
p: 2, | ||
m: -3, | ||
borderRadius: [0, 'sm'], | ||
bgcolor: 'background.body', | ||
}} | ||
> | ||
<ModeSwitcher /> | ||
</Box> | ||
</CssVarsProvider> | ||
); | ||
} |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.