diff --git a/crates/mdbook-html/front-end/css/chrome.css b/crates/mdbook-html/front-end/css/chrome.css
index 83c5ec584b..5fbc23360a 100644
--- a/crates/mdbook-html/front-end/css/chrome.css
+++ b/crates/mdbook-html/front-end/css/chrome.css
@@ -3,7 +3,7 @@
 html {
     scrollbar-color: var(--scrollbar) var(--bg);
 }
-#searchresults a,
+#mdbook-searchresults a,
 .content a:link,
 a:visited,
 a > .hljs {
@@ -11,10 +11,10 @@ a > .hljs {
 }
 
 /*
-    body-container is necessary because mobile browsers don't seem to like
+    mdbook-body-container is necessary because mobile browsers don't seem to like
     overflow-x on the body tag when there is a <meta name="viewport"> tag.
 */
-#body-container {
+#mdbook-body-container {
     /*
         This is used when the sidebar pushes the body content off the side of
         the screen on small screens. Without it, dragging on mobile Safari
@@ -25,12 +25,12 @@ a > .hljs {
 
 /* Menu Bar */
 
-#menu-bar,
-#menu-bar-hover-placeholder {
+#mdbook-menu-bar,
+#mdbook-menu-bar-hover-placeholder {
     z-index: 101;
     margin: auto calc(0px - var(--page-padding));
 }
-#menu-bar {
+#mdbook-menu-bar {
     position: relative;
     display: flex;
     flex-wrap: wrap;
@@ -39,24 +39,24 @@ a > .hljs {
     border-block-end-width: 1px;
     border-block-end-style: solid;
 }
-#menu-bar.sticky,
-#menu-bar-hover-placeholder:hover + #menu-bar,
-#menu-bar:hover,
-html.sidebar-visible #menu-bar {
+#mdbook-menu-bar.sticky,
+#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
+#mdbook-menu-bar:hover,
+html.sidebar-visible #mdbook-menu-bar {
     position: -webkit-sticky;
     position: sticky;
     top: 0 !important;
 }
-#menu-bar-hover-placeholder {
+#mdbook-menu-bar-hover-placeholder {
     position: sticky;
     position: -webkit-sticky;
     top: 0;
     height: var(--menu-bar-height);
 }
-#menu-bar.bordered {
+#mdbook-menu-bar.bordered {
     border-block-end-color: var(--table-border-color);
 }
-#menu-bar .fa-svg, #menu-bar .icon-button {
+#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
     position: relative;
     padding: 0 8px;
     z-index: 10;
@@ -65,7 +65,7 @@ html.sidebar-visible #menu-bar {
     transition: color 0.5s;
 }
 @media only screen and (max-width: 420px) {
-    #menu-bar .fa-svg, #menu-bar .icon-button {
+    #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
         padding: 0 5px;
     }
 }
@@ -193,8 +193,8 @@ html:not(.js) .left-buttons button {
 
 /* sidebar-visible */
 @media only screen and (max-width: 1380px) {
-    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
-    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
 }
 
 /* Inline code */
@@ -307,7 +307,7 @@ pre > .result {
 
 /* Search */
 
-#searchresults a {
+#mdbook-searchresults a {
     text-decoration: none;
 }
 
@@ -337,13 +337,13 @@ mark.fade-out {
     max-width: var(--content-max-width);
 }
 
-#searchbar-outer.searching #searchbar {
+#mdbook-searchbar-outer.searching #mdbook-searchbar {
     padding-right: 30px;
 }
-#searchbar-outer .spinner-wrapper {
+#mdbook-searchbar-outer .spinner-wrapper {
     display: none;
 }
-#searchbar-outer.searching .spinner-wrapper {
+#mdbook-searchbar-outer.searching .spinner-wrapper {
     display: block;
 }
 
@@ -376,7 +376,7 @@ mark.fade-out {
     }
 }
 
-#searchbar {
+#mdbook-searchbar {
     width: 100%;
     margin-block-start: var(--searchbar-margin-block-start);
     margin-block-end: 0;
