Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Material Design 3 colors implemented in plain CSS using the relative color syntax

bengeendokter/m3-color-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Material Design 3 colors implemented in plain CSS using the relative color syntax.

Netlify Status

Demo

A demo is available on https://m3-color-css.bengeendokter.be/

Install

Install latest version

pnpm add github:bengeendokter/m3-color-css

Install specific version

pnpm add github:bengeendokter/m3-color-css#v0.1.5

Get light/dark/contrast themes 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

// 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

About

Material Design 3 colors implemented in plain CSS using the relative color syntax

Topics

Resources

Stars

Watchers

Forks