classicvalues / postcss-theme-shorthand

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

PostCSS Theme Shorthand

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.