@@ -389,8 +389,8 @@ mark.fade-out {
     background-color: var(--searchbar-bg);
     color: var(--searchbar-fg);
 }
-#searchbar:focus,
-#searchbar.active {
+#mdbook-searchbar:focus,
+#mdbook-searchbar.active {
     box-shadow: 0 0 3px var(--searchbar-shadow-color);
 }
 
@@ -411,19 +411,19 @@ mark.fade-out {
     border-block-end: 1px dashed var(--searchresults-border-color);
 }
 
-ul#searchresults {
+ul#mdbook-searchresults {
     list-style: none;
     padding-inline-start: 20px;
 }
-ul#searchresults li {
+ul#mdbook-searchresults li {
     margin: 10px 0px;
     padding: 2px;
     border-radius: 2px;
 }
-ul#searchresults li.focus {
+ul#mdbook-searchresults li.focus {
     background-color: var(--searchresults-li-bg);
 }
-ul#searchresults span.teaser {
+ul#mdbook-searchresults span.teaser {
     display: block;
     clear: both;
     margin-block-start: 5px;
@@ -432,7 +432,7 @@ ul#searchresults span.teaser {
     margin-inline-end: 0;
     font-size: 0.8em;
 }
-ul#searchresults span.teaser em {
+ul#mdbook-searchresults span.teaser em {
     font-weight: bold;
     font-style: normal;
 }
@@ -535,10 +535,10 @@ html:not(.sidebar-resizing) .sidebar {
     width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
 }
 /* sidebar-hidden */
-#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+#mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
     transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
 }
