Home

follow up of #2342
In global.css:

:root {
	--primary: green;
	--secondary: blue;
}
.primary {
	color: var(--primary);
}
.secondary {
	color: var(--secondary);
}
.btn-primary {
	background-color: var(--primary);
}

In /pages/dummy.vue

<template>
	<section>
		<p class="primary">primary</p>
                <button class="btn btn-primary">primary button</button>
		<p class="secondary">secondary</p>
	</section>
</template>

<script>
export default {
	mounted () {
		this.$nextTick(() => {
			document.documentElement.style.setProperty('--primary', 'yellow')
			document.documentElement.style.setProperty('--secondary', 'red')
		})
	}
}
</script>

Expect primary text and button to be yellow and secondary text to be red

Result:

One of my older project that wan’t using Nuxt starter template is able to update CSS variable dynamically: https://horacekeung.github.io/option
If you change the theme colour of the site, you will see this in dev tool:

CSS variable --color and --dark are updated as shown.

My understanding is that in the Nuxt starter template, CSS is preprocessed hence variables such as --primary and --secondary are no longer a variable.