fankes/komari-theme-purcarte
2
0
Fork 0
mirror of https://github.com/fankes/komari-theme-purcarte.git synced 2025-10-19 03:49:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 优化亮暗模式下文本可读性

Browse Source
This commit is contained in:
Montia37
2025-09-08 18:18:44 +08:00
parent 4d4da8d3b8
commit b1405376a0
5 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ui/chart.tsx
View File

@@ -54,10 +54,7 @@ function ChartContainer({
<div <div
data-slot="chart" data-slot="chart"
data-chart={chartId} data-chart={chartId}
className={cn( className={cn("flex justify-center text-xs", className)}
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
className
)}
style={{ position: "relative", overflow: "hidden" }} style={{ position: "relative", overflow: "hidden" }}
{...props}> {...props}>
<ChartStyle id={chartId} config={config} /> <ChartStyle id={chartId} config={config} />

8
src/components/ui/tips.tsx
View File

@@ -14,7 +14,7 @@ interface TipsProps {
const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({ const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({
size = "16", size = "16",
color = "gray", color = "var(--theme-text-muted-color)",
trigger, trigger,
children, children,
side = "bottom", side = "bottom",
@@ -68,13 +68,15 @@ const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({
sideOffset={5} sideOffset={5}
onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined} onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined}
onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined} onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined}
className="purcarte-blur theme-card-style z-50 text-muted-foreground" className="purcarte-blur theme-card-style z-50"
style={{ style={{
minWidth: isMobile ? "12rem" : "16rem", minWidth: isMobile ? "12rem" : "16rem",
maxWidth: isMobile ? "80vw" : "16rem", maxWidth: isMobile ? "80vw" : "16rem",
backgroundColor: "var(--card)", backgroundColor: "var(--card)",
}}> }}>
<div className="relative text-sm">{children}</div> <div className="relative text-sm text-secondary-foreground">
{children}
</div>
</Popover.Content> </Popover.Content>
</Popover.Root> </Popover.Root>
)} )}

8
src/index.css
View File

@@ -130,8 +130,12 @@
} }
@layer utilities { @layer utilities {
.dark .radix-themes {
--theme-text-muted-color: rgb(from var(--accent-4) r g b / 0.8);
}
.radix-themes { .radix-themes {
--theme-text-muted-color: rgb(from var(--accent-4) r g b / 0.7); --theme-text-muted-color: rgb(from var(--accent-12) r g b / 0.8);
} }
.theme-text-shadow { .theme-text-shadow {
@@ -143,7 +147,7 @@
} }
.theme-text-muted { .theme-text-muted {
@apply text-(--theme-text-muted-color) text-shadow-sm text-shadow-(color:--accent-foreground)/20; @apply text-(--theme-text-muted-color);
} }
} }

12
src/pages/instance/LoadCharts.tsx
View File

@@ -260,15 +260,19 @@ const LoadCharts = memo(({ node, hours, liveData }: LoadChartsProps) => {
data={config.data} data={config.data}
margin={chartMargin} margin={chartMargin}
{...chartProps}> {...chartProps}>
<CartesianGrid strokeDasharray="2 4" vertical={false} /> <CartesianGrid
strokeDasharray="2 4"
stroke="var(--muted-foreground)"
vertical={false}
/>
<XAxis <XAxis
dataKey="time" dataKey="time"
tickLine={false} tickLine={false}
axisLine={{ axisLine={{
stroke: "var(--theme-text-muted-color) !important", stroke: "var(--theme-text-muted-color)",
}} }}
tick={{ tick={{
fill: "var(--theme-text-muted-color) !important", fill: "var(--theme-text-muted-color)",
}} }}
tickFormatter={timeFormatter} tickFormatter={timeFormatter}
interval={0} interval={0}
@@ -283,7 +287,7 @@ const LoadCharts = memo(({ node, hours, liveData }: LoadChartsProps) => {
type="number" type="number"
tick={{ tick={{
dx: -8, dx: -8,
fill: "var(--theme-text-muted-color) !important", fill: "var(--theme-text-muted-color)",
}} }}
width={200} width={200}
mirror={true} mirror={true}

6
src/pages/instance/PingChart.tsx
View File

@@ -335,7 +335,11 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
{pingHistory?.tasks && pingHistory.tasks.length > 0 ? ( {pingHistory?.tasks && pingHistory.tasks.length > 0 ? (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<LineChart data={chartData} margin={chartMargin}> <LineChart data={chartData} margin={chartMargin}>
<CartesianGrid strokeDasharray="2 4" vertical={false} /> <CartesianGrid
strokeDasharray="2 4"
stroke="var(--muted-foreground)"
vertical={false}
/>
<XAxis <XAxis
type="number" type="number"
dataKey="time" dataKey="time"