-[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+[dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
     transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
 .sidebar::-webkit-scrollbar {
@@ -549,18 +549,18 @@ html:not(.sidebar-resizing) .sidebar {
 }
 
 /* sidebar-visible */
-#sidebar-toggle-anchor:checked ~ .page-wrapper {
+#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
     transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
-[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
     transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
 }
 @media only screen and (min-width: 620px) {
-    #sidebar-toggle-anchor:checked ~ .page-wrapper {
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
         margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
     }
-    [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+    [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
     }
 }
diff --git a/crates/mdbook-html/front-end/css/general.css b/crates/mdbook-html/front-end/css/general.css
index b5df9f7f9c..faa4a7323c 100644
--- a/crates/mdbook-html/front-end/css/general.css
+++ b/crates/mdbook-html/front-end/css/general.css
@@ -80,7 +80,7 @@ h6:target::before {
 .page {
     outline: 0;
     padding: 0 var(--page-padding);
-    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #mdbook-menu-bar-hover-placeholder */
 }
 .page-wrapper {
     box-sizing: border-box;
diff --git a/crates/mdbook-html/front-end/css/print.css b/crates/mdbook-html/front-end/css/print.css
index 80ec3a5441..2004384d38 100644
--- a/crates/mdbook-html/front-end/css/print.css
+++ b/crates/mdbook-html/front-end/css/print.css
@@ -1,18 +1,18 @@
 
-#sidebar,
-#menu-bar,
+#mdbook-sidebar,
+#mdbook-menu-bar,
 .nav-chapters,
 .mobile-nav-chapters {
     display: none;
 }
 
-#page-wrapper.page-wrapper {
+#mdbook-page-wrapper.page-wrapper {
     transform: none !important;
     margin-inline-start: 0px;
     overflow-y: initial;
 }
 
-#content {
+#mdbook-content {
     max-width: none;
     margin: 0;
     padding: 0;
diff --git a/crates/mdbook-html/front-end/js/book.js b/crates/mdbook-html/front-end/js/book.js
index ab7ebddeb4..5f2ff8bb14 100644
--- a/crates/mdbook-html/front-end/js/book.js
+++ b/crates/mdbook-html/front-end/js/book.js
@@ -309,23 +309,23 @@ aria-label="Show hidden lines"></button>';
 
 (function themes() {
     const html = document.querySelector('html');
-    const themeToggleButton = document.getElementById('theme-toggle');
-    const themePopup = document.getElementById('theme-list');
+    const themeToggleButton = document.getElementById('mdbook-theme-toggle');
+    const themePopup = document.getElementById('mdbook-theme-list');
     const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
     const themeIds = [];
     themePopup.querySelectorAll('button.theme').forEach(function(el) {
         themeIds.push(el.id);
     });
     const stylesheets = {
-        ayuHighlight: document.querySelector('#ayu-highlight-css'),
-        tomorrowNight: document.querySelector('#tomorrow-night-css'),
-        highlight: document.querySelector('#highlight-css'),
+        ayuHighlight: document.querySelector('#mdbook-ayu-highlight-css'),
+        tomorrowNight: document.querySelector('#mdbook-tomorrow-night-css'),
+        highlight: document.querySelector('#mdbook-highlight-css'),
     };
 
     function showThemes() {
         themePopup.style.display = 'block';
         themeToggleButton.setAttribute('aria-expanded', true);
-        themePopup.querySelector('button#' + get_theme()).focus();
+        themePopup.querySelector('button#mdbook-theme-' + get_theme()).focus();
     }
 
     function updateThemeSelected() {
@@ -333,10 +333,10 @@ aria-label="Show hidden lines"></button>';
             el.classList.remove('theme-selected');
         });
         const selected = get_saved_theme() ?? 'default_theme';
-        let element = themePopup.querySelector('button#' + selected);
+        let element = themePopup.querySelector('button#mdbook-theme-' + selected);
         if (element === null) {
             // Fall back in case there is no "Default" item.
-            element = themePopup.querySelector('button#' + get_theme());
+            element = themePopup.querySelector('button#mdbook-theme-' + get_theme());
         }
         element.classList.add('theme-selected');
     }
@@ -363,7 +363,7 @@ aria-label="Show hidden lines"></button>';
 
     function get_theme() {
         const theme = get_saved_theme();
-        if (theme === null || theme === undefined || !themeIds.includes(theme)) {
+        if (theme === null || theme === undefined || !themeIds.includes('mdbook-theme-' + theme)) {
             if (typeof default_dark_theme === 'undefined') {
                 // A customized index.hbs might not define this, so fall back to
                 // old behavior of determining the default on page load.
@@ -448,6 +448,8 @@ aria-label="Show hidden lines"></button>';
         } else {
             return;
         }
+        theme = theme.replace(/^mdbook-theme-/, '');
+
         if (theme === 'default_theme' || theme === null) {
             delete_saved_theme();
             set_theme(get_theme(), false);
@@ -518,11 +520,11 @@ aria-label="Show hidden lines"></button>';
 })();
 
 (function sidebar() {
-    const sidebar = document.getElementById('sidebar');
-    const sidebarLinks = document.querySelectorAll('#sidebar a');
-    const sidebarToggleButton = document.getElementById('sidebar-toggle');
-    const sidebarResizeHandle = document.getElementById('sidebar-resize-handle');
-    const sidebarCheckbox = document.getElementById('sidebar-toggle-anchor');
+    const sidebar = document.getElementById('mdbook-sidebar');
+    const sidebarLinks = document.querySelectorAll('#mdbook-sidebar a');
+    const sidebarToggleButton = document.getElementById('mdbook-sidebar-toggle');
+    const sidebarResizeHandle = document.getElementById('mdbook-sidebar-resize-handle');
+    const sidebarCheckbox = document.getElementById('mdbook-sidebar-toggle-anchor');
     let firstContact = null;
 
 
@@ -783,7 +785,7 @@ aria-label="Show hidden lines"></button>';
 })();
 
 (function controllMenu() {
-    const menu = document.getElementById('menu-bar');
+    const menu = document.getElementById('mdbook-menu-bar');
 
     (function controllPosition() {
         let scrollTop = document.scrollingElement.scrollTop;
diff --git a/crates/mdbook-html/front-end/searcher/searcher.js b/crates/mdbook-html/front-end/searcher/searcher.js
index 18daa6e239..c715201205 100644
--- a/crates/mdbook-html/front-end/searcher/searcher.js
+++ b/crates/mdbook-html/front-end/searcher/searcher.js
@@ -21,14 +21,14 @@ window.search = window.search || {};
         };
     }
 
-    const search_wrap = document.getElementById('search-wrapper'),
-        searchbar_outer = document.getElementById('searchbar-outer'),
-        searchbar = document.getElementById('searchbar'),
-        searchresults = document.getElementById('searchresults'),
-        searchresults_outer = document.getElementById('searchresults-outer'),
-        searchresults_header = document.getElementById('searchresults-header'),
-        searchicon = document.getElementById('search-toggle'),
-        content = document.getElementById('content'),
+    const search_wrap = document.getElementById('mdbook-search-wrapper'),
+        searchbar_outer = document.getElementById('mdbook-searchbar-outer'),
+        searchbar = document.getElementById('mdbook-searchbar'),
+        searchresults = document.getElementById('mdbook-searchresults'),
+        searchresults_outer = document.getElementById('mdbook-searchresults-outer'),
+        searchresults_header = document.getElementById('mdbook-searchresults-header'),
+        searchicon = document.getElementById('mdbook-search-toggle'),
+        content = document.getElementById('mdbook-content'),
 
         // SVG text elements don't render if inside a <mark> tag.
         mark_exclude = ['text'],
@@ -154,8 +154,9 @@ window.search = window.search || {};
         const encoded_search = encodeURIComponent(searchterms.join(' ')).replace(/'/g, '%27');
 
         return '<a href="' + path_to_root + url[0] + '?' + URL_MARK_PARAM + '=' + encoded_search
-            + '#' + url[1] + '" aria-details="teaser_' + teaser_count + '">'
-            + result.doc.breadcrumbs + '</a>' + '<span class="teaser" id="teaser_' + teaser_count
+            + '#' + url[1] + '" aria-details="mdbook-teaser_' + teaser_count + '">'
+            + result.doc.breadcrumbs + '</a>'
+            + '<span class="teaser" id="mdbook-teaser_' + teaser_count
             + '" aria-label="Search Result Teaser">' + teaser + '</span>';
     }
 
@@ -437,7 +438,7 @@ window.search = window.search || {};
             loadSearchScript(
                 window.path_to_searchindex_js ||
                 path_to_root + '{{ resource "searchindex.js" }}',
-                'search-index');
+                'mdbook-search-index');
             search_wrap.classList.remove('hidden');
             searchicon.setAttribute('aria-expanded', 'true');
         } else {
diff --git a/crates/mdbook-html/front-end/templates/index.hbs b/crates/mdbook-html/front-end/templates/index.hbs
index 9498482928..d6b53a9d2b 100644
--- a/crates/mdbook-html/front-end/templates/index.hbs
+++ b/crates/mdbook-html/front-end/templates/index.hbs
@@ -36,9 +36,9 @@
         <link rel="stylesheet" href="{{ resource "fonts/fonts.css" }}">
 
         <!-- Highlight.js Stylesheets -->
-        <link rel="stylesheet" id="highlight-css" href="{{ resource "highlight.css" }}">
-        <link rel="stylesheet" id="tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}">
-        <link rel="stylesheet" id="ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}">
+        <link rel="stylesheet" id="mdbook-highlight-css" href="{{ resource "highlight.css" }}">
+        <link rel="stylesheet" id="mdbook-tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}">
+        <link rel="stylesheet" id="mdbook-ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}">
 
         <!-- Custom theme stylesheets -->
         {{#each additional_css}}
@@ -76,7 +76,7 @@
             </div>
         </div>
     </div>
-    <div id="body-container">
+    <div id="mdbook-body-container">
         <!-- Work around some values being stored in localStorage wrapped in quotes -->
         <script>
             try {
@@ -105,12 +105,12 @@
             html.classList.add("js");
         </script>
 
-        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
+        <input type="checkbox" id="mdbook-sidebar-toggle-anchor" class="hidden">
 
         <!-- Hide / unhide sidebar before it is displayed -->
         <script>
             let sidebar = null;
-            const sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
+            const sidebar_toggle = document.getElementById("mdbook-sidebar-toggle-anchor");
             if (document.body.clientWidth >= 1080) {
                 try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                 sidebar = sidebar || 'visible';
@@ -125,40 +125,40 @@
             }
         </script>
 
-        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
+        <nav id="mdbook-sidebar" class="sidebar" aria-label="Table of contents">
             <!-- populated by js -->
             <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
             <noscript>
                 <iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
             </noscript>
-            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
+            <div id="mdbook-sidebar-resize-handle" class="sidebar-resize-handle">
                 <div class="sidebar-resize-indicator"></div>
             </div>
         </nav>
 
-        <div id="page-wrapper" class="page-wrapper">
+        <div id="mdbook-page-wrapper" class="page-wrapper">
 
             <div class="page">
                 {{> header}}
-                <div id="menu-bar-hover-placeholder"></div>
-                <div id="menu-bar" class="menu-bar sticky">
+                <div id="mdbook-menu-bar-hover-placeholder"></div>
+                <div id="mdbook-menu-bar" class="menu-bar sticky">
                     <div class="left-buttons">
-                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                        <label id="mdbook-sidebar-toggle" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
                             {{fa "solid" "bars"}}
                         </label>
-                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
+                        <button id="mdbook-theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="mdbook-theme-list">
                             {{fa "solid" "paintbrush"}}
                         </button>
-                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
-                            <li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
+                        <ul id="mdbook-theme-list" class="theme-popup" aria-label="Themes" role="menu">
+                            <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-default_theme">Auto</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-light">Light</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-rust">Rust</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-coal">Coal</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-navy">Navy</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="mdbook-theme-ayu">Ayu</button></li>
                         </ul>
                         {{#if search_enabled}}
-                        <button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">
+                        <button id="mdbook-search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="mdbook-searchbar">
                             {{fa "solid" "magnifying-glass"}}
                         </button>
                         {{/if}}
@@ -187,18 +187,18 @@
                 </div>
 
                 {{#if search_enabled}}
-                <div id="search-wrapper" class="hidden">
-                    <form id="searchbar-outer" class="searchbar-outer">
+                <div id="mdbook-search-wrapper" class="hidden">
+                    <form id="mdbook-searchbar-outer" class="searchbar-outer">
                         <div class="search-wrapper">
-                            <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                            <input type="search" id="mdbook-searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="mdbook-searchresults-outer" aria-describedby="searchresults-header">
                             <div class="spinner-wrapper">
                                 {{fa "solid" "spinner" "fa-spin"}}
                             </div>
                         </div>
                     </form>
-                    <div id="searchresults-outer" class="searchresults-outer hidden">
-                        <div id="searchresults-header" class="searchresults-header"></div>
-                        <ul id="searchresults">
+                    <div id="mdbook-searchresults-outer" class="searchresults-outer hidden">
+                        <div id="mdbook-searchresults-header" class="searchresults-header"></div>
+                        <ul id="mdbook-searchresults">
                         </ul>
                     </div>
                 </div>
@@ -206,14 +206,14 @@
 
                 <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                 <script>
-                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
-                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
-                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
+                    document.getElementById('mdbook-sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
+                    document.getElementById('mdbook-sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
+                    Array.from(document.querySelectorAll('#mdbook-sidebar a')).forEach(function(link) {
                         link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                     });
                 </script>
 
-                <div id="content" class="content">
+                <div id="mdbook-content" class="content">
                     <main>
                         {{{ content }}}
                     </main>
diff --git a/crates/mdbook-html/front-end/templates/toc.js.hbs b/crates/mdbook-html/front-end/templates/toc.js.hbs
index ffaa5d589c..5bcade054c 100644
--- a/crates/mdbook-html/front-end/templates/toc.js.hbs
+++ b/crates/mdbook-html/front-end/templates/toc.js.hbs
@@ -52,13 +52,13 @@ class MDBookSidebarScrollbox extends HTMLElement {
             this.scrollTop = sidebarScrollTop;
         } else {
             // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
-            var activeSection = document.querySelector('#sidebar .active');
+            var activeSection = document.querySelector('#mdbook-sidebar .active');
             if (activeSection) {
                 activeSection.scrollIntoView({ block: 'center' });
             }
         }
         // Toggle buttons
-        var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle');
+        var sidebarAnchorToggles = document.querySelectorAll('#mdbook-sidebar a.toggle');
         function toggleSection(ev) {
             ev.currentTarget.parentElement.classList.toggle('expanded');
         }
diff --git a/tests/gui/search.goml b/tests/gui/search.goml
index ae172b43d3..6ff9be338d 100644
--- a/tests/gui/search.goml
+++ b/tests/gui/search.goml
@@ -7,70 +7,70 @@ define-function: (
     "open-search",
     [],
     block {
-        assert-css: ("#search-wrapper", {"display": "none"})
+        assert-css: ("#mdbook-search-wrapper", {"display": "none"})
         press-key: 's'
-        wait-for-css-false: ("#search-wrapper", {"display": "none"})
+        wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
     }
 )
 
 call-function: ("open-search", {})
-assert-text: ("#searchresults-header", "")
+assert-text: ("#mdbook-searchresults-header", "")
 write: "strikethrough"
-wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':")
+wait-for-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
 // Close the search display
 press-key: 'Escape'
-wait-for-css: ("#search-wrapper", {"display": "none"})
+wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
 // Reopening the search should show the last value
 call-function: ("open-search", {})
-assert-text: ("#searchresults-header", "2 search results for 'strikethrough':")
+assert-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
 // Navigate to a sub-chapter
 go-to: "./individual/strikethrough.html"
-assert-text: ("#searchresults-header", "")
+assert-text: ("#mdbook-searchresults-header", "")
 call-function: ("open-search", {})
 write: "strikethrough"
-wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':")
+wait-for-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
 
 // Now we test search shortcuts and more page changes.
 go-to: |DOC_PATH| + "index.html"
 
 // This check is to ensure that the search bar is inside the search wrapper.
-assert: "#search-wrapper #searchbar"
-assert-css: ("#search-wrapper", {"display": "none"})
+assert: "#mdbook-search-wrapper #mdbook-searchbar"
+assert-css: ("#mdbook-search-wrapper", {"display": "none"})
 
 // Now we make sure the search input appear with the `S` shortcut.
 press-key: 's'
-wait-for-css-false: ("#search-wrapper", {"display": "none"})
+wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
 // We ensure the search bar has the focus.
-assert: "#searchbar:focus"
+assert: "#mdbook-searchbar:focus"
 // Pressing a key will therefore update the search input.
 press-key: 't'
-assert-text: ("#searchbar", "t")
+assert-text: ("#mdbook-searchbar", "t")
 
 // Now we press `Escape` to ensure that the search input disappears again.
 press-key: 'Escape'
-wait-for-css: ("#search-wrapper", {"display": "none"})
+wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
 
 // Making it appear by clicking on the search button.
-click: "#search-toggle"
-wait-for-css: ("#search-wrapper", {"display": "block"})
+click: "#mdbook-search-toggle"
+wait-for-css: ("#mdbook-search-wrapper", {"display": "block"})
 // We ensure the search bar has the focus.
-assert: "#searchbar:focus"
+assert: "#mdbook-searchbar:focus"
 
 // We input "test".
 write: "test"
 // The results should now appear.
-wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH)
-assert: "#searchresults"
+wait-for-text: ("#mdbook-searchresults-header", "search results for 'test':", ENDS_WITH)
+assert: "#mdbook-searchresults"
 // Ensure that the URL was updated as well.
 assert-document-property: ({"URL": "?search=test"}, ENDS_WITH)
 
 // Now we ensure that when we land on the page with a "search in progress", the search results are
 // loaded and that the search input has focus.
 go-to: |DOC_PATH| + "index.html?search=test"
-wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH)
-assert: "#searchbar:focus"
-assert: "#searchresults"
+wait-for-text: ("#mdbook-searchresults-header", "search results for 'test':", ENDS_WITH)
+assert: "#mdbook-searchbar:focus"
+assert: "#mdbook-searchresults"
 
 // And now we press `Escape` to close everything.
 press-key: 'Escape'
-wait-for-css: ("#search-wrapper", {"display": "none"})
+wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
diff --git a/tests/gui/sidebar.goml b/tests/gui/sidebar.goml
index 6fe5a5ed39..ec44f5a429 100644
--- a/tests/gui/sidebar.goml
+++ b/tests/gui/sidebar.goml
@@ -15,11 +15,11 @@ define-function: (
     "hide-sidebar",
     [],
     block {
-        assert-position: ("#page-wrapper", {"x": |content_indent|})
+        assert-position: ("#mdbook-page-wrapper", {"x": |content_indent|})
 
         // We now hide the sidebar.
-        click: "#sidebar-toggle"
-        wait-for-css: ("#sidebar", {"display": "none"})
+        click: "#mdbook-sidebar-toggle"
+        wait-for-css: ("#mdbook-sidebar", {"display": "none"})
         assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_hidden_value|}
     },
 )
@@ -28,17 +28,17 @@ define-function: (
     "show-sidebar",
     [],
     block {
-        assert-css: ("#sidebar", {"display": "none"})
-        assert-position: ("#page-wrapper", {"x": 0})
+        assert-css: ("#mdbook-sidebar", {"display": "none"})
+        assert-position: ("#mdbook-page-wrapper", {"x": 0})
 
         // We expand the sidebar.
-        click: "#sidebar-toggle"
-        wait-for-css-false: ("#sidebar", {"display": "none"})
+        click: "#mdbook-sidebar-toggle"
+        wait-for-css-false: ("#mdbook-sidebar", {"display": "none"})
         // `transform` is 0.3s so we need to wait a bit (0.5s) to ensure the animation is done.
         wait-for: 5000
-        assert-css-false: ("#sidebar", {"transform": "matrix(1, 0, 0, 1, -308, 0)"})
+        assert-css-false: ("#mdbook-sidebar", {"transform": "matrix(1, 0, 0, 1, -308, 0)"})
         // The page content should be moved to the right.
-        assert-position: ("#page-wrapper", {"x": |content_indent|})
+        assert-position: ("#mdbook-page-wrapper", {"x": |content_indent|})
         assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
     },
 )
@@ -65,5 +65,5 @@ reload:
 // The stored value shouldn't have changed.
 assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
 // But the sidebar should be hidden anyway.
-assert-css: ("#sidebar", {"display": "none"})
-assert-position: ("#page-wrapper", {"x": 0})
+assert-css: ("#mdbook-sidebar", {"display": "none"})
+assert-position: ("#mdbook-page-wrapper", {"x": 0})
diff --git a/tests/gui/theme.goml b/tests/gui/theme.goml
new file mode 100644
index 0000000000..33fde6f021
--- /dev/null
+++ b/tests/gui/theme.goml
@@ -0,0 +1,35 @@
+// Basic theme switcher test.
+
+debug: true
+
+go-to: |DOC_PATH| + "index.html"
+
+// TODO: Dark mode is automatic, how to check that here?
+assert-css: ("#mdbook-theme-list", {"display": "none"})
+click: "#mdbook-theme-toggle"
+assert-css: ("#mdbook-theme-list", {"display": "block"})
+click: "#mdbook-theme-rust"
+assert-attribute: ("html", {"class": "js rust"})
+// Clicking a theme doesn't dismiss the popup.
+assert-css: ("#mdbook-theme-list", {"display": "block"})
+assert-local-storage: {"mdbook-theme": "rust"}
+
+// Dismiss via toggle.
+click: "#mdbook-theme-toggle"
+assert-css: ("#mdbook-theme-list", {"display": "none"})
+
+// Check for dismissal for click outside.
+click: "#mdbook-theme-toggle"
+assert-css: ("#mdbook-theme-list", {"display": "block"})
+click: "main"
+assert-css: ("#mdbook-theme-list", {"display": "none"})
+
+// Check for escape.
+click: "#mdbook-theme-toggle"
+assert-css: ("#mdbook-theme-list", {"display": "block"})
+press-key: 'Escape'
+assert-css: ("#mdbook-theme-list", {"display": "none"})
+
+// Check for navigation retains theme.
+go-to: "./rust/rust_codeblock.html"
+assert-attribute: ("html", {"class": "rust js"})