primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-07 14:58:54 +03:00
Code Issues Projects Releases Wiki Activity

[Docs] theming improvements (#1500)

Browse Source 
* Correct typos

* Fix syntax highlighting

* Update "Set a theme"
This commit is contained in:
simurai 2021-07-16 10:47:43 +09:00 committed by GitHub
parent 2e580a7ed4
commit 7db8d4af02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/content/getting-started/theming.md
View File

@ -9,18 +9,19 @@ Currently there are 3 themes (`light`, `dark`, `dark_dimmed`) to choose from. Wh
## Set a theme
Configure Primer CSS to use a certain theme by adding the following attributes:
Configure Primer CSS to use a certain theme by setting HTML attributes.
- `data-color-mode` with a value of either `light` or `dark`
- either `data-light-theme` or `data-dark-theme` with a value of either `light`, `dark`, `dark_dimmed`
- **Light** theme: `data-color-mode="light" data-dark-theme="light"`
- **Dark** theme: `data-color-mode="dark" data-dark-theme="dark"`
- **Dark Dimmed** theme: `data-color-mode="dark" data-dark-theme="dark_dimmed"`
The attributes can be added to any element, but ideally it should be added to the document root (`<html>`). Below an example to use the `dark_dimmed` theme:
Typically these attributes are added to the document root (`<html>`) to use on the entire page:
```html
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
```
More examples:
Below an example of all themes to compare:
```html live
<div data-color-mode="light" data-light-theme="light" class="p-3">
@ -161,7 +162,7 @@ The benefit of `auto` over the `scale` variables is that `auto` variables automa
**Note**: If you use `stylelint`, the [`primer/no-scale-colors`](https://github.com/primer/stylelint-config-primer/tree/main/plugins#primerno-scale-colors) will fail with "[variable] is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin". You can disable stylelint for this case by adding `// stylelint-disable-line`:
```scss
```css
.my-class {
color: var(--color-auto-gray-7); // stylelint-disable-line
}
@ -173,4 +174,4 @@ In general,
1. use [functional variables](/support/color-system) as much as possible.
2. create new [custom color variables](/getting-started/theming#custom-color-variables) if there is no functional variable that fits the use case.
3. as an alternaitve to custom color variables, use [`auto` variables](/getting-started/theming#auto-variables) if the results give enough constrast.
3. as an alternative to custom color variables, use [`auto` variables](/getting-started/theming#auto-variables) if the results give enough contrast.