properties
changelog

@theme Mixin

Use @theme mixin for dark/light mode and custom theme.

Usage:

.any-class {
	/* direct */
	@theme <variant> { ... }
}

Reference

shilp.config.js
const shilpConfig = {
	target: "react",

	mixins: {
		theme: {
			variants: {
				/* class on parent, style on self */
				dark: ".dark &",
				light: ".light &",

				/* class on self, style on self */
				"dark-self": "&.dark",
				"light-self": "&.light",

				/* class on parent or self, style on self */
				// "dark-any": ".dark &, &.dark",
				// "light-any": ".light &, &.light",
			},
		},
	},
};

export default shilpConfig;
text mixincomponents overview