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:
Drew Alexander 2020-08-06 00:54:41 +08:00 committed by GitHub
parent 59f705ee66
commit fdf08e787f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 2 deletions

View file

@ -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',

View file

@ -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',
},
},
}, },
// ... // ...
}, },