NuxtN
Nuxt•8mo ago•
19 replies
Marie🄰

Nuxt UI consistent theme during page reload

Hello everyone,
This might be a silly question but I'll ask it anyway.
So I've been using Nuxt UI for quite a while now and something that fascinates is how the themes are handled on the Nuxt UI documentation website. When you select a primary color and a neutral color it remains the same even when you hard reload the page and the page is still being server rendered.

I've gone through the code implementation and I noticed that it's being handled by two components ThemePicker.vue and ThemePickerButton also there is a theme.ts plug-in.

I've tried doing the same thing but when I select a color and refresh the page, the primary and neutral colors return to the default colors nuxt ui uses (green and slate) until the page fully loads then it changes back to the colors I selected.

I keep getting this error
Uncaught TypeError: Cannot set properties of null (setting "innerHTML") 


I literally just created a new nuxt app with only Nuxt UI installed, and copied the same implementation as the one of the docs. I don't know if there's more to the implementation or I'm doing something wrong.

NB: I didn't change anything from the theme.ts plugin

https://github.com/nuxt/ui/tree/v3/docs/app
GitHub
The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui
ui/docs/app at v3 Ā· nuxt/ui
Was this page helpful?