Open khaledOghli opened 1 month ago
--swal-bg: rgb(var(--un-preset-theme-colors-light-100));
is a valid syntax. Can you provide a minimal reproduction?
@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()],
});
Can you create a minimal reproduction by stackblitz. Using stackblitz
I can quickly locate the problem
@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 previewThe theme()
directive works without presetTheme
but not with it.
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.