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

docs: document dynamic theming

Browse source
This commit is contained in:
Eric Liu 2021-01-22 16:48:10 -08:00
commit 78ce3784cc
1 changed files with 28 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

28
README.md
View file

@ -130,6 +130,34 @@ export default app;
See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack). See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
#### Dynamic theming
Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
```html
<!DOCTYPE html>
<html lang="en" theme="g10">
<body>
...
</body>
</html>
```
Using JavaScript:
```svelte
<script>
/** @type {"white" | "g10" | "g90" | "g100"} */
let theme = "white";
$: document.documentElement.setAttribute("theme", theme);
</script>
<button on:click="{() => theme = 'g90'}">Update theme</button>
```
### TypeScript support ### TypeScript support
[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld). [TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).