gistfile1.txt

css
:root {
	--app-color-black: #111111;
	--app-color-primary: #ffffff;
	--app-color-secondary: #00ff1a;
}
@media (prefers-color-scheme: dark) {
	:root {
		--app-color-black: #ffffff;
		--app-color-primary: #111111;
		--app-color-secondary: #a20021;
	}
}
@media (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
	}
}
tailwind
module.exports = {
	content: ['./lib/components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
	theme: {
		extend: {
			colors: {
				black: 'var(--app-color-black)',
				primary: 'var(--app-color-primary)',
				secondary: 'var(--app-color-secondary)'
			},
			fontFamily: {
				sans: ['var(--app-font-sans)']
			}
		}
	},
	plugins: []
};

HTML
<main>
  <h1 className="text-3xl font-bold underline text-secondary bg-primary">Hello world!</h1>
</main>