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