feature: support configure css variables generation location

packages/ui/src/composables/useColors.ts

@@ -162,6 +162,8 @@ export const useColors = () => {
     }
   }
 
+  const styleTag = computed(() => globalConfig.value.colors?.styleTag ?? false)
+
   return {
     colors,
     currentPresetName,
@@ -182,6 +184,7 @@ export const useColors = () => {
     colorsToCSSVariable,
     colorToRgba,
     getStateMaskGradientBackground,
+    styleTag,
   }
 }
 

packages/ui/src/services/color/plugin/create-color-config-plugin.ts

@@ -1,16 +1,22 @@
 import { PartialGlobalConfig } from './../../global-config/types'
 import { ColorVariables } from './../types'
-import { App, watch } from 'vue'
+import { App, watch, computed } from 'vue'
 import { isServer } from '../../../utils/ssr'
 import { cssVariableName } from '../utils'
 import { useColors } from '../../../composables'
+import { generateUniqueId } from '../../../utils/uuid'
+import { addOrUpdateStyleElement } from '../../../utils/dom'
 
 export const setCSSVariable = (name: string, value: string, root: HTMLElement) => {
   root.style.setProperty(cssVariableName(name), value)
 }
 
+export const generateCSSVariable = (key: string, value: string) => {
+  return `${cssVariableName(key)}: ${value};\n`
+}
+
 export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig) => {
-  const { colors: configColors, getTextColor, getColor, currentPresetName, applyPreset } = useColors()
+  const { colors: configColors, getTextColor, getColor, currentPresetName, applyPreset, styleTag: newStyleTag } = useColors()
 
   /** Renders CSS variables string. Use this in SSR mode */
   const renderCSSVariables = (colors: ColorVariables | undefined = configColors) => {
@@ -23,19 +29,38 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
     return `${renderedColors};${renderedOnColors}`
   }
 
+  const uniqueId = computed(generateUniqueId)
+
   const updateColors = (newValue: ColorVariables | undefined) => {
     if (!newValue) { return }
     if (isServer()) { return }
 
-    const root = document.documentElement
-
     const colorNames = Object.keys(newValue)
-    colorNames.forEach((key) => {
-      setCSSVariable(key, newValue[key], root)
-    })
-    colorNames.forEach((key) => {
-      setCSSVariable(`on-${key}`, getColor(getTextColor(newValue[key])), root)
-    })
+
+    if (!newStyleTag.value) {
+      const root = document.documentElement
+      colorNames.forEach((key) => {
+        setCSSVariable(key, newValue[key], root)
+      })
+      colorNames.forEach((key) => {
+        setCSSVariable(`on-${key}`, getColor(getTextColor(newValue[key])), root)
+      })
+    } else {
+      const generateColorVariables = () => {
+        let result = ':root {\n'
+        colorNames.forEach((key) => {
+          result += generateCSSVariable(key, newValue[key])
+        })
+        colorNames.forEach((key) => {
+          result += generateCSSVariable(`on-${key}`, getColor(getTextColor(newValue[key])))
+        })
+        result += '}\n'
+
+        return result
+      }
+
+      addOrUpdateStyleElement(`va-color-variables-${uniqueId.value}`, generateColorVariables)
+    }
   }
 
   watch(configColors, (newValue) => {

packages/ui/src/services/color/types.ts

@@ -27,6 +27,7 @@ export type EssentialVariables = {
 export type ColorVariables = { [colorName: string]: CssColor } & EssentialVariables
 
 export type ColorConfig = {
+  styleTag?: boolean,
   variables: ColorVariables,
   threshold: number,
   presets: {