Dynamically fetched primary colors

[ThiloHettmer]

Description

Hey everyone,

our cms application fetches the colors from the backend on runtime and sets the css variables via useHead

useHead({
  style: [
    {
      key: 'primary-color-override',
      innerHTML: `:root { --custom-primary: ${primaryColor}; }`
    }
  ]
})

Then in our tailwind config:

theme: {
    extend: {
      colors: {
        custom: {
          50: 'rgb(var(--custom-primary) / <alpha-value>)',
          100: 'rgb(var(--custom-primary) / <alpha-value>)',
          200: 'rgb(var(--custom-primary) / <alpha-value>)',
          300: 'rgb(var(--custom-primary) / <alpha-value>)',
          400: 'rgb(var(--custom-primary) / <alpha-value>)',
          500: 'rgb(var(--custom-primary) / <alpha-value>)',
          600: 'rgb(var(--custom-primary) / <alpha-value>)',
          700: 'rgb(var(--custom-primary) / <alpha-value>)',
          800: 'rgb(var(--custom-primary) / <alpha-value>)',
          900: 'rgb(var(--custom-primary) / <alpha-value>)',
          950: 'rgb(var(--custom-primary) / <alpha-value>)',
        },
      }
    }
  }

But apparently these colors do not work with nuxt/ui:

export default defineAppConfig({
  ui: {
    primary: 'custom',
  },
})

I've tried various approaches (using hex values instead of rgb, removing the alpha-value, and so on), but only hardcoded values work. Am I doing something wrong here?

Repo: https://github.com/ThiloHettmer/nuxt-ui-dynamic-primary Stackblitz: https://stackblitz.com/~/github.com/ThiloHettmer/nuxt-ui-dynamic-primary

[JatinBrainybuzz]

I have the same problem, I want to be able to change the variable from backend and nuxt UI should be able to change the primary color to whatever color variable I set in tailwind.config.js file similar to you. But it only taking hard color code, no variable are being taken. export default defineAppConfig({ ui: { primary: 'minimum', gray: 'cool' } }) but its not working. Also I might be new programmer and a little rude but the documentation is not actually good when it comes to use css variable to change the primary color. someone please mention a solution for it.

[justpeterpan]

Hey, if I understand correctly, you need to set the value for each color-shade in your Tailwind configuration individually. Based on your example repository, here’s how you can achieve it:

Index.vue:

<template>
  <div>
    <p class="text-primary">Nuxt UI Primary</p>
    <p class="text-custom-100/20">Custom Primary</p>
    <p class="text-custom-500">Custom Primary</p>
  </div>

</template>

<script setup lang="ts">
const primaryColor100 = '123 222 123'
const primaryColor500 = '255 255 0'

useHead({
  style: [
    {
      key: 'primary-color-override',
      innerHTML: `:root { 
        --custom-primary-100: ${primaryColor100};
        --custom-primary-500: ${primaryColor500};
      }`
    }
  ]
})
</script>

tailwind.config.ts

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: [
    './pages/**/*.vue'
  ],

  theme: {
    extend: {
      colors: {
        custom: {
          50: 'rgb(var(--custom-primary) / <alpha-value>)',
          100: 'rgb(var(--custom-primary-100) / <alpha-value>)',
          200: 'rgb(var(--custom-primary) / <alpha-value>)',
          300: 'rgb(var(--custom-primary) / <alpha-value>)',
          400: 'rgb(var(--custom-primary) / <alpha-value>)',
          500: 'rgb(var(--custom-primary-500) / <alpha-value>)',
          600: 'rgb(var(--custom-primary) / <alpha-value>)',
          700: 'rgb(var(--custom-primary) / <alpha-value>)',
          800: 'rgb(var(--custom-primary) / <alpha-value>)',
          900: 'rgb(var(--custom-primary) / <alpha-value>)',
          950: 'rgb(var(--custom-primary) / <alpha-value>)',
        },
      }
    }
  }
}

[ThiloHettmer]

Hi @justpeterpan,

thanks for the reply. I did try to set all color shades with different colors but it does not work either. As soon as I override the primary color shades with a css variable in the tailwind config primary is null.

This is the nuxt ui generated style tag:

<style id="nuxt-ui-colors">:root {
--color-primary-50: null;
--color-primary-100: null;
--color-primary-200: null;
--color-primary-300: null;
--color-primary-400: null;
--color-primary-500: null;
--color-primary-600: null;
--color-primary-700: null;
--color-primary-800: null;
--color-primary-900: null;
--color-primary-950: null;
--color-primary-DEFAULT: var(--color-primary-500);

--color-gray-50: 249 250 251;
--color-gray-100: 243 244 246;
--color-gray-200: 229 231 235;
--color-gray-300: 209 213 219;
--color-gray-400: 156 163 175;
--color-gray-500: 107 114 128;
--color-gray-600: 75 85 99;
--color-gray-700: 55 65 81;
--color-gray-800: 31 41 55;
--color-gray-900: 17 24 39;
--color-gray-950: 3 7 18;
}

.dark {
  --color-primary-DEFAULT: var(--color-primary-400);
}
</style>

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[ThiloHettmer]

Will this be possible with v3? I would love to use nuxt/ui.