diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index 797b931afc643..218f2ed1cc176 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -1,7 +1,8 @@
 // Local js definitions:
 /* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
 /* global addClass, removeClass, onEach, onEachLazy, blurHandler, elemIsInParent */
-/* global MAIN_ID, getVar, getSettingsButton */
+/* global MAIN_ID, getVar, getSettingsButton, isUsingSystemTheme, CURRENT_THEME_SETTING_VERSION */
+/* global getTheme, getPreferredDarkTheme, getPreferredLightTheme */
 
 "use strict";
 
@@ -12,10 +13,9 @@
         updateLocalStorage(settingName, value);
 
         switch (settingName) {
-            case "theme":
+            case `theme${CURRENT_THEME_SETTING_VERSION}`:
             case "preferred-dark-theme":
             case "preferred-light-theme":
-            case "use-system-theme":
                 updateSystemTheme();
                 updateLightAndDark();
                 break;
@@ -38,7 +38,6 @@
     }
 
     function showLightAndDark() {
-        addClass(document.getElementById("theme").parentElement, "hidden");
         removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
         removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
     }
@@ -46,11 +45,10 @@
     function hideLightAndDark() {
         addClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
         addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
-        removeClass(document.getElementById("theme").parentElement, "hidden");
     }
 
     function updateLightAndDark() {
-        if (getSettingValue("use-system-theme") !== "false") {
+        if (isUsingSystemTheme()) {
             showLightAndDark();
         } else {
             hideLightAndDark();
@@ -95,6 +93,13 @@
         });
     }
 
