Skip to content

Instantly share code, notes, and snippets.

@whisher
Created February 10, 2023 09:18
Show Gist options
  • Save whisher/0c1d65dfd97bf3b7cc5224583d871dfa to your computer and use it in GitHub Desktop.
Save whisher/0c1d65dfd97bf3b7cc5224583d871dfa to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment