wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs

Browse source
This commit is contained in:
Jon McClure 2022-08-26 14:50:40 +01:00
parent c7b062b721
commit e371da7f25
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Theme/stories/docs/component.md
View file

@ -10,4 +10,4 @@ The `Theme` component wraps your page content and uses [CSS variables](../?path=
</Theme>
```
> For Kit users, the `Theme` is set for you in your graphics homepage (`pages/+page.svelte`). You can customise it there for the whole page.
> For Graphics Kit users, the `Theme` is set for you in your graphics homepage (`pages/+page.svelte`). You can customise it there for the whole page.

13
src/components/Theme/stories/docs/customise.md
View file

@ -2,9 +2,18 @@ You can customise the theme of your page in two ways:
First, you can choose the `base` theme, either `light` or `dark`.
From there, you can pass a custom theme object to the `theme` prop. Any custom styles you pass to `theme` will override themes in the `base` theme.
From there, you can pass a custom theme object to the `theme` prop. Any custom styles you pass to `theme` will override styles in the `base` theme.
> Check out the "Control" column for `theme` in the properties table above to see what properties you can customise.
Check out the "Control" column for `theme` in the properties table above to see what properties you can customise.
> **Pro tip:** The `Theme` component only styles child components or elements, so if you're changing the background colour of your page, it's still a good idea to set a `background-color` on your `body` element in global SCSS.
>
> ```scss
> // global.scss
> body {
> background-color: #333;
> }
> ```
```svelte
<Theme