dynamic css

2024-07-18 01:16:03 +08:00 · 2024-07-18 01:16:03 +08:00 · c6e1872253
parent 545cceb38a
commit c6e1872253
12 changed files with 522 additions and 17 deletions
--- a/globals.d.ts
+++ b/globals.d.ts
@ -0,0 +1 @@
+declare const tailwind: any;
--- a/src/components/Theme/ThemePrivider.tsx
+++ b/src/components/Theme/ThemePrivider.tsx
@ -1,7 +1,34 @@
 import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createTheme, reverseColor } from "../../utils/theme";
+import { getColorAsync } from "../../data/colors";

 type ThemeSection = "dark" | "light" | "system";

+let themeLightId: string | null = null;
+let themeDarkId: string | null = null;
+
+getColorAsync().then((color) => {
+  themeLightId = createTheme(
+    "theme-color-light",
+    color
+  )
+  const rev = reverseColor(color)
+  themeDarkId = createTheme(
+    "theme-color-dark",
+    rev
+  )
+})
+
+// 在退出的时候删除这两个主题
+window.addEventListener("beforeunload", () => {
+  if (themeLightId) {
+    document.getElementById(themeLightId)?.remove();
+  }
+  if (themeDarkId) {
+    document.getElementById(themeDarkId)?.remove();
+  }
+});
+
 const themeMap: Record<ThemeSection, string> = {
  dark: "theme-color-dark",
  light: "theme-color-light",
--- a/src/data/colors.ts
+++ b/src/data/colors.ts
@ -0,0 +1,94 @@
+const themeColorLight = {
+  "primary-7": "rgb(14, 66, 210)",
+  "primary-6": "rgb(22, 93, 255)",
+  "primary-5": "rgb(64, 128, 255)",
+  "primary-4": "rgb(106, 161, 255)",
+  "primary-3": "rgb(148, 191, 255)",
+  "primary-2": "rgb(190, 218, 255)",
+  "primary-1": "rgb(232, 243, 255)",
+  "success-7": "rgb(0, 154, 41)",
+  "success-6": "rgb(0, 180, 42)",
+  "success-5": "rgb(35, 195, 67)",
+  "success-4": "rgb(76, 210, 99)",
+  "success-3": "rgb(123, 225, 136)",
+  "success-2": "rgb(175, 240, 181)",
+  "success-1": "rgb(232, 255, 234)",
+  "warning-7": "rgb(210, 95, 0)",
+  "warning-6": "rgb(255, 125, 0)",
+  "warning-5": "rgb(255, 154, 46)",
+  "warning-4": "rgb(255, 182, 93)",
+  "warning-3": "rgb(255, 207, 139)",
+  "warning-2": "rgb(255, 228, 186)",
+  "warning-1": "rgb(255, 247, 232)",
+  "danger-7": "rgb(203, 39, 45)",
+  "danger-6": "rgb(245, 63, 63)",
+  "danger-5": "rgb(247, 101, 96)",
+  "danger-4": "rgb(249, 137, 129)",
+  "danger-3": "rgb(251, 172, 163)",
+  "danger-2": "rgb(253, 205, 197)",
+  "danger-1": "rgb(255, 236, 232)",
+  "link-7": "rgb(14, 66, 210)",
+  "link-6": "rgb(22, 93, 255)",
+  "link-5": "rgb(64, 128, 255)",
+  "link-4": "rgb(106, 161, 255)",
+  "link-3": "rgb(148, 191, 255)",
+  "link-2": "rgb(190, 218, 255)",
+  "link-1": "rgb(232, 243, 255)",
+  "data-1": "rgb(64, 128, 255)",
+  "data-2": "rgb(190, 218, 255)",
+  "data-3": "rgb(85, 197, 253)",
+  "data-4": "rgb(156, 220, 252)",
+  "data-5": "rgb(255, 125, 0)",
+  "data-6": "rgb(255, 207, 139)",
+  "data-7": "rgb(76, 210, 99)",
+  "data-8": "rgb(175, 240, 181)",
+  "data-9": "rgb(168, 113, 227)",
+  "data-10": "rgb(221, 190, 246)",
+  "data-11": "rgb(247, 186, 30)",
+  "data-12": "rgb(250, 220, 109)",
+  "data-13": "rgb(159, 219, 29)",
+  "data-14": "rgb(201, 233, 104)",
+  "data-15": "rgb(249, 121, 183)",
+  "data-16": "rgb(251, 157, 199)",
+  "data-17": "rgb(20, 201, 201)",
+  "data-18": "rgb(137, 233, 224)",
+  "data-19": "rgb(232, 101, 223)",
+  "data-20": "rgb(247, 186, 239)",
+  "color-border-1": "rgb(242, 243, 245)",
+  "color-border-2": "rgb(229, 230, 235)",
+  "color-border-3": "rgb(201, 205, 212)",
+  "color-border-4": "rgb(134, 144, 156)",
+  "color-border-5": "rgb(78, 89, 105)",
+  "color-border-6": "rgb(29, 33, 41)",
+  "color-border-7": "rgb(14, 16, 20)",
+  "color-fill-1": "rgb(247, 248, 250)",
+  "color-fill-2": "rgb(242, 243, 245)",
+  "color-fill-3": "rgb(229, 230, 235)",
+  "color-fill-4": "rgb(201, 205, 212)",
+  "color-fill-5": "rgb(134, 144, 156)",
+  "color-fill-6": "rgb(78, 89, 105)",
+  "color-fill-7": "rgb(29, 33, 41)",
+  "color-text-1": "rgb(29, 33, 41)",
+  "color-text-2": "rgb(78, 89, 105)",
+  "color-text-3": "rgb(134, 144, 156)",
+  "color-text-4": "rgb(201, 205, 212)",
+  "color-text-5": "rgb(229, 230, 235)",
+  "color-text-6": "rgb(242, 243, 245)",
+  "color-text-7": "rgb(247, 248, 250)",
+  "color-bg-1": "rgb(255, 255, 255)",
+  "color-bg-2": "rgb(255, 255, 255)",
+  "color-bg-3": "rgb(255, 255, 255)",
+  "color-bg-4": "rgb(255, 255, 255)",
+  "color-bg-5": "rgb(255, 255, 255)",
+  "color-bg-6": "rgb(255, 255, 255)",
+  "color-bg-7": "rgb(255, 255, 255)",
+  "color-bg-white": "rgb(255, 255, 255)",
+  "color-bg-black": "rgb(0, 0, 0)",
+  "color-shadow": "rgba(255, 255, 255, 0.5)",
+};
+
+export const getColorAsync = async () => {
+  return await Promise.resolve({
+    ...themeColorLight,
+  });
+};
--- a/src/data/functionBlocks.ts
+++ b/src/data/functionBlocks.ts
@ -36,10 +36,10 @@ const Banner = (props: {
  return (
    <div className="bg-primary-1 py-16 px-8">
      <div className="max-w-7xl mx-auto text-center">
-        <h1 className="text-primary text-5xl md:text-7xl font-extrabold mb-4">
+        <h1 className="text-primary-7 text-5xl md:text-7xl font-extrabold mb-4">
          {props.title}
        </h1>
-        <p className="text-primary text-xl md:text-2xl mb-8">
+        <p className="text-text-1 text-xl md:text-2xl mb-8">
          {props.subTitle}
        </p>
        <button
--- a/src/index.scss
+++ b/src/index.scss
@ -3,7 +3,7 @@
@tailwind utilities;

 /* 导入主题 */
-@import "./theme/index.css";
+// @import "./theme/index.css";

 :root {
 /* .font-size-global { */
--- a/src/main.tsx
+++ b/src/main.tsx
@ -3,6 +3,18 @@ import ReactDOM from "react-dom/client";
 import "./index.scss";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
+import { setTailwindExtendProps } from "./utils/theme";
+
+// 当tailwindcss加载完毕，开始修改config
+document.addEventListener("DOMContentLoaded", () => {
+  setTailwindExtendProps({
+    primary: "var(--primary)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    danger: "var(--danger)",
+    link: "var(--link)",
+  });
+});

 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
--- a/src/pages/creation/index.tsx
+++ b/src/pages/creation/index.tsx
@ -28,9 +28,13 @@ export const Creation = () => {
    };
  }, []);

-  const [componentName, setComponentName] = React.useState(functionBlockList[0].cpnName);
+  const [componentName, setComponentName] = React.useState(
+    functionBlockList[0].cpnName
+  );

-  const [componentsProps, setComponentsProps] = React.useState(functionBlockList[0].props);
+  const [componentsProps, setComponentsProps] = React.useState(
+    functionBlockList[0].props
+  );

  const [newPropKey, setNewPropKey] = React.useState("");

--- a/src/theme/dark/index.css
+++ b/src/theme/dark/index.css
@ -1,4 +1,4 @@
-.theme-color-dark {
+/* .theme-color-dark {
  --primary-7: rgb(104, 159, 255);
  --primary-6: rgb(60, 126, 255);
  --primary-5: rgb(48, 111, 255);
@ -58,20 +58,31 @@
  --color-border-2: rgb(72, 72, 73);
  --color-border-3: rgb(95, 95, 96);
  --color-border-4: rgb(146, 146, 147);
+  --color-border-5: rgb(197, 197, 197);
+  --color-border-6: rgb(229, 229, 229);
+  --color-border-7: rgb(242, 242, 242);
  --color-fill-1: rgb(23, 23, 26);
  --color-fill-2: rgb(46, 46, 48);
  --color-fill-3: rgb(72, 72, 73);
  --color-fill-4: rgb(95, 95, 96);
+  --color-fill-5: rgb(146, 146, 147);
+  --color-fill-6: rgb(197, 197, 197);
+  --color-fill-7: rgb(229, 229, 229);
  --color-text-1: rgb(246, 246, 246);
  --color-text-2: rgb(197, 197, 197);
  --color-text-3: rgb(146, 146, 147);
  --color-text-4: rgb(95, 95, 96);
+  --color-text-5: rgb(72, 72, 73);
+  --color-text-6: rgb(46, 46, 48);
+  --color-text-7: rgb(23, 23, 26);
  --color-bg-1: rgb(23, 23, 26);
  --color-bg-2: rgb(35, 35, 36);
  --color-bg-3: rgb(42, 42, 43);
  --color-bg-4: rgb(49, 49, 50);
  --color-bg-5: rgb(55, 55, 57);
+  --color-bg-6: rgb(60, 60, 62);
+  --color-bg-7: rgb(66, 66, 68);
  --color-bg-white: rgb(246, 246, 246);
-  /* 半透明背景阴影颜色 */
+  --color-bg-black: rgb(0, 0, 0);
  --color-shadow: rgba(0, 0, 0, 0.5);
-}
+} */
--- a/src/theme/light/index.css
+++ b/src/theme/light/index.css
@ -1,4 +1,4 @@
-.theme-color-light {
+/* .theme-color-light {
  --primary-7: rgb(14, 66, 210);
  --primary-6: rgb(22, 93, 255);
  --primary-5: rgb(64, 128, 255);
@ -58,20 +58,31 @@
  --color-border-2: rgb(229, 230, 235);
  --color-border-3: rgb(201, 205, 212);
  --color-border-4: rgb(134, 144, 156);
+  --color-border-5: rgb(78, 89, 105);
+  --color-border-6: rgb(29, 33, 41);
+  --color-border-7: rgb(14, 16, 20);
  --color-fill-1: rgb(247, 248, 250);
  --color-fill-2: rgb(242, 243, 245);
  --color-fill-3: rgb(229, 230, 235);
-  --color-fill-4: rgb(201, 205, 212) .;
+  --color-fill-4: rgb(201, 205, 212);
+  --color-fill-5: rgb(134, 144, 156);
+  --color-fill-6: rgb(78, 89, 105);
+  --color-fill-7: rgb(29, 33, 41);
  --color-text-1: rgb(29, 33, 41);
  --color-text-2: rgb(78, 89, 105);
  --color-text-3: rgb(134, 144, 156);
  --color-text-4: rgb(201, 205, 212);
+  --color-text-5: rgb(229, 230, 235);
+  --color-text-6: rgb(242, 243, 245);
+  --color-text-7: rgb(247, 248, 250);
  --color-bg-1: rgb(255, 255, 255);
  --color-bg-2: rgb(255, 255, 255);
  --color-bg-3: rgb(255, 255, 255);
  --color-bg-4: rgb(255, 255, 255);
  --color-bg-5: rgb(255, 255, 255);
+  --color-bg-6: rgb(255, 255, 255);
+  --color-bg-7: rgb(255, 255, 255);
  --color-bg-white: rgb(255, 255, 255);
-  /* 半透明背景阴影颜色 */
+  --color-bg-black: rgb(0, 0, 0);
  --color-shadow: rgba(255, 255, 255, 0.5);
-}
+} */
--- a/src/utils/theme/index.ts
+++ b/src/utils/theme/index.ts
@ -0,0 +1,324 @@
+import {
+  RGBString,
+  RGBValue,
+  ThemeVariables,
+  UpdateThemeColor,
+} from "../../../typings";
+
+export function updateThemeColor({
+  themeClass,
+  colorVariable,
+  newColor,
+}: UpdateThemeColor): void {
+  // 找到应用了指定主题类名的元素
+  const themeElement = document.querySelector(`.${themeClass}`);
+
+  if (themeElement) {
+    // 修改该元素的 CSS 变量
+    (themeElement as HTMLElement).style.setProperty(colorVariable, newColor);
+  } else {
+    console.error(`Theme class ${themeClass} not found.`);
+  }
+}
+
+export function createTheme(
+  themeClass: string,
+  themeVariables: ThemeVariables
+): string {
+  // 用16位随机字符串生成id
+  const id = Math.random().toString(16).slice(2);
+  // 创建一个新的样式表
+  const styleSheet = document.createElement("style");
+  styleSheet.type = "text/css";
+  //设置id属性，方便后面进行删除等操作
+  styleSheet.id = id;
+
+  // 构建 CSS 规则
+  let cssRules = `.${themeClass} {`;
+  for (const variable in themeVariables) {
+    if (themeVariables.hasOwnProperty(variable)) {
+      cssRules += `--${variable}: ${themeVariables[variable]};`;
+    }
+  }
+  cssRules += "}";
+
+  // 插入 CSS 规则到样式表中
+  if ((styleSheet as any).styleSheet) {
+    // 这是针对 IE 的处理
+    (styleSheet as any).styleSheet.cssText = cssRules;
+  } else {
+    styleSheet.appendChild(document.createTextNode(cssRules));
+  }
+
+  // 将样式表添加到文档头部
+  document.head.appendChild(styleSheet);
+
+  return id;
+}
+
+export function parseRGB(rgb: RGBString): RGBValue {
+  const result = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(rgb);
+  if (!result) {
+    throw new Error("Invalid RGB format");
+  }
+  return {
+    r: parseInt(result[1]),
+    g: parseInt(result[2]),
+    b: parseInt(result[3]),
+  };
+}
+
+export function toRGBString({ r, g, b }: RGBValue): string {
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function darken(rgb: RGBString, percent: number): string {
+  const { r, g, b } = parseRGB(rgb);
+  const factor = 1 - percent / 100;
+  return toRGBString({
+    r: clamp(Math.round(r * factor), 0, 255),
+    g: clamp(Math.round(g * factor), 0, 255),
+    b: clamp(Math.round(b * factor), 0, 255),
+  });
+}
+
+export function lighten(rgb: RGBString, percent: number): string {
+  const { r, g, b } = parseRGB(rgb);
+  const factor = 1 + percent / 100;
+  return toRGBString({
+    r: clamp(Math.round(r * factor), 0, 255),
+    g: clamp(Math.round(g * factor), 0, 255),
+    b: clamp(Math.round(b * factor), 0, 255),
+  });
+}
+
+function parseRGBString(rgbString: RGBString): RGBValue {
+  const matches = rgbString.match(/(\d+)/g);
+  if (!matches) {
+    throw new Error("Invalid RGB string");
+  }
+  return {
+    r: parseInt(matches[0], 10),
+    g: parseInt(matches[1], 10),
+    b: parseInt(matches[2], 10),
+  };
+}
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0,
+    s = 0,
+    l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return [h, s, l];
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  let r: number, g: number, b: number;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number): number => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 3) return q;
+      if (t < 1 / 2) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+function getAdjustedBrightness(
+  rgb: RGBValue,
+  low: number,
+  top: number
+): RGBValue {
+  let [h, s, l] = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  l = low + (1 - l) * (top - low); // Adjust brightness within the given range
+  const [r, g, b] = hslToRgb(h, s, l);
+  return { r, g, b };
+}
+
+function formatRGBString(rgb: RGBValue): RGBString {
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+}
+
+export function getAdjustedColor(
+  rgbString: RGBString,
+  low: number = 0.1,
+  top: number = 0.9
+): RGBString {
+  const rgb = parseRGBString(rgbString);
+  const adjustedRgb = getAdjustedBrightness(rgb, low, top);
+  return formatRGBString(adjustedRgb);
+}
+
+// 把一个对象中是rgb颜色的值全部反转
+
+export function reverseColor(
+  obj: Record<string, string>
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const value = obj[key];
+      if (value.startsWith("rgb")) {
+        try {
+          result[key] = getAdjustedColor(value as RGBString);
+        } catch (error) {
+          console.log(`对象中存在属性${key}的值为${result[key]}无法转换`);
+        }
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
+
+export const setTailwindExtendProps = (colors: Record<string, string>) => {
+  if (!tailwind) {
+    throw new Error("Tailwind CSS not found");
+  }
+  console.log(tailwind);
+
+  tailwind.config = {
+    theme: {
+      extend: {
+        colors: {
+          primary: {
+            1: "var(--primary-1)",
+            2: "var(--primary-2)",
+            3: "var(--primary-3)",
+            4: "var(--primary-4)",
+            5: "var(--primary-5)",
+            6: "var(--primary-6)",
+            7: "var(--primary-7)",
+          },
+          success: {
+            1: "var(--success-1)",
+            2: "var(--success-2)",
+            3: "var(--success-3)",
+            4: "var(--success-4)",
+            5: "var(--success-5)",
+            6: "var(--success-6)",
+            7: "var(--success-7)",
+          },
+          warning: {
+            1: "var(--warning-1)",
+            2: "var(--warning-2)",
+            3: "var(--warning-3)",
+            4: "var(--warning-4)",
+            5: "var(--warning-5)",
+            6: "var(--warning-6)",
+            7: "var(--warning-7)",
+          },
+          danger: {
+            1: "var(--danger-1)",
+            2: "var(--danger-2)",
+            3: "var(--danger-3)",
+            4: "var(--danger-4)",
+            5: "var(--danger-5)",
+            6: "var(--danger-6)",
+            7: "var(--danger-7)",
+          },
+          link: {
+            1: "var(--link-1)",
+            2: "var(--link-2)",
+            3: "var(--link-3)",
+            4: "var(--link-4)",
+            5: "var(--link-5)",
+            6: "var(--link-6)",
+            7: "var(--link-7)",
+          },
+          background: {
+            1: "var(--color-bg-1)",
+            2: "var(--color-bg-2)",
+            3: "var(--color-bg-3)",
+            4: "var(--color-bg-4)",
+            5: "var(--color-bg-5)",
+            white: "var(--color-bg-white)",
+          },
+          text: {
+            1: "var(--color-text-1)",
+            2: "var(--color-text-2)",
+            3: "var(--color-text-3)",
+            4: "var(--color-text-4)",
+          },
+          border: {
+            1: "var(--color-border-1)",
+            2: "var(--color-border-2)",
+            3: "var(--color-border-3)",
+            4: "var(--color-border-4)",
+          },
+          fill: {
+            1: "var(--color-fill-1)",
+            2: "var(--color-fill-2)",
+            3: "var(--color-fill-3)",
+            4: "var(--color-fill-4)",
+          },
+          data: {
+            1: "var(--data-1)",
+            2: "var(--data-2)",
+            3: "var(--data-3)",
+            4: "var(--data-4)",
+            5: "var(--data-5)",
+            6: "var(--data-6)",
+            7: "var(--data-7)",
+            8: "var(--data-8)",
+            9: "var(--data-9)",
+            10: "var(--data-10)",
+            11: "var(--data-11)",
+            12: "var(--data-12)",
+            13: "var(--data-13)",
+            14: "var(--data-14)",
+            15: "var(--data-15)",
+            16: "var(--data-16)",
+            17: "var(--data-17)",
+            18: "var(--data-18)",
+            19: "var(--data-19)",
+            20: "var(--data-20)",
+          },
+          shadow: "--color-shadow",
+        },
+      },
+    },
+  };
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -19,5 +19,5 @@
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
-  "include": ["src"],
+  "include": ["src","globals.d.ts"],
 }
--- a/typings/index.ts
+++ b/typings/index.ts
@ -1,5 +1,26 @@
 export type CodeBlock = {
-    code: string;
-    cpnName: string;
-    props: Record<string, unknown>;
-}
+  code: string;
+  cpnName: string;
+  props: Record<string, unknown>;
+};
+
+export type UpdateThemeColor = {
+  themeClass: string;
+  colorVariable: string;
+  newColor: string;
+};
+
+export type NumStringWithBlank = ` ${number}` | `${number}` | `${number} `;
+
+export type RGBString =
+  `rgb(${NumStringWithBlank},${NumStringWithBlank},${NumStringWithBlank})`;
+
+export type RGBValue = {
+  r: number;
+  g: number;
+  b: number;
+};
+
+export type ThemeVariables = {
+  [key: string]: string;
+};