add button to toggle the optional theme when viewing the docs; fixes #9764

docs/_includes/header.html

@@ -15,6 +15,10 @@
 
 <!-- Bootstrap core CSS -->
 <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+  <!-- Optional Bootstrap Theme -->
+  <link href="" data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% endif %}
 
 <!-- Documentation extras -->
 <link href="../assets/css/docs.min.css" rel="stylesheet">

docs/_layouts/default.html

@@ -50,6 +50,11 @@
           </div>
         </div>
       </div>
+      {% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+        <div>
+          <button id="bs-theme-btn" type="button" class="btn btn-default">Activate Theme</button>
+        </div>
+      {% endif %}
 
     </div>
 

docs/assets/css/_src/docs.css

@@ -1452,3 +1452,9 @@ h1[id] {
   -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
           box-shadow: 0 0 8px rgba(82,168,236,.6);
 }
+
+#bs-theme-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}

docs/assets/js/_src/application.js

@@ -53,6 +53,22 @@
       $('.bs-top').affix()
     }, 100)
 
+    // theme toggler
+    ;(function () {
+      var stylesheetLink = $('#bs-theme-stylesheet')
+      var themeBtn = $('#bs-theme-btn')
+      themeBtn.click(function () {
+        if (stylesheetLink.attr('href')) {
+          stylesheetLink.attr('href', '')
+          themeBtn.text('Activate Theme')
+        }
+        else {
+          stylesheetLink.attr('href', stylesheetLink.attr('data-href'))
+          themeBtn.text('Deactivate Theme')
+        }
+      })
+    })();
+
     // tooltip demo
     $('.tooltip-demo').tooltip({
       selector: '[data-toggle="tooltip"]',