Skip to content

Commit ed8a554

Browse files
committed
docs: add note about further sass customization
1 parent 435c15f commit ed8a554

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

THEMING.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,20 @@ a:visited {
8686
}
8787
```
8888

89+
### Customizing Further
90+
91+
If you'd like to customize the styles even further, you can set additional variables in other MDC or SMUI components. Some notable ones are the [shape variables](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-shape#sass-variables) and the [typography variables](https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-typography/_typography.scss#L93). You can add them to your `_smui-theme.scss` file. For example, you can remove rounded corners in SMUI by setting the shape variables.
92+
93+
```scss
94+
@use '@material/shape/index' as shape with (
95+
$small-component-radius: 0,
96+
$medium-component-radius: 0,
97+
$large-component-radius: 0
98+
);
99+
```
100+
101+
Just make sure that you put that directly after the `@use '@material/theme/index'` block. All `@use` statements in a file must precede any styles in Sass. Also, remember to include it in both your light and dark theme files if you're using both.
102+
89103
## Theming the Bare CSS
90104

91105
If you use the bare CSS, you can set a subset of the theme options with CSS variables. Note that not all of the colors in SMUI read from CSS variables, so some parts will still use the colors defined in the original Sass compile. Below is a copy of the variables from the CSS on the SMUI website. You can use this as a starting point for your own theme.

0 commit comments

Comments
 (0)