diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html
index 26ca901fcd22..1b41342b0de8 100644
--- a/util/gh-pages/index_template.html
+++ b/util/gh-pages/index_template.html
@@ -17,7 +17,7 @@
     <link id="githubLightHighlight" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css" disabled="true" /> {# #}
     <link id="githubDarkHighlight" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css" disabled="true" /> {# #}
 
-    <!-- The files are not copied over into the Clippy project since they use the MPL-2.0 License -->
+    <!-- The files are not copied over into the Clippy project since they use the MPL-2.0 License --> {# #}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rust-lang/mdBook@0.4.46/src/theme/css/variables.css"/> {# #}
     <link id="styleHighlight" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rust-lang/mdBook@0.4.46/src/theme/highlight.css"> {# #}
     <link id="styleNight" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rust-lang/mdBook@0.4.46/src/theme/tomorrow-night.css" disabled="true"> {# #}
@@ -28,23 +28,6 @@
     <script src="script.js" defer></script> {# #}
 </head> {# #}
 <body> {# #}
-    <div id="settings-dropdown" class="dropdown"> {# #}
-        <button class="settings-icon" tabindex="-1"></button> {# #}
-        <div class="settings-menu" tabindex="-1"> {# #}
-            <div class="setting-radio-name">Theme</div> {# #}
-            <select id="theme-choice"> {# #}
-                <option value="ayu">Ayu</option> {# #}
-                <option value="coal">Coal</option> {# #}
-                <option value="light">Light</option> {# #}
-                <option value="navy">Navy</option> {# #}
-                <option value="rust">Rust</option> {# #}
-            </select> {# #}
-            <label> {# #}
-                <input type="checkbox" id="disable-shortcuts"> {#+ #}
-                <span>Disable keyboard shortcuts</span> {# #}
-            </label> {# #}
-        </div> {# #}
-    </div> {# #}
     <script src="theme.js"></script> {# #}
 
     <div class="container"> {# #}
diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
index 4f1935ba972f..497d4b125d1b 100644
--- a/util/gh-pages/style.css
+++ b/util/gh-pages/style.css
@@ -530,7 +530,6 @@ summary {
     }
 }
 
-html:not(.js) #settings-dropdown,
 html:not(.js) #menu-filters {
     display: none;
 }
diff --git a/util/gh-pages/theme.js b/util/gh-pages/theme.js
index a5dfeed9e8c8..5067b5a0da02 100644
--- a/util/gh-pages/theme.js
+++ b/util/gh-pages/theme.js
@@ -47,6 +47,31 @@ function setTheme(theme, store) {
 }
 
 (function() {
+    function generateSettingsButton() {
+        const dropdown = document.createElement("div");
+        dropdown.id = "settings-dropdown";
+        dropdown.classList.add("dropdown");
+        dropdown.innerHTML = `
+    <button class="settings-icon" tabindex="-1"></button>
+    <div class="settings-menu" tabindex="-1">
+        <div class="setting-radio-name">Theme</div>
+        <select id="theme-choice">
+            <option value="ayu">Ayu</option>
+            <option value="coal">Coal</option>
+            <option value="light">Light</option>
+            <option value="navy">Navy</option>
+            <option value="rust">Rust</option>
+        </select>
+        <label>
+            <input type="checkbox" id="disable-shortcuts"> {#+ #}
+            <span>Disable keyboard shortcuts</span>
+        </label>
+    </div>`;
+        document.body.insertBefore(dropdown, document.body.firstChild);
+    }
+
+    generateSettingsButton();
+
     // This file is loaded first. If so, we add the `js` class on the `<html>`
     // element.
     document.documentElement.classList.add("js");
