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

feat(palimpsest): add ThemePicker to Header

Browse source
This commit is contained in:
Eric Liu 2020-01-09 09:49:00 -08:00
commit 8acd775e42
2 changed files with 53 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
palimpsest/src/components/ThemePicker.svelte
View file

@ -1,14 +1,14 @@
<script> <script>
import { Select, SelectItem } from 'carbon-components-svelte'; import { Select, SelectItem } from 'carbon-components-svelte';
let selected = 'white'; let selected = 'g100';
$: { $: {
document.documentElement.setAttribute('carbon-theme', selected); document.documentElement.setAttribute('carbon-theme', selected);
} }
</script> </script>
<Select inline labelText="Select Carbon Theme" bind:selected> <Select inline labelText="Theme" bind:selected>
<SelectItem value="white" text="White (light)" /> <SelectItem value="white" text="White (light)" />
<SelectItem value="g10" text="Gray 10 (light)" /> <SelectItem value="g10" text="Gray 10 (light)" />
<SelectItem value="g90" text="Gray 90 (dark)" /> <SelectItem value="g90" text="Gray 90 (dark)" />

51
palimpsest/src/containers/Header.svelte Normal file
View file

@ -0,0 +1,51 @@
<script>
import { Link } from 'carbon-components-svelte';
import ThemePicker from '../components/ThemePicker.svelte';
</script>
<style>
header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
left: 0;
width: 100%;
height: 2.5rem;
padding: 0 1rem;
background-color: var(--cds-ui-01);
border-bottom: 1px solid var(--cds-ui-03);
}
nav {
display: flex;
align-items: baseline;
}
.bx--link {
font-size: 1rem;
color: var(--cds-text-01);
}
.version {
font-size: 0.75rem;
color: var(--cds-text-02);
margin-left: 0.5rem;
margin-right: 1.5rem;
}
</style>
<header>
<nav>
<a class="bx--link" href="/">
Carbon Components
<strong>Svelte</strong>
</a>
<span class="version">v0.2.1</span>
<Link href="https://github.com/IBM/carbon-components-svelte">GitHub</Link>
</nav>
<div>
<ThemePicker />
</div>
</header>