diff --git a/docs/index.html b/docs/index.html
index e49c0552..9bc64fc3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,5 +1,5 @@
-
+
@@ -10,7 +10,7 @@
const theme = localStorage.getItem("theme");
if (["white", "g10", "g90", "g100"].includes(theme)) {
- document.documentElement.setAttribute("theme", theme);
+ document.documentElement.setAttribute("data-carbon-theme", theme);
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
}
} catch (e) {}
diff --git a/docs/src/global.css b/docs/src/global.css
index 2f0fb04b..441bdb22 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -1,4 +1,4 @@
-html[theme="g90"] .code-override {
+html[data-carbon-theme="g90"] .code-override {
border: 1px solid var(--bx-border-subtle-01);
}
diff --git a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
index e1e11e30..d15aec48 100644
--- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
@@ -4,7 +4,7 @@
let toggled = false;
let events = [];
- $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+ $: document.documentElement.setAttribute("data-carbon-theme", toggled ? "g100" : "white");
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index 93d9c0fe..3a97f8a9 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -16,7 +16,7 @@
// conflict with how the iframe is displayed in the docs.
// Instead, we want the theme to be overridden in the standalone page.
if (["white", "g10", "g90", "g100"].includes(current_theme)) {
- document.documentElement.setAttribute("theme", current_theme);
+ document.documentElement.setAttribute("data-carbon-theme", current_theme);
document.documentElement.style.setProperty(
"color-scheme",
["white", "g10"].includes(current_theme) ? "light" : "dark"
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 3dc3c21a..f40031c3 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -36,7 +36,7 @@
const cssThemeToggle = `