How to change theming by workspace

[hollow lynx]

Hi @errant totem. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To change the theming by workspace in a Nuxt application using Nuxt UI, you can leverage the app.config.ts file and the updateAppConfig utility. Here's how you can approach this:

1. First, set up your initial theme configuration in app.config.ts:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

2. To change the theme dynamically based on the workspace, you can use the updateAppConfig utility. Here's an example of how you might do this:

<script setup>
const appConfig = useAppConfig()

function changeThemeForWorkspace(workspaceTheme) {
  const newAppConfig = {
    ui: {
      primary: workspaceTheme.primary,
      gray: workspaceTheme.gray
    }
  }

  updateAppConfig(newAppConfig)
}
</script>

3. Call the changeThemeForWorkspace function whenever you need to update the theme, such as when switching workspaces.

This approach allows you to dynamically update the primary and gray colors of your application at runtime. The changes will be reflected immediately due to the reactive nature of the app config.

For more detailed information on theming and app configuration, you can refer to:

• Nuxt UI Theming
• Nuxt App Config

Remember that this method changes the global theme for the entire application. If you need more granular control, you might need to implement a more complex theming system or use CSS variables for specific components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: