From f23c691d69ddfc9744dcb97c09e658eb0d08e74f Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sat, 20 Dec 2025 04:16:15 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=B8=83=E5=B1=80=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useTradingView.ts | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/composables/useTradingView.ts b/src/composables/useTradingView.ts
index 9cb58c7..7f11135 100644
--- a/src/composables/useTradingView.ts
+++ b/src/composables/useTradingView.ts
@@ -1,5 +1,6 @@
 import type { Awaitable } from "@vueuse/core";
-import type { ChartOptions, DeepPartial, IChartApi, ISeriesApi, OhlcData, SeriesType } from "lightweight-charts";
+import type { ChartOptions, DeepPartial, IChartApi, ISeriesApi, LayoutOptions, OhlcData, SeriesType } from "lightweight-charts";
+import type { ThemeMode } from "./useTheme";
 import { AreaSeries, BarSeries, BaselineSeries, CandlestickSeries, ColorType, createChart, HistogramSeries, LineSeries } from "lightweight-charts";
 import { mergeWith } from "lodash-es";
 
@@ -12,13 +13,23 @@ export type WeightChartOptions = DeepPartial<ChartOptions>;
 export type TradingViewData = (() => Awaitable<TData[]>) | MaybeRefOrGetter<TData[]>;
 
 export interface TradingViewOptions<T = Series> {
-  theme?: "light" | "dark";
+  theme?: ThemeMode;
   type?: T;
   data?: TradingViewData;
   weightChartOptions?: MaybeRefOrGetter<WeightChartOptions>;
   autosize?: boolean;
 }
 
+const lightThemeLayout: Partial<LayoutOptions> = {
+  textColor: "black",
+  background: { type: ColorType.Solid, color: "#fff" },
+};
+
+const darkThemeLayout: Partial<LayoutOptions> = {
+  textColor: "white",
+  background: { type: ColorType.Solid, color: "#000" },
+};
+
 const initializeOptions: Required<TradingViewOptions> = {
   theme: "dark",
   type: "Candlestick",
@@ -26,10 +37,6 @@ const initializeOptions: Required<TradingViewOptions> = {
   weightChartOptions: {
     width: 400,
     height: 300,
-    layout: {
-      textColor: "black",
-      background: { type: ColorType.Solid, color: "#fff" },
-    },
   },
   autosize: true,
 };
@@ -53,6 +60,8 @@ function getChartSeriesDefinition(type: Series) {
   }
 }
 
+const { isDark } = useTheme();
+
 export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, options?: TradingViewOptions) {
   const opts: Required<TradingViewOptions> = mergeWith(initializeOptions, options);
   const chart = ref<IChartApi | null>(null);
@@ -94,6 +103,13 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
     }
   }
 
+  function changeTheme(theme: ThemeMode) {
+    if (!chart.value)
+      return;
+    const layout = theme === "dark" ? darkThemeLayout : lightThemeLayout;
+    chart.value.applyOptions({ layout });
+  }
+
   tryOnMounted(() => {
     const el = unrefElement(target);
     if (!el)
@@ -101,6 +117,9 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
     chartEl.value = el;
     chart.value = createChart(el, toValue(opts.weightChartOptions));
     series.value = chart.value.addSeries(chartSeriesDefinition);
+    watch(isDark, (dark) => {
+      changeTheme(dark ? "dark" : "light");
+    }, { immediate: true });
     setData(opts.data);
     fitContent();