https://github.com/bengeendokter/m3-color-css
Material Design 3 colors implemented in plain CSS using the relative color syntax
https://github.com/bengeendokter/m3-color-css
css custom-properties m3 material-design relative-color
Last synced: about 1 month ago
JSON representation
Material Design 3 colors implemented in plain CSS using the relative color syntax
- Host: GitHub
- URL: https://github.com/bengeendokter/m3-color-css
- Owner: bengeendokter
- Created: 2025-02-04T17:38:29.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-16T16:06:10.000Z (about 1 month ago)
- Last Synced: 2025-03-16T16:39:04.257Z (about 1 month ago)
- Topics: css, custom-properties, m3, material-design, relative-color
- Language: CSS
- Homepage: https://m3-color-css.bengeendokter.be/
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Material Design 3 colors implemented in plain CSS using the relative color syntax.
[](https://app.netlify.com/sites/m3-color-css/deploys)
## Demo
A demo is available on https://m3-color-css.bengeendokter.be/
## Install
### Install latest version
```bash
pnpm add github:bengeendokter/m3-color-css
```
### Install specific version
```bash
pnpm add github:bengeendokter/m3-color-css#v0.1.4
```
## Get light/dark/contrast themes CSS
```CSS
/* styles.css */
@import "m3-color-css/theme/palette";
@import "m3-color-css/theme/light";
@import "m3-color-css/theme/dark";
@import "m3-color-css/theme/light-mc";
@import "m3-color-css/theme/dark-mc";
@import "m3-color-css/theme/light-hc";
@import "m3-color-css/theme/dark-hc";
```
## Use helper functions
```TypeScript
// main.ts
import {setTheme, handleLightThemeButtonPressed, enableSystemContrastPreferenceListener, enableSystemColorSchemePreferenceListener} from 'm3-color-css';
setTheme();
enableSystemContrastPreferenceListener();
enableSystemColorSchemePreferenceListener();
lightButton.addEventListener("click", () => {
handleLightThemeButtonPressed();
});
```
## Older versions
Verions 1.2 and prior can be found on https://github.com/bengeendokter/m3-css-color-token-generator