Using Custom Variable with unocss theme colors

[khaledOghli]

i face one situation :

in css file :root { --swal-bg: theme('colors.light.100'); }
runtime result is :
--swal-bg: rgb(var(--un-preset-theme-colors-light-100));

but it's not worked.

[Dunqing]

--swal-bg: rgb(var(--un-preset-theme-colors-light-100)); is a valid syntax. Can you provide a minimal reproduction?

[khaledOghli]

@Dunqing I will try to create a minimal reproduction.

The issue occurs when trying to use a color from CSS that hasn't been previously used in classes:

css
--swal-bg: theme('colors.light.500');

Since colors.light.500 is not used in any classes, the color is not generated. However, when the same color is used in classes, it works correctly.

my uno.config.ts file

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';
import { presetScrollbar } from 'unocss-preset-scrollbar';
import presetWind from '@unocss/preset-wind';
import type { Theme } from 'unocss/preset-uno';
import presetTheme from 'unocss-preset-theme';

export default defineConfig({
  theme: {
    colors: {
      light: {
        default: '#ffffff',
        '50': '#ffffff',
        '100': '#efefef',
        '200': '#dcdcdc',
        '300': '#bdbdbd',
        '400': '#989898',
        '500': '#7c7c7c',
        '600': '#656565',
        '700': '#525252',
        '800': '#464646',
        '900': '#3d3d3d',
        '950': '#292929',
        '1000': '#0e0e0e',
      },
    },
  },
  presets: [
    presetUno(),
    presetTheme<Theme>({
      theme: {
        dark: {
          colors: {
            light: {
              DEFAULT: '#0e0e23',
              '50': '#0e0e23',
              '100': '#32357d',
              '200': '#35359e',
              '300': '#413fc3',
              '400': '#4d4ede',
              '500': '#6974eb',
              '600': '#8697f3',
              '700': '#a9bcf8',
              '800': '#c9d6fc',
              '900': '#e1eafe',
              '950': '#eff3fe',
            },
          },
        },
      },
    }),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
    presetTypography(),
    presetScrollbar({
      // config
    }),
    presetWind(),
  ],

  transformers: [transformerDirectives(), transformerVariantGroup()],
});

[Dunqing]

Can you create a minimal reproduction by stackblitz. Using stackblitz I can quickly locate the problem

[TheJiahao]

@Dunqing

I encountered the same issue with Astro and UnoCSS. Minimal reproduction in stackblitz, https://stackblitz.com/edit/withastro-astro-kyyfdc?file=uno.config.ts.

Commands:

• pnpm run build to build to ./dist
• pnpm run start to build and preview

The theme() directive works without presetTheme but not with it.