diff --git a/packages/themes/README.md b/packages/themes/README.md index dc5fe148ad0c..cc3a375c4575 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -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'; +@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 } }