+    function getOr(obj, property, or) {
+        if (obj[property] !== undefined) {
+            return obj[property];
+        }
+        return or;
+    }
+
     /**
      * This function builds the sections inside the "settings page". It takes a `settings` list
      * as argument which describes each setting and how to render it. It returns a string
@@ -110,21 +115,23 @@
         for (const setting of settings) {
             output += "<div class=\"setting-line\">";
             const js_data_name = setting["js_name"];
+            const js_data_version = getOr(setting, "js_name_version", "");
             const setting_name = setting["name"];
 
             if (setting["options"] !== undefined) {
-                // This is a select setting.
+                // This is a <select> setting.
                 output += `<div class="radio-line" id="${js_data_name}">\
                         <span class="setting-name">${setting_name}</span>\
                         <div class="choices">`;
                 onEach(setting["options"], option => {
-                    const checked = option === setting["default"] ? " checked" : "";
+                    const optionAttr = option.split(" ").join("-");
+                    const checked = optionAttr === setting["default"] ? " checked" : "";
 
-                    output += `<label for="${js_data_name}-${option}" class="choice">\
-                           <input type="radio" name="${js_data_name}" \
-                                id="${js_data_name}-${option}" value="${option}"${checked}>\
+                    output += `<label for="${js_data_name}-${optionAttr}" class="choice">\
+                           <input type="radio" name="${js_data_name}${js_data_version}" \
+                               id="${js_data_name}-${optionAttr}" value="${optionAttr}"${checked}>\
                            <span>${option}</span>\
-                         </label>`;
+                        </label>`;
                 });
                 output += "</div></div>";
             } else {
@@ -149,27 +156,23 @@
     function buildSettingsPage() {
         const themes = getVar("themes").split(",");
         const settings = [
-            {
-                "name": "Use system theme",
-                "js_name": "use-system-theme",
-                "default": true,
-            },
             {
                 "name": "Theme",
                 "js_name": "theme",
-                "default": "light",
-                "options": themes,
+                "js_name_version": CURRENT_THEME_SETTING_VERSION,
+                "default": getTheme(),
+                "options": themes.concat("system preference"),
             },
             {
                 "name": "Preferred light theme",
                 "js_name": "preferred-light-theme",
-                "default": "light",
+                "default": getPreferredLightTheme(),
                 "options": themes,
             },
             {
                 "name": "Preferred dark theme",
                 "js_name": "preferred-dark-theme",
-                "default": "dark",
+                "default": getPreferredDarkTheme(),
                 "options": themes,
             },
             {
diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js
index 0c5389d45e5b7..41fa2f729c58c 100644
--- a/src/librustdoc/html/static/js/storage.js
+++ b/src/librustdoc/html/static/js/storage.js
@@ -5,7 +5,6 @@
 // the page, so we don't see major layout changes during the load of the page.
 "use strict";
 
-const darkThemes = ["dark", "ayu"];
 window.currentTheme = document.getElementById("themeStyle");
 window.mainTheme = document.getElementById("mainThemeStyle");
 
@@ -13,6 +12,7 @@ window.mainTheme = document.getElementById("mainThemeStyle");
 // If you update this line, then you also need to update the two media queries with the same
 // warning in rustdoc.css
 window.RUSTDOC_MOBILE_BREAKPOINT = 701;
+const CURRENT_THEME_SETTING_VERSION = "2";
 
 const settingsDataset = (function() {
     const settingsElement = document.getElementById("default-settings");
@@ -42,7 +42,38 @@ function getSettingValue(settingName) {
     return null;
 }
 
-const localStoredTheme = getSettingValue("theme");
+function isUsingSystemTheme() {
+    const current = getTheme();
+    return current === null || current === "system-preference";
+}
+
+function valueOr(value, or) {
+    if (value !== null) {
+        return value;
+    }
+    return or;
+}
+
+function getTheme() {
+    const current = getSettingValue(`theme${CURRENT_THEME_SETTING_VERSION}`);
+    if (current === null) {
+        // We try to get what's being used in the previous version.
+        const isUsingSystemTheme = getSettingValue("use-system-theme");
+        if (isUsingSystemTheme === "true") {
+            return "system-preference";
+        }
+        return valueOr(getSettingValue("theme"), "system-preference");
+    }
+    return current;
+}
+
+function getPreferredDarkTheme() {
+    return valueOr(getSettingValue("preferred-dark-theme"), "dark");
+}
+
+function getPreferredLightTheme() {
+    return valueOr(getSettingValue("preferred-light-theme"), "light");
+}
 
 const savedHref = [];
 
@@ -157,22 +188,6 @@ function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) {
     }
 }
 
-// This function is called from "main.js".
-// eslint-disable-next-line no-unused-vars
-function useSystemTheme(value) {
-    if (value === undefined) {
-        value = true;
-    }
-
-    updateLocalStorage("use-system-theme", value);
-
-    // update the toggle if we're on the settings page
-    const toggle = document.getElementById("use-system-theme");
-    if (toggle && toggle instanceof HTMLInputElement) {
-        toggle.checked = value;
-    }
-}
-
 const updateSystemTheme = (function() {
     if (!window.matchMedia) {
         // fallback to the CSS computed value
@@ -193,25 +208,25 @@ const updateSystemTheme = (function() {
     const mql = window.matchMedia("(prefers-color-scheme: dark)");
 
     function handlePreferenceChange(mql) {
-        const use = theme => {
-            switchTheme(window.currentTheme, window.mainTheme, theme, true);
+        const use = (theme, saveIt) => {
+            switchTheme(window.currentTheme, window.mainTheme, theme, saveIt);
         };
         // maybe the user has disabled the setting in the meantime!
-        if (getSettingValue("use-system-theme") !== "false") {
-            const lightTheme = getSettingValue("preferred-light-theme") || "light";
-            const darkTheme = getSettingValue("preferred-dark-theme") || "dark";
+        if (isUsingSystemTheme()) {
+            const lightTheme = getPreferredLightTheme();
+            const darkTheme = getPreferredDarkTheme();
 
             if (mql.matches) {
-                use(darkTheme);
+                use(darkTheme, false);
             } else {
                 // prefers a light theme, or has no preference
-                use(lightTheme);
+                use(lightTheme, false);
             }
             // note: we save the theme so that it doesn't suddenly change when
             // the user disables "use-system-theme" and reloads the page or
             // navigates to another page
         } else {
-            use(getSettingValue("theme"));
+            use(getTheme(), true);
         }
     }
 
@@ -226,20 +241,12 @@ function switchToSavedTheme() {
     switchTheme(
         window.currentTheme,
         window.mainTheme,
-        getSettingValue("theme") || "light",
+        getTheme() || "light",
         false
     );
 }
 
-if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
-    // update the preferred dark theme if the user is already using a dark theme
-    // See https://github.com/rust-lang/rust/pull/77809#issuecomment-707875732
-    if (getSettingValue("use-system-theme") === null
-        && getSettingValue("preferred-dark-theme") === null
-        && darkThemes.indexOf(localStoredTheme) >= 0) {
-        updateLocalStorage("preferred-dark-theme", localStoredTheme);
-    }
-
+if (isUsingSystemTheme() && window.matchMedia) {
     // call the function to initialize the theme at least once!
     updateSystemTheme();
 } else {
diff --git a/src/test/rustdoc-gui/anchors.goml b/src/test/rustdoc-gui/anchors.goml
index 3ad62c721b4b8..46771b5b2ac2c 100644
--- a/src/test/rustdoc-gui/anchors.goml
+++ b/src/test/rustdoc-gui/anchors.goml
@@ -5,7 +5,7 @@ goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 show-text: true
 
 // Set the theme to light.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 // We reload the page so the local storage settings are being used.
 reload:
 
@@ -56,7 +56,7 @@ assert-css: ("#title-for-struct-impl-item-doc", {"margin-left": "0px"})
 //
 // We do the same checks with the dark theme now.
 //
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 
 assert-css: ("#toggle-all-docs", {"color": "rgb(221, 221, 221)"})
@@ -106,7 +106,7 @@ assert-css: ("#title-for-struct-impl-item-doc", {"margin-left": "0px"})
 //
 // We do the same checks with the ayu theme now.
 //
-local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "ayu"}
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 
 assert-css: ("#toggle-all-docs", {"color": "rgb(197, 197, 197)"})
diff --git a/src/test/rustdoc-gui/code-color.goml b/src/test/rustdoc-gui/code-color.goml
index 2f95bfb6b177f..eb7b1dd0dbce5 100644
--- a/src/test/rustdoc-gui/code-color.goml
+++ b/src/test/rustdoc-gui/code-color.goml
@@ -6,7 +6,7 @@ goto: file://|DOC_PATH|/test_docs/fn.foo.html
 // If the text isn't displayed, the browser doesn't compute color style correctly...
 show-text: true
 // Set the theme to dark.
-local-storage: {"rustdoc-theme": "dark", "rustdoc-preferred-dark-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 // We reload the page so the local storage settings are being used.
 reload:
 
@@ -14,7 +14,7 @@ assert-css: (".docblock pre > code", {"color": "rgb(221, 221, 221)"}, ALL)
 assert-css: (".docblock > p > code", {"color": "rgb(221, 221, 221)"}, ALL)
 
 // Set the theme to ayu.
-local-storage: {"rustdoc-theme": "ayu", "rustdoc-preferred-dark-theme": "ayu", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "ayu"}
 // We reload the page so the local storage settings are being used.
 reload:
 
@@ -22,7 +22,7 @@ assert-css: (".docblock pre > code", {"color": "rgb(230, 225, 207)"}, ALL)
 assert-css: (".docblock > p > code", {"color": "rgb(255, 180, 84)"}, ALL)
 
 // Set the theme to light.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 // We reload the page so the local storage settings are being used.
 reload:
 
diff --git a/src/test/rustdoc-gui/docblock-details.goml b/src/test/rustdoc-gui/docblock-details.goml
index f6287ade2f295..dee5ebd24f448 100644
--- a/src/test/rustdoc-gui/docblock-details.goml
+++ b/src/test/rustdoc-gui/docblock-details.goml
@@ -1,7 +1,7 @@
 // This ensures that the `<details>`/`<summary>` elements are displayed as expected.
 goto: file://|DOC_PATH|/test_docs/details/struct.Details.html
 show-text: true
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 // We first check that the headers in the `.top-doc` doc block still have their
diff --git a/src/test/rustdoc-gui/headers-color.goml b/src/test/rustdoc-gui/headers-color.goml
index a47a9c8a14c1f..e17dd7717e3b8 100644
--- a/src/test/rustdoc-gui/headers-color.goml
+++ b/src/test/rustdoc-gui/headers-color.goml
@@ -5,11 +5,7 @@ goto: file://|DOC_PATH|/test_docs/struct.Foo.html
 show-text: true
 
 // Ayu theme
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-preferred-dark-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 assert-css: (
@@ -44,11 +40,7 @@ goto: file://|DOC_PATH|/test_docs/struct.HeavilyDocumentedStruct.html
 assert-css: (".docblock > :not(p) > a", {"color": "rgb(57, 175, 215)"}, ALL)
 
 // Dark theme
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
 
 assert-css: (
@@ -83,7 +75,7 @@ goto: file://|DOC_PATH|/test_docs/struct.HeavilyDocumentedStruct.html
 assert-css: (".docblock > :not(p) > a", {"color": "rgb(210, 153, 29)"}, ALL)
 
 // Light theme
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
diff --git a/src/test/rustdoc-gui/headings.goml b/src/test/rustdoc-gui/headings.goml
index ed07e777b1880..8658381b535a6 100644
--- a/src/test/rustdoc-gui/headings.goml
+++ b/src/test/rustdoc-gui/headings.goml
@@ -152,7 +152,7 @@ assert-css: ("h3#top-doc-prose-sub-heading", {"border-bottom-width": "1px"})
 
 // Checking colors now.
 show-text: true
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 goto: file://|DOC_PATH|/test_docs/struct.HeavilyDocumentedStruct.html
 assert-css: (
     ".top-doc .docblock h2",
@@ -183,7 +183,7 @@ assert-css: (
     {"color": "rgb(0, 0, 0)", "border-bottom": "0px none rgb(221, 221, 221)"},
 )
 
-local-storage: {"rustdoc-theme": "dark"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 assert-css: (
     ".top-doc .docblock h2",
@@ -214,7 +214,7 @@ assert-css: (
     {"color": "rgb(221, 221, 221)", "border-bottom": "0px none rgb(210, 210, 210)"},
 )
 
-local-storage: {"rustdoc-theme": "ayu"}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 assert-css: (
     ".top-doc .docblock h2",
@@ -245,14 +245,14 @@ assert-css: (
     {"color": "rgb(197, 197, 197)", "border-bottom": "0px none rgb(92, 103, 115)"},
 )
 
-local-storage: {"rustdoc-theme": "light"}
+local-storage: {"rustdoc-theme2": "light"}
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)
 
-local-storage: {"rustdoc-theme": "dark"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)
 
-local-storage: {"rustdoc-theme": "ayu"}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)
diff --git a/src/test/rustdoc-gui/jump-to-def-background.goml b/src/test/rustdoc-gui/jump-to-def-background.goml
index d17400f5bd9e8..8bb2ccb69bfe6 100644
--- a/src/test/rustdoc-gui/jump-to-def-background.goml
+++ b/src/test/rustdoc-gui/jump-to-def-background.goml
@@ -2,11 +2,7 @@
 goto: file://|DOC_PATH|/src/link_to_definition/lib.rs.html
 
 // Set the theme to dark.
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 // We reload the page so the local storage settings are being used.
 reload:
 
@@ -17,11 +13,7 @@ assert-css: (
 )
 
 // Set the theme to ayu.
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-preferred-dark-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 // We reload the page so the local storage settings are being used.
 reload:
 
@@ -32,7 +24,7 @@ assert-css: (
 )
 
 // Set the theme to light.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 // We reload the page so the local storage settings are being used.
 reload:
 
diff --git a/src/test/rustdoc-gui/pocket-menu.goml b/src/test/rustdoc-gui/pocket-menu.goml
index 71d514648ba26..6ef391402c641 100644
--- a/src/test/rustdoc-gui/pocket-menu.goml
+++ b/src/test/rustdoc-gui/pocket-menu.goml
@@ -32,10 +32,7 @@ assert-css: ("#settings-menu .popover", {"display": "none"})
 // We check the borders color now:
 
 // Ayu theme
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 click: "#help-button"
@@ -47,10 +44,7 @@ compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-co
 compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
 
 // Dark theme
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 click: "#help-button"
@@ -62,10 +56,7 @@ compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-co
 compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
 
 // Light theme
-local-storage: {
-    "rustdoc-theme": "light",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 click: "#help-button"
diff --git a/src/test/rustdoc-gui/rust-logo.goml b/src/test/rustdoc-gui/rust-logo.goml
index 4a9dcf735065f..d4db101383af5 100644
--- a/src/test/rustdoc-gui/rust-logo.goml
+++ b/src/test/rustdoc-gui/rust-logo.goml
@@ -2,11 +2,7 @@
 goto: file://|DOC_PATH|/test_docs/index.html
 
 // First we start with the dark theme.
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 assert-css: (
@@ -17,11 +13,7 @@ assert-css: (
 // In the source view page now.
 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
 
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 assert-css: (
@@ -30,11 +22,7 @@ assert-css: (
 )
 
 // Then with the ayu theme.
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-preferred-dark-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 assert-css: (
@@ -45,11 +33,7 @@ assert-css: (
 // In the source view page now.
 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
 
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-preferred-dark-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 assert-css: (
@@ -58,7 +42,7 @@ assert-css: (
 )
 
 // And finally with the light theme.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 assert-css: (
@@ -69,7 +53,7 @@ assert-css: (
 // In the source view page now.
 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
 
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 assert-css: (
diff --git a/src/test/rustdoc-gui/search-filter.goml b/src/test/rustdoc-gui/search-filter.goml
index 35d7ca480cae1..e18e74e7635f8 100644
--- a/src/test/rustdoc-gui/search-filter.goml
+++ b/src/test/rustdoc-gui/search-filter.goml
@@ -53,7 +53,7 @@ assert-text: (".search-results-title", "Results in all crates", STARTS_WITH)
 
 // Checking the display of the crate filter.
 // We start with the light theme.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 timeout: 2000
diff --git a/src/test/rustdoc-gui/search-reexport.goml b/src/test/rustdoc-gui/search-reexport.goml
index 5ef890d472b90..903db2df9aa8f 100644
--- a/src/test/rustdoc-gui/search-reexport.goml
+++ b/src/test/rustdoc-gui/search-reexport.goml
@@ -1,7 +1,7 @@
 // Checks that the reexports are present in the search index, can have
 // doc aliases and are highligted when their ID is the hash of the page.
 goto: file://|DOC_PATH|/test_docs/index.html
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 // First we check that the reexport has the correct ID and no background color.
 assert-text: ("//*[@id='reexport.TheStdReexport']", "pub use ::std as TheStdReexport;")
diff --git a/src/test/rustdoc-gui/search-result-color.goml b/src/test/rustdoc-gui/search-result-color.goml
index 5e328133e62a1..219b6c2f2a515 100644
--- a/src/test/rustdoc-gui/search-result-color.goml
+++ b/src/test/rustdoc-gui/search-result-color.goml
@@ -5,11 +5,7 @@ goto: file://|DOC_PATH|/test_docs/index.html?search=coo
 show-text: true
 
 // Ayu theme
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-preferred-dark-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 // Waiting for the search results to appear...
@@ -47,11 +43,7 @@ assert-css: (
 )
 
 // Dark theme
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 // Waiting for the search results to appear...
@@ -89,7 +81,7 @@ assert-css: (
 )
 
 // Light theme
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 // Waiting for the search results to appear...
@@ -130,11 +122,7 @@ assert-css: (
 goto: file://|DOC_PATH|/test_docs/index.html
 // We set the theme so we're sure that the correct values will be used, whatever the computer
 // this test is running on.
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 // If the text isn't displayed, the browser doesn't compute color style correctly...
 show-text: true
 // We reload the page so the local storage settings are being used.
diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml
index d9cf5ee66140f..1c3c2867f6532 100644
--- a/src/test/rustdoc-gui/settings.goml
+++ b/src/test/rustdoc-gui/settings.goml
@@ -29,15 +29,24 @@ wait-for-css: ("#settings", {"display": "block"})
 wait-for: "#alternative-display #search"
 assert: "#main-content.hidden"
 
+// Checking the default values of the themes:
+// * default: system
+// * default preferred dark: dark
+// * default preferred light: light
+assert-property: ("#theme-system-preference", {"checked": "true"})
+assert-property: ("#preferred-dark-theme-dark", {"checked": "true"})
+assert-property: ("#preferred-light-theme-light", {"checked": "true"})
+assert: ".setting-line:not(.hidden) #preferred-dark-theme"
+assert: ".setting-line:not(.hidden) #preferred-light-theme"
+
 // Now let's check the content of the settings menu.
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 click: "#settings-menu"
 wait-for: "#settings"
 
-// We check that the "Use system theme" is disabled.
-assert-property: ("#use-system-theme", {"checked": "false"})
-assert: "//*[@class='setting-line']//span[text()='Use system theme']"
+// We check that the current theme is not "system theme" is disabled.
+assert-property: ("#theme-system-preference", {"checked": "false"})
 // Meaning that only the "theme" menu is showing up.
 assert: ".setting-line:not(.hidden) #theme"
 assert: ".setting-line.hidden #preferred-dark-theme"
@@ -105,13 +114,14 @@ assert-css: (
     },
 )
 
-// We now switch the display.
-click: "#use-system-theme"
+// We now select the "system preference" theme.
+click: "#theme-system-preference"
+// Checking its text.
+assert-text: ("#theme-system-preference + span", "system preference")
 // Wait for the hidden element to show up.
 wait-for: ".setting-line:not(.hidden) #preferred-dark-theme"
 assert: ".setting-line:not(.hidden) #preferred-light-theme"
-// Check that the theme picking is hidden.
-assert: ".setting-line.hidden #theme"
+assert-local-storage: {"rustdoc-theme2": "system-preference"}
 
 // We check their text as well.
 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
diff --git a/src/test/rustdoc-gui/sidebar-mobile.goml b/src/test/rustdoc-gui/sidebar-mobile.goml
index 033c65783498f..c70639de8b078 100644
--- a/src/test/rustdoc-gui/sidebar-mobile.goml
+++ b/src/test/rustdoc-gui/sidebar-mobile.goml
@@ -42,21 +42,21 @@ scroll-to: ".block.keyword li:nth-child(1)"
 compare-elements-position-near: (".block.keyword li:nth-child(1)", ".mobile-topbar", {"y": 543})
 
 // Now checking the background color of the sidebar.
-local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 // Open the sidebar menu.
 click: ".sidebar-menu-toggle"
 assert-css: (".sidebar", {"background-color": "rgb(80, 80, 80)"})
 
-local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "ayu"}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 // Open the sidebar menu.
 click: ".sidebar-menu-toggle"
 assert-css: (".sidebar", {"background-color": "rgb(20, 25, 31)"})
 
-local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "light"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 // Open the sidebar menu.
diff --git a/src/test/rustdoc-gui/sidebar-source-code-display.goml b/src/test/rustdoc-gui/sidebar-source-code-display.goml
index e4662a10ed5da..a699d124e05c7 100644
--- a/src/test/rustdoc-gui/sidebar-source-code-display.goml
+++ b/src/test/rustdoc-gui/sidebar-source-code-display.goml
@@ -33,7 +33,7 @@ assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
 show-text: true
 
 // First we start with the light theme.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 // Waiting for the sidebar to be displayed...
 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
@@ -88,7 +88,7 @@ assert-css: (
 )
 
 // Now with the dark theme.
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 // Waiting for the sidebar to be displayed...
 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
@@ -143,7 +143,7 @@ assert-css: (
 )
 
 // And finally with the ayu theme.
-local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 // Waiting for the sidebar to be displayed...
 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
diff --git a/src/test/rustdoc-gui/sidebar.goml b/src/test/rustdoc-gui/sidebar.goml
index 32fe3334f3644..f800b886aecc7 100644
--- a/src/test/rustdoc-gui/sidebar.goml
+++ b/src/test/rustdoc-gui/sidebar.goml
@@ -1,7 +1,7 @@
 // Checks multiple things on the sidebar display (width of its elements, colors, etc).
 goto: file://|DOC_PATH|/test_docs/index.html
 show-text: true
-local-storage: {"rustdoc-theme": "light"}
+local-storage: {"rustdoc-theme2": "light"}
 // We reload the page so the local storage settings are being used.
 reload:
 
diff --git a/src/test/rustdoc-gui/theme-change.goml b/src/test/rustdoc-gui/theme-change.goml
index fb1c37ae68e74..4e2bc16b01804 100644
--- a/src/test/rustdoc-gui/theme-change.goml
+++ b/src/test/rustdoc-gui/theme-change.goml
@@ -1,32 +1,35 @@
 // Ensures that the theme change is working as expected.
 goto: file://|DOC_PATH|/test_docs/index.html
-local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
 reload:
 click: "#settings-menu"
 wait-for: "#theme-ayu"
+
+// First, we check that the default theme is "system theme".
+assert-property: ("#theme-system-preference", {"checked": "true"})
+
 click: "#theme-ayu"
 // should be the ayu theme so let's check the color.
 wait-for-css: ("body", { "background-color": "rgb(15, 20, 25)" })
-assert-local-storage: { "rustdoc-theme": "ayu" }
+assert-local-storage: { "rustdoc-theme2": "ayu" }
 click: "#theme-light"
 // should be the light theme so let's check the color.
 wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" })
-assert-local-storage: { "rustdoc-theme": "light" }
+assert-local-storage: { "rustdoc-theme2": "light" }
 click: "#theme-dark"
 // Should be the dark theme so let's check the color.
 wait-for-css: ("body", { "background-color": "rgb(53, 53, 53)" })
-assert-local-storage: { "rustdoc-theme": "dark" }
+assert-local-storage: { "rustdoc-theme2": "dark" }
 
 goto: file://|DOC_PATH|/settings.html
 wait-for: "#settings"
 click: "#theme-light"
 wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" })
-assert-local-storage: { "rustdoc-theme": "light" }
+assert-local-storage: { "rustdoc-theme2": "light" }
 
 click: "#theme-dark"
 wait-for-css: ("body", { "background-color": "rgb(53, 53, 53)" })
-assert-local-storage: { "rustdoc-theme": "dark" }
+assert-local-storage: { "rustdoc-theme2": "dark" }
 
 click: "#theme-ayu"
 wait-for-css: ("body", { "background-color": "rgb(15, 20, 25)" })
-assert-local-storage: { "rustdoc-theme": "ayu" }
+assert-local-storage: { "rustdoc-theme2": "ayu" }
diff --git a/src/test/rustdoc-gui/theme-in-history.goml b/src/test/rustdoc-gui/theme-in-history.goml
index f576ced1c6208..205a930cf4120 100644
--- a/src/test/rustdoc-gui/theme-in-history.goml
+++ b/src/test/rustdoc-gui/theme-in-history.goml
@@ -1,15 +1,11 @@
 // Ensures that the theme is working when going back in history.
 goto: file://|DOC_PATH|/test_docs/index.html
 // Set the theme to dark.
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: { "rustdoc-theme2": "dark" }
 // We reload the page so the local storage settings are being used.
 reload:
 assert-css: ("body", { "background-color": "rgb(53, 53, 53)" })
-assert-local-storage: { "rustdoc-theme": "dark" }
+assert-local-storage: { "rustdoc-theme2": "dark" }
 
 // Now we go to the settings page.
 goto: file://|DOC_PATH|/settings.html
@@ -17,7 +13,7 @@ wait-for: "#settings"
 // We change the theme to "light".
 click: "#theme-light"
 wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" })
-assert-local-storage: { "rustdoc-theme": "light" }
+assert-local-storage: { "rustdoc-theme2": "light" }
 
 // We go back in history.
 history-go-back:
@@ -25,4 +21,4 @@ history-go-back:
 assert-false: "#settings"
 // Check that the current theme is still "light".
 assert-css: ("body", { "background-color": "rgb(255, 255, 255)" })
-assert-local-storage: { "rustdoc-theme": "light" }
+assert-local-storage: { "rustdoc-theme2": "light" }