Nuxt•4mo ago

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")

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

ui/docs/app at v3 · nuxt/ui

The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui

12 Replies

kapa.ai•4mo ago

Hi @Marie🥰. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve a consistent Nuxt UI theme (such as primary and neutral colors) that persists across page reloads—including during server-side rendering—you need to ensure that your color preferences are applied as early as possible in the app lifecycle, ideally before the UI renders. The Nuxt UI documentation site achieves this by storing the selected theme in local storage and injecting the CSS variables on the server and client, so the correct theme is visible immediately, not after hydration. From the knowledge sources, here are the key points and recommendations: 1. Theme Configuration:
Nuxt UI allows you to configure theme colors at runtime using the ui.colors key in app.config.ts or vite.config.ts. However, these configurations are static and do not persist user choices across reloads by themselves. For dynamic, user-driven theming, you need to manage the color state yourself and ensure it is available before the app renders.
See: Nuxt UI Theme Configuration 2. Persistence and Early Injection:
The Nuxt UI docs site uses a combination of local storage and a plugin (like theme.ts) to read the user's color preferences and inject the corresponding CSS variables as early as possible. This prevents a flash of the default theme before the user's chosen theme is applied. If you only update the theme after the app is mounted, you will see the default colors on SSR and during hydration, which matches the issue you described. 3. Error Handling:
The error Uncaught TypeError: Cannot set properties of null (setting "innerHTML") suggests that your code is trying to manipulate the DOM before the relevant element exists, or outside the correct lifecycle hook. Make sure any DOM manipulation or CSS variable injection happens at the right time. 4. Reference Implementation:
The Nuxt UI docs site’s approach is open source. You can review their theme.ts plugin and ThemePicker components for details. The key is to synchronize the theme state between local storage and the initial HTML/CSS as early as possible, ideally in a plugin that runs both on the server and client. 5. Summary of Steps: - Store the user's color choices in local storage. - On app initialization (in a plugin), read these values and inject the corresponding CSS variables into the document <head> or <html> element. - Ensure this plugin runs before the app renders, both on server and client, to avoid flashes of the default theme. The knowledge sources do not provide a full code example for this exact use case, but they confirm that dynamic theming is possible and reference the Nuxt UI docs site as a working example. For a detailed, production-ready implementation, reviewing the Nuxt UI docs source code is recommended, as it demonstrates how to persist and inject theme variables for a seamless user experience. If you need further help, please specify which part of the implementation you’re struggling with (e.g., the plugin, the storage, or the injection of CSS variables), and I can guide you based on the available documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1226112952893964383> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Marie🥰OP•4mo ago

@kapa.ai how do I make sure the configuration and the selected options are loaded first before the DOM loads

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly describe a built-in Nuxt UI or Nuxt mechanism to guarantee that user-selected theme configuration (such as color choices) is loaded and applied before the DOM renders, especially for dynamic, user-driven theming. The official documentation shows how to configure theme colors statically via app.config.ts or vite.config.ts, but this does not cover dynamic, persisted user preferences or early injection before DOM load Nuxt UI Theme Configuration. However, the Nuxt UI documentation site achieves this by using a custom approach (as seen in their open-source repo), but the exact method is not detailed in the provided knowledge sources. The documentation does suggest that for dynamic color aliases, you must define them in both your config and theme options, but it does not cover runtime, user-driven changes or SSR hydration issues. In summary:
I'm sorry, but the knowledge sources do not contain enough information to provide a step-by-step solution for ensuring that user-selected theme configuration is loaded and applied before the DOM renders. For a production-ready solution, you would need to refer to the Nuxt UI documentation site source code for their custom implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1226112952893964383> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Marie🥰OP•4mo ago

@kapa.ai This is the themes plugin from the nuxt ui documentation repo I'm using the same code in my app but the error is still displaying app/plugins/theme.ts

theme.txt

Marie🥰OP•4mo ago

@kapa.ai This is the themes plugin from the nuxt ui documentation repo I'm using the same code in my app but the error is still displaying app/plugins/theme.ts

theme.txt

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain the contents of the app/plugins/theme.ts file from the Nuxt UI documentation repo, nor do they provide details about its implementation or troubleshooting for the specific error you mentioned. Because of this, I cannot review or debug the plugin code or provide a solution based on the available information. If you can share the actual code of your theme.ts plugin or provide more details about the error context, I may be able to help further. As it stands, the knowledge sources do not have enough information to answer your question with confidence. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1226112952893964383> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Marie🥰OP•4mo ago

