diff --git a/docs/.vuepress/components/DemoViewer.vue b/docs/.vuepress/components/DemoViewer.vue
index bec815183..7f830b299 100644
--- a/docs/.vuepress/components/DemoViewer.vue
+++ b/docs/.vuepress/components/DemoViewer.vue
@@ -22,11 +22,16 @@ export default {
             type: String,
             default: '300',
         },
+        darkcode: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         src() {
-            const { value, user } = this;
-            return `//jsfiddle.net/${user}/${value}/embedded/js,html,css,result`;
+            const { value, user, darkcode } = this;
+            const dcStr = darkcode ? '/dark/?menuColor=fff&fontColor=333&accentColor=e67891' : '';
+            return `//jsfiddle.net/${user}/${value}/embedded/js,html,css,result${dcStr}`;
         }
     }
 }
diff --git a/docs/modules/Modal.md b/docs/modules/Modal.md
index efc58bffe..044cc6ba0 100644
--- a/docs/modules/Modal.md
+++ b/docs/modules/Modal.md
@@ -117,6 +117,10 @@ editor.on('modal', props => {
 });
 ```
 
+Here an example of using the Bootstrap modal.
+
+<demo-viewer value="x70amv3f" height="500" darkcode/>
+
 
 ## Events