material3-style
Design see m3.material.io/styles
See demo: https://daydreamer-riri.github.io/material3-style/example/color-demo/
Typography
For example, using Sass:
@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:
<body>
<article class="prose">
<!-- your content -->
<h1>...</h1>
</article>
</body>
You can also directly insert the link tag:
<html>
<head>
<link
rel="stylesheet"
href="path/to/material3-style/typography/css/index.css"
/>
</head>
<body class="prose">
<!-- your content -->
</body>
</html>
Color
Using Sass:
@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).
Change source color
The default source color is #673ab7.
You can change the source color using the following command:
npx --no-install material3-style color -s "#518242"
Then, you will get a new theme palette!
Roadmap
- typography
- color
- elevation
- shape
- motion