mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +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

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
aria-label="Navigation"
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];
$: document.documentElement.setAttribute("theme", currentTheme);
$: {
const searchParams = new URLSearchParams(window.location.search);
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>
<slot />