Skip to content

Converts `light-` and `dark-` prefixed CSS properties into corresponding light/dark theme globals

License

Notifications You must be signed in to change notification settings

Vakna/postcss-theme-shorthand

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS Theme Shorthand Build Status

PostCSS plugin that allows the use of "light-" and "dark-" property prefixes for themeing.

.thing {
	light-color: white;
	dark-color: black;
	color: red;
	light-background: black;
	dark-background: white;
}

.ballon, .garage {
	dark-color: red;
	light-color: blue;
}
:global(.theme-light) .thing {
	color: white;
	background: black;
}

:global(.theme-dark) .thing {
	color: black;
	background: white;
}

.thing {
	color: red;
}

:global(.theme-dark) .ballon, :global(.theme-dark) .garage {
	color: red;
}

:global(.theme-light) .ballon, :global(.theme-light) .garage {
	color: blue;
}

.ballon, .garage {
}

Usage

postcss([ require('postcss-theme-shorthand') ])

See PostCSS docs for examples for your environment.

About

Converts `light-` and `dark-` prefixed CSS properties into corresponding light/dark theme globals

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%