mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-07 13:22:26 +02:00
docs(v2): Added switch config docs to theme-classic API (#3194)
* Reduce commented info in API
* Update yarn lock
* Add switch config documentation to theme-classic
* Expand highlighted code block
* Add unicode example to icons
* Punctuation and white space fixes
* Revert changed comment
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
* Remove camel case comment
* Revert api style comment
* Revert "Update yarn lock"
This reverts commit 5b5b3d39a1
.
* Update website/docs/theme-classic.md
* Update website/docs/theme-classic.md
* Update website/docs/theme-classic.md
* Update website/docs/theme-classic.md
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
This commit is contained in:
parent
59f705ee66
commit
fdf08e787f
2 changed files with 23 additions and 2 deletions
|
@ -174,7 +174,7 @@ module.exports = {
|
||||||
switchConfig: {
|
switchConfig: {
|
||||||
darkIcon: '🌙',
|
darkIcon: '🌙',
|
||||||
lightIcon: '\u2600',
|
lightIcon: '\u2600',
|
||||||
// React inline style objects
|
// React inline style object
|
||||||
// see https://reactjs.org/docs/dom-elements.html#style
|
// see https://reactjs.org/docs/dom-elements.html#style
|
||||||
darkIconStyle: {
|
darkIconStyle: {
|
||||||
marginLeft: '2px',
|
marginLeft: '2px',
|
||||||
|
|
|
@ -17,7 +17,7 @@ The classic theme provides by default light and dark mode support, with a navbar
|
||||||
|
|
||||||
It is possible to customize the color mode support with the following configuration:
|
It is possible to customize the color mode support with the following configuration:
|
||||||
|
|
||||||
```js {6-15} title="docusaurus.config.js"
|
```js {6-35} title="docusaurus.config.js"
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// ...
|
// ...
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
|
@ -33,6 +33,27 @@ module.exports = {
|
||||||
// Should we use the prefers-color-scheme media-query,
|
// Should we use the prefers-color-scheme media-query,
|
||||||
// using user system preferences, instead of the hardcoded defaultMode
|
// using user system preferences, instead of the hardcoded defaultMode
|
||||||
respectPrefersColorScheme: false,
|
respectPrefersColorScheme: false,
|
||||||
|
|
||||||
|
// Dark/light switch icon options
|
||||||
|
switchConfig: {
|
||||||
|
// Icon for the switch while in dark mode
|
||||||
|
darkIcon: '🌙',
|
||||||
|
|
||||||
|
// CSS to apply to dark icon,
|
||||||
|
// React inline style object
|
||||||
|
// see https://reactjs.org/docs/dom-elements.html#style
|
||||||
|
darkIconStyle: {
|
||||||
|
marginLeft: '2px',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Unicode icons such as '\u2600' will work
|
||||||
|
// Unicode with 5 chars require brackets: '\u{1F602}'
|
||||||
|
lightIcon: '\u{1F602}'
|
||||||
|
|
||||||
|
lightIconStyle: {
|
||||||
|
marginLeft: '1px',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// ...
|
// ...
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue