From a627f8d61938dee58e62f6caa34625d7c5c655a4 Mon Sep 17 00:00:00 2001 From: sheepzh Date: Tue, 25 Mar 2025 10:59:55 +0800 Subject: [PATCH] fix: popup snapshot has no background color in dark mode (#433) --- src/pages/popup/components/Percentage/chart.ts | 5 +++-- src/pages/util/style.ts | 7 ++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/pages/popup/components/Percentage/chart.ts b/src/pages/popup/components/Percentage/chart.ts index eef2d7a4e..c17a42a83 100644 --- a/src/pages/popup/components/Percentage/chart.ts +++ b/src/pages/popup/components/Percentage/chart.ts @@ -1,5 +1,5 @@ import { createTab } from "@api/chrome/tab" -import { getPrimaryTextColor, getSecondaryTextColor } from "@pages/util/style" +import { getCssVariable, getPrimaryTextColor, getSecondaryTextColor } from "@pages/util/style" import { calJumpUrl } from "@popup/common" import { t } from "@popup/locale" import { sum } from "@util/array" @@ -103,7 +103,8 @@ export function generateToolboxOption(): ToolboxComponentOption { // file name name: 'Time_Tracker_Percentage', excludeComponents: ['toolbox'], - pixelRatio: 1 + pixelRatio: 7, + backgroundColor: getCssVariable('--el-card-bg-color', '.el-card'), }, } } diff --git a/src/pages/util/style.ts b/src/pages/util/style.ts index 62ad8a6a8..a533c8a74 100644 --- a/src/pages/util/style.ts +++ b/src/pages/util/style.ts @@ -24,12 +24,13 @@ export const getStyle = ( } } -export function getCssVariable(varName: string, ele?: HTMLElement): string | undefined { - const realEle = ele || document.documentElement +export function getCssVariable(varName: string, eleOrSelector?: HTMLElement | string): string | undefined { + const ele = typeof eleOrSelector === 'string' ? document.querySelector(eleOrSelector) : eleOrSelector + const realEle = ele ?? document.documentElement if (!realEle) { return undefined } - return getComputedStyle(ele || document.documentElement).getPropertyValue(varName) + return getComputedStyle(realEle).getPropertyValue(varName) } export function getPrimaryTextColor(): string | undefined {