feat: 增加设置页面和支持自定义强调色

postcss.config.js

@@ -1,6 +1,41 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { colord } = require('colord')
+const colors = require('tailwindcss/colors')
+
+const replaceBrandColorWithCssVar = () => {
+  const blues = Object.entries(colors.blue).map(([key, value]) => {
+    const c = colord(value).toRgb()
+    return {
+      key,
+      rgb: `${c.r} ${c.g} ${c.b}`,
+    }
+  })
+  return {
+    postcssPlugin: 'replaceBrandColorWithCssVar',
+    Declaration(decl) {
+      let value = decl.value
+      blues.forEach(blue => {
+        value = value.replace(
+          `rgb(${blue.rgb}`,
+          `rgb(var(--brand-color-${blue.key})`
+        )
+      })
+      // if (decl.value !== value) {
+      //   console.log({
+      //     before: decl.value,
+      //     after: value,
+      //   })
+      // }
+      decl.value = value
+    },
+  }
+}
+replaceBrandColorWithCssVar.postcss = true
+
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    replaceBrandColorWithCssVar,
+  ],
 }