From e371da7f25939a731825dd43e834279634d1aa85 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Fri, 26 Aug 2022 14:50:40 +0100 Subject: [PATCH] docs --- src/components/Theme/stories/docs/component.md | 2 +- src/components/Theme/stories/docs/customise.md | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Theme/stories/docs/component.md b/src/components/Theme/stories/docs/component.md index 8fa84f7a..9082324c 100644 --- a/src/components/Theme/stories/docs/component.md +++ b/src/components/Theme/stories/docs/component.md @@ -10,4 +10,4 @@ The `Theme` component wraps your page content and uses [CSS variables](../?path= ``` -> 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. diff --git a/src/components/Theme/stories/docs/customise.md b/src/components/Theme/stories/docs/customise.md index 31c05874..328bbd34 100644 --- a/src/components/Theme/stories/docs/customise.md +++ b/src/components/Theme/stories/docs/customise.md @@ -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