mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

style(docs): color-scheme reflects theme (#1874)

Browse source
This commit is contained in:
metonym 2023-12-30 10:35:44 -08:00 • committed by GitHub
commit 1600775968
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/index.html
View file

@ -5,6 +5,16 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carbon Components Svelte</title> <title>Carbon Components Svelte</title>
<script>
try {
const theme = localStorage.getItem("theme");
if (["white", "g10", "g80", "g90", "g100"].includes(theme)) {
document.documentElement.setAttribute("theme", theme);
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
}
} catch (e) {}
</script>
</head> </head>
<body> <body>
<script type="module" src="/src/index.js"></script> <script type="module" src="/src/index.js"></script>

7
docs/src/layouts/ComponentLayout.svelte
View file

@ -34,10 +34,11 @@
$: multiple = api_components.length > 1; $: multiple = api_components.length > 1;
onMount(() => { onMount(() => {
const currentTheme = window.location.search.split("?theme=")[1]; const searchParams = new URLSearchParams(window.location.search);
const current_theme = searchParams.get("theme");
if (["white", "g10", "g80", "g90", "g100"].includes(currentTheme)) { if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
theme.set(currentTheme); theme.set(current_theme);
} }
}); });

9
docs/src/pages/_layout.svelte
View file

@ -80,7 +80,14 @@
} }
}}" /> }}" />
<Theme persist bind:theme="{$theme}"> <Theme
persist
bind:theme="{$theme}"
on:update="{(e) => {
const theme = e.detail.theme;
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
}}"
>
<Header <Header
aria-label="Navigation" aria-label="Navigation"
href="{$url('/')}" href="{$url('/')}"

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

@ -8,9 +8,18 @@
}; };
}); });
// TODO: [refactor] parse search parameters more reliably $: {
$: currentTheme = window.location.search.split("?theme=")[1]; const searchParams = new URLSearchParams(window.location.search);
$: document.documentElement.setAttribute("theme", currentTheme); const current_theme = searchParams.get("theme");
// NOTE: we *do not* want to persist the theme as this can
// 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", "g80", "g90", "g100" ].includes(current_theme)) {
document.documentElement.setAttribute("theme", current_theme)
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark");
}
}
</script> </script>
<slot /> <slot />