From fdf08e787f8fb5831cf752f703bbd556129e791a Mon Sep 17 00:00:00 2001
From: Drew Alexander <drewalexander986@gmail.com>
Date: Thu, 6 Aug 2020 00:54:41 +0800
Subject: [PATCH] docs(v2): Added switch config docs to theme-classic API
 (#3194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 5b5b3d39a1794eeb905c1f6678ca97ecd6e1bbdc.

* 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>
---
 website/docs/api/docusaurus.config.js.md |  2 +-
 website/docs/theme-classic.md            | 23 ++++++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md
index 08d0041109..d3031c9006 100644
--- a/website/docs/api/docusaurus.config.js.md
+++ b/website/docs/api/docusaurus.config.js.md
@@ -174,7 +174,7 @@ module.exports = {
       switchConfig: {
         darkIcon: '🌙',
         lightIcon: '\u2600',
-        // React inline style objects
+        // React inline style object
         // see https://reactjs.org/docs/dom-elements.html#style
         darkIconStyle: {
           marginLeft: '2px',
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index 0107fbf604..91dab8be62 100644
--- a/website/docs/theme-classic.md
+++ b/website/docs/theme-classic.md
@@ -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:
 
-```js {6-15} title="docusaurus.config.js"
+```js {6-35} title="docusaurus.config.js"
 module.exports = {
   // ...
   themeConfig: {
@@ -33,6 +33,27 @@ module.exports = {
       // Should we use the prefers-color-scheme media-query,
       // using user system preferences, instead of the hardcoded defaultMode
       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',
+        },
+      },
     },
     // ...
   },