unocss transformer

transformer-theme-color.ts

import { colors } from 'unocss/preset-mini'

const excludedColor = ['inherit', 'current', 'transparent', 'lightblue', 'lightBlue', 'warmgray', 'warmGray', 'truegray', 'trueGray', 'coolgray', 'coolGray', 'bluegray', 'blueGray']
const colorsRegexp = new RegExp(`theme\:(\\w+-)(${Object.keys(colors).filter(c => !excludedColor.includes(c)).join('|')})[-]?(\w+)?`, 'g')

const colorValueList = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950']

function transformerThemeColor(): SourceCodeTransformer {
  return {
    name: "transformer-theme-color",
    enforce: "pre",
    transform(code) {
      code.replaceAll(
        colorsRegexp,
        (str, $1: string, $2: string, $3: string | undefined) => {
          if (['white', 'black'].includes($2)) {
            return `${$1}${$2} dark:${$1}${$2 === 'black' ? 'white' : 'black'}`
          }
          if (!!$3 && $3 !== '500') {
            const reverseColorValue = colorValueList.at(-colorValueList.indexOf($3) - 1)
            return `${$1}${$2}-${$3} dark:${$1}${$2}-${reverseColorValue}`
          }
          return str
        }
      )
    }
  }
}