---

[![NPM version][npm-version-src]][npm-version-href]
[![License][license-src]][license-href]

Design see m3.material.io/styles

Typography

For example, using Sass:

``scss
@use 'material3-style/typography/css';

// Or you can include it yourself
@use 'material3-style/typography';
:root {
@include typography.theme();
}

.prose:not(:where([class~='not-prose'] *)) {
@include typography.typography();
}

.prose-ul-star:not(:where([class~='not-prose'] *)) {
@include typography.ul-star();
}
`

And add prose class to your content container:

`html



...



`

You can also directly insert the link tag:

`html


rel="stylesheet"
href="path/to/material3-style/typography/css/index.css"
/>





`

Color

Using Sass:

`scss
@use 'material3-style/color';

:root {
@include var.light-theme();
}

.dark:root {
@include var.dark-theme();
}

body {
color: var(--m3-color-on-surface);
background: var(--m3-color-surface);
}
`

Material3 Style also provides CSS files with two themes of bright and dark(material3-style/color/css/dark-theme.css, material3-style/color/css/light-theme.css).

$3

The default source color is #673ab7.

!default color

You can change the source color using the following command:

`bash
npx --no-install material3-style color -s "#518242"
``

Then, you will get a new theme palette!

!new color

Roadmap

- [x] typography
- [x] color
- [ ] elevation
- [ ] shape
- [ ] motion

License

MIT License © 2023 Riri

[npm-version-src]: https://img.shields.io/npm/v/material3-style?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://www.npmjs.com/package/material3-style
[license-src]: https://img.shields.io/github/license/daydreamer-riri/material3-style.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/daydreamer-riri/material3-style/blob/main/LICENSE