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

docs: build carbon themes using sass

Browse source
This commit is contained in:
Eric Liu 2020-07-23 19:58:54 -07:00
commit e2c8ea6d76
10 changed files with 808 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/src/components/GlobalHeader.svelte
View file

@ -7,8 +7,9 @@
HeaderNav,
HeaderNavItem,
HeaderUtilities,
HeaderActionLink
HeaderActionLink,
} from "carbon-components-svelte";
import Theme from "./Theme.svelte";
</script>
<Header

29
docs/src/components/Theme.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { onMount } from "svelte";
import { Select, SelectItem } from "carbon-components-svelte";
let theme = undefined;
onMount(() => {
theme = localStorage.getItem("theme") || "g10";
});
$: if (theme) {
localStorage.setItem("theme", theme);
document.documentElement.setAttribute("carbon-theme", theme);
}
</script>
<style>
:global(.bx--select-input) {
width: auto;
min-width: 0;
}
</style>
<Select inline labelText="Theme" bind:selected={theme}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>