-
-
-
-
setNewPropKey(e.target.value)}
- className="border border-text-1 rounded p-2 flex-grow"
- />
-
+
+
+
Props 编辑器
+
+
+
+
+ setNewPropKey(e.target.value)}
+ className="border border-text-1 rounded p-2 flex-grow"
+ />
+
+
-
-
{
- const updateNestedProp = (
- obj: Record,
- path: string[],
- value: unknown
- ) => {
- if (path.length === 1) {
- obj[path[0]] = value;
- } else {
- if (!obj[path[0]]) {
- obj[path[0]] = {};
+ {
+ const updateNestedProp = (
+ obj: Record,
+ path: string[],
+ value: unknown
+ ) => {
+ if (path.length === 1) {
+ obj[path[0]] = value;
+ } else {
+ if (!obj[path[0]]) {
+ obj[path[0]] = {};
+ }
+ updateNestedProp(obj[path[0]], path.slice(1), value);
}
- updateNestedProp(obj[path[0]], path.slice(1), value);
- }
- };
- const updatedProps = { ...componentsProps };
- updateNestedProp(
- updatedProps,
- (opts as any).namespace,
- opts.value
- );
- setComponentsProps(updatedProps);
- return true;
- }}
- />
+ };
+ const updatedProps = { ...componentsProps };
+ updateNestedProp(
+ updatedProps,
+ (opts as any).namespace,
+ opts.value
+ );
+ setComponentsProps(updatedProps);
+ return true;
+ }}
+ />
+
+
diff --git a/src/utils/theme/index.ts b/src/utils/theme/index.ts
index 8445f29..bd87862 100644
--- a/src/utils/theme/index.ts
+++ b/src/utils/theme/index.ts
@@ -1,9 +1,12 @@
import {
+ ColorSchema,
RGBString,
RGBValue,
+ ThemeSection,
ThemeVariables,
UpdateThemeColor,
} from "../../../typings";
+import { themeColorSchema } from "../../data/colors";
export function updateThemeColor({
themeClass,
@@ -217,108 +220,180 @@ export const setTailwindExtendProps = (colors: Record
) => {
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",
+ // 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",
+ // TODO: 这里使用传入的颜色
+ ...colors,
},
},
},
};
};
+
+const themeMap = {
+ dark: "theme-color-dark",
+ light: "theme-color-light",
+ system: "",
+} as const;
+
+export const createLightTheme = (themeVariables: ThemeVariables) => {
+ return createTheme(themeMap.light, themeVariables);
+};
+
+export const createDarkTheme = (themeVariables: ThemeVariables) => {
+ return createTheme(themeMap.dark, themeVariables);
+};
+
+export const getColorAsync = async () => {
+ if (!themeColorSchema.onDark) {
+ themeColorSchema.onDark = reverseColor(themeColorSchema.onLight);
+ }
+
+ return await Promise.resolve({
+ onLight: themeColorSchema.onLight,
+ onDark: themeColorSchema.onDark,
+ });
+};
+
+let themeLightId: string | null = null;
+let themeDarkId: string | null = null;
+
+getColorAsync().then((color) => {
+ themeLightId = createLightTheme(color.onLight);
+ themeDarkId = createDarkTheme(color.onDark!);
+});
+
+// 在退出的时候删除这两个主题，防止重复加载
+window.addEventListener("unload", () => {
+ setTimeout(() => {
+ if (themeLightId) {
+ document.getElementById(themeLightId)?.remove();
+ }
+ if (themeDarkId) {
+ document.getElementById(themeDarkId)?.remove();
+ }
+ }, 0);
+});
+
+export const changeThemeSchema = (schema: ColorSchema) => {
+ // 通过id删除原有的主题，然后重新生成
+ if (themeLightId) {
+ document.getElementById(themeLightId)?.remove();
+ }
+ if (themeDarkId) {
+ document.getElementById(themeDarkId)?.remove();
+ }
+ themeLightId = createTheme(themeMap.light, schema.onLight);
+ themeDarkId = createTheme(themeMap.dark, schema.onDark!);
+};
+
+export const overrideColor = (
+ theme: ThemeSection,
+ color: Record
+) => {
+ const themeElement = document.querySelector(`.${themeMap[theme]}`);
+ if (themeElement) {
+ for (const key in color) {
+ if (color.hasOwnProperty(key)) {
+ const value = color[key];
+ (themeElement as HTMLElement).style.setProperty(`--${key}`, value);
+ }
+ }
+ }
+};
diff --git a/typings/index.ts b/typings/index.ts
index 953c73f..fe71aa9 100644
--- a/typings/index.ts
+++ b/typings/index.ts
@@ -24,3 +24,10 @@ export type RGBValue = {
export type ThemeVariables = {
[key: string]: string;
};
+
+export type ColorSchema = {
+ onLight: Record,
+ onDark?: Record,
+}
+
+export type ThemeSection = "dark" | "light" | "system";
\ No newline at end of file