https://github.com/bengeendokter/m3-css-color-token-generator
Material Design 3 CSS custom properties color token generator.
https://github.com/bengeendokter/m3-css-color-token-generator
css custom-properties m3 material-design
Last synced: about 1 month ago
JSON representation
Material Design 3 CSS custom properties color token generator.
- Host: GitHub
- URL: https://github.com/bengeendokter/m3-css-color-token-generator
- Owner: bengeendokter
- Created: 2024-02-17T21:25:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-13T21:31:45.000Z (about 2 months ago)
- Last Synced: 2025-03-13T21:36:05.410Z (about 2 months ago)
- Topics: css, custom-properties, m3, material-design
- Language: CSS
- Homepage:
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Material Design 3 CSS custom properties color token generator
## New repo
The code has been moved to https://github.com/bengeendokter/m3-color-css
Verions 1.2 and prior can be found in this repo.
## Install
### Install latest version
```bash
pnpm add github:bengeendokter/m3-css-color-token-generator
```
### Install specific version
```bash
pnpm add github:bengeendokter/m3-css-color-token-generator#v0.1.1
```
## Get light/dark/contrast themes CSS
```CSS
/* styles.css */
@import "m3-css-color-token-generator/theme/palette";
@import "m3-css-color-token-generator/theme/light";
@import "m3-css-color-token-generator/theme/dark";
@import "m3-css-color-token-generator/theme/light-mc";
@import "m3-css-color-token-generator/theme/dark-mc";
@import "m3-css-color-token-generator/theme/light-hc";
@import "m3-css-color-token-generator/theme/dark-hc";
```
## Use helper functions
```TypeScript
// main.ts
import {setTheme, handleLightThemeButtonPressed, enableSystemContrastPreferenceListener, enableSystemColorSchemePreferenceListener} from 'm3-css-color-token-generator';
setTheme();
enableSystemContrastPreferenceListener();
enableSystemColorSchemePreferenceListener();
lightButton.addEventListener("click", () => {
handleLightThemeButtonPressed();
});
```