export default defineNuxtPlugin({
  enforce: 'post',
  setup() {
    const appConfig = useAppConfig()

    if (import.meta.client) {
      function updateColor(type: 'primary' | 'neutral') {
        const color = localStorage.getItem(`nuxt-ui-${type}`)
        if (color) {
          appConfig.ui.colors[type] = color
        }
      }

      function updateRadius() {
        const radius = localStorage.getItem('nuxt-ui-radius')
        if (radius) {
          appConfig.theme.radius = Number.parseFloat(radius)
        }
      }

      function updateBlackAsPrimary() {
        const blackAsPrimary = localStorage.getItem('nuxt-ui-black-as-primary')
        if (blackAsPrimary) {
          appConfig.theme.blackAsPrimary = blackAsPrimary === 'true'
        }
      }

      updateColor('primary')
      updateColor('neutral')
      updateRadius()
      updateBlackAsPrimary()
    }

export default defineNuxtPlugin({
  enforce: 'post',
  setup() {
    const appConfig = useAppConfig()

    if (import.meta.client) {
      function updateColor(type: 'primary' | 'neutral') {
        const color = localStorage.getItem(`nuxt-ui-${type}`)
        if (color) {
          appConfig.ui.colors[type] = color
        }
      }

      function updateRadius() {
        const radius = localStorage.getItem('nuxt-ui-radius')
        if (radius) {
          appConfig.theme.radius = Number.parseFloat(radius)
        }
      }

      function updateBlackAsPrimary() {
        const blackAsPrimary = localStorage.getItem('nuxt-ui-black-as-primary')
        if (blackAsPrimary) {
          appConfig.theme.blackAsPrimary = blackAsPrimary === 'true'
        }
      }

      updateColor('primary')
      updateColor('neutral')
      updateRadius()
      updateBlackAsPrimary()
    }

if (import.meta.server) {
      useHead({
        script: [{
          innerHTML: `
            let html = document.querySelector('style#nuxt-ui-colors').innerHTML;

            if (localStorage.getItem('nuxt-ui-primary')) {
              const primaryColor = localStorage.getItem('nuxt-ui-primary');
              if (primaryColor !== 'black') {
                html = html.replace(
                  /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
                  \`$1\${primaryColor}$2\`
                );
              }
            }
            if (localStorage.getItem('nuxt-ui-neutral')) {
              let neutralColor = localStorage.getItem('nuxt-ui-neutral');
              html = html.replace(
                /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
                \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
              );
            }

            document.querySelector('style#nuxt-ui-colors').innerHTML = html;
            `.replace(/\s+/g, ' '),
          type: 'text/javascript',
          tagPriority: -1
        }, {
          innerHTML: `
            if (localStorage.getItem('nuxt-ui-radius')) {
              document.querySelector('style#nuxt-ui-radius').innerHTML = ':root { --ui-radius: ' + localStorage.getItem('nuxt-ui-radius') + 'rem; }';
            }
          `.replace(/\s+/g, ' '),
          type: 'text/javascript',
          tagPriority: -1
        }, {
          innerHTML: `
            if (localStorage.getItem('nuxt-ui-black-as-primary') === 'true') {
              document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = ':root { --ui-primary: black; } .dark { --ui-primary: white; }';
            } else {
              document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
            }
          `.replace(/\s+/g, ' ')
        }]
      })
    }
  }
})

if (import.meta.server) {
      useHead({
        script: [{
          innerHTML: `
            let html = document.querySelector('style#nuxt-ui-colors').innerHTML;

            if (localStorage.getItem('nuxt-ui-primary')) {
              const primaryColor = localStorage.getItem('nuxt-ui-primary');
              if (primaryColor !== 'black') {
                html = html.replace(
                  /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
                  \`$1\${primaryColor}$2\`
                );
              }
            }
            if (localStorage.getItem('nuxt-ui-neutral')) {
              let neutralColor = localStorage.getItem('nuxt-ui-neutral');
              html = html.replace(
                /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
                \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
              );
            }

            document.querySelector('style#nuxt-ui-colors').innerHTML = html;
            `.replace(/\s+/g, ' '),
          type: 'text/javascript',
          tagPriority: -1
        }, {
          innerHTML: `
            if (localStorage.getItem('nuxt-ui-radius')) {
              document.querySelector('style#nuxt-ui-radius').innerHTML = ':root { --ui-radius: ' + localStorage.getItem('nuxt-ui-radius') + 'rem; }';
            }
          `.replace(/\s+/g, ' '),
          type: 'text/javascript',
          tagPriority: -1
        }, {
          innerHTML: `
            if (localStorage.getItem('nuxt-ui-black-as-primary') === 'true') {
              document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = ':root { --ui-primary: black; } .dark { --ui-primary: white; }';
            } else {
              document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
            }
          `.replace(/\s+/g, ' ')
        }]
      })
    }
  }
})

@kapa.ai#2237 @kapa.ai I've attached the code for the themes plugin above

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources you provided do not include the actual code for the app/plugins/theme.ts file from the Nuxt UI documentation repo, nor do they contain detailed troubleshooting steps for the error you are experiencing with this plugin. Without the code or more specific information from the knowledge sources, I cannot review or debug the plugin or provide a solution for your error. If you can provide the code for your theme.ts plugin or more context about the error, I may be able to help further. As it stands, the knowledge sources do not contain enough information to answer your question with confidence. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1226112952893964383> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI consistent theme during page reload

Did you find this page helpful?