If you want to make certain pieces of content on your site use a custom color theme, but you don't neccessarily want to have to setup a custom page every time. It's fairly easy to make a setup that makes this job easy, using Nuxt Content and Tailwind. If you are not using Nuxt Content the ideas can be used in a fullblown CMS setup without too many changes.
The colors in this post is set from the markdown file. In the meta section. Below you can see the setup for it.
colors: [
{name: 'primary', value: '#fff'},
{name: 'secondary', value: '#eee'},
{name: 'color-1', value: '#FE4365'},
{name: 'color-2', value: '#eee'},
{name: 'color-3', value: '#222'},
{name: 'color-4', value: '#333'}
]
This setup can of course be changed to include rgb or hsl values so it can handle things like background opacity.
I then have a head function i my _slug.vue file (which is my single post component).
head() {
let colors = {};
if (this.article.colors) {
colors.cssText = this.getCSSVars(this.article.colors);
colors.type = 'text/css';
colors.hid = 'page-themes';
}
return {
// ...
// other meta info
// ...
style: [colors],
};
},
This uses a helper function that basically just generates css variables from an array of color objects and puts on :root.
getCSSVars(array) {
let list = '';
array.forEach((item) => {
list += `
--${item.name}: ${item.value};`;
});
return `:root { ${list}
}`;
},
The last bit needed is to make sure that you tailwind is using your color variables to handle your colors.
colors: {
transparent: 'transparent',
current: 'currentColor',
secondary: 'var(--secondary, #FFFFFF)',
primary: 'var(--primary, #242424)',
'color-1': 'var(--color-1, #FE4365)',
'color-2': 'var(--color-2, #FF7F6A)',
'color-3': 'var(--color-3, #B4C8C2)',
'color-4': 'var(--color-4, #ECF1F0)',
},
And that's it.
The overwrites can of course be used on other pages, than those controlled by Nuxt Content by just making a similar array of colors and adding that to the head() function.