mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(style): correctly set carbon theme

Browse source
This commit is contained in:
Eric Liu 2024-03-31 10:38:52 -07:00
commit 196b1bac2f
6 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" theme="white">
<html lang="en" data-carbon-theme="white">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
@ -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) {}

2
docs/src/global.css
View file

@ -1,4 +1,4 @@
html[theme="g90"] .code-override {
html[data-carbon-theme="g90"] .code-override {
border: 1px solid var(--bx-border-subtle-01);
}

2
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
View file

@ -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");
</script>
<LocalStorage

2
docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
View file

@ -4,7 +4,7 @@
let storage;
let toggled = false;
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
$: document.documentElement.setAttribute("data-carbon-theme", toggled ? "g100" : "white");
</script>
<LocalStorage bind:this="{storage}" bind:value="{toggled}" />

2
docs/src/pages/framed/_reset.svelte
View file

@ -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"

2
docs/src/pages/index.svelte
View file

@ -36,7 +36,7 @@
const cssThemeToggle = `<script>
let theme = "${$theme}"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
$: document.documentElement.setAttribute("data-carbon-theme", theme);
<\/script>
`;