Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(Theme): update @carbon/Theme README #11635

Merged
merged 8 commits into from
Jul 5, 2022
Merged
23 changes: 11 additions & 12 deletions packages/themes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,37 +35,36 @@ If your project is using Sass, you can include this package and the
corresponding default theme by writing the following in your Sass file:

```scss
@import '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/themes';
```

By default, the white theme will be initialized. If you would like to include
another theme, you can do so by setting the global theme variable and then
calling our mixin. For example:
another theme, you can do so by setting the global theme variable in the import.
For example:

```scss
@import '@carbon/themes/scss/themes';

$carbon--theme: $carbon--theme--g10;

// Use the gray 10 theme
@include carbon--theme();
@use '@carbon/themes/scss/themes' as *;
@use '@carbon/themes' with (
$theme: $g100
);
```

Inline theming can be done by using the mixin. For example:

```scss
@import '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/themes';
dakahn marked this conversation as resolved.
Show resolved Hide resolved
@use '@carbon/themes/scss/theme';

// Use the default white theme here

.my-dark-theme {
@include carbon--theme($carbon--theme--g90) {
@include theme.theme(themes.$g90) {
// Use the dark theme here
}
}

.my-darker-theme {
@include carbon--theme($carbon--theme--g100) {
@include theme.theme(themes.$g100) {
// Use the darker theme here
}
}
Expand Down