mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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> <!DOCTYPE html>
<html lang="en" theme="white"> <html lang="en" data-carbon-theme="white">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
@ -10,7 +10,7 @@
const theme = localStorage.getItem("theme"); const theme = localStorage.getItem("theme");
if (["white", "g10", "g90", "g100"].includes(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"); document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
} }
} catch (e) {} } 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); 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 toggled = false;
let events = []; let events = [];
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white"); $: document.documentElement.setAttribute("data-carbon-theme", toggled ? "g100" : "white");
</script> </script>
<LocalStorage <LocalStorage

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

@ -4,7 +4,7 @@
let storage; let storage;
let toggled = false; let toggled = false;
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white"); $: document.documentElement.setAttribute("data-carbon-theme", toggled ? "g100" : "white");
</script> </script>
<LocalStorage bind:this="{storage}" bind:value="{toggled}" /> <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. // conflict with how the iframe is displayed in the docs.
// Instead, we want the theme to be overridden in the standalone page. // Instead, we want the theme to be overridden in the standalone page.
if (["white", "g10", "g90", "g100"].includes(current_theme)) { 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( document.documentElement.style.setProperty(
"color-scheme", "color-scheme",
["white", "g10"].includes(current_theme) ? "light" : "dark" ["white", "g10"].includes(current_theme) ? "light" : "dark"

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

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