diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
index b2002e23f8c4ac6c7b80a266ff3c88cd64478ce8..222209055f7b16466af33b2eefeb88aaec6a6c4b 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
@@ -46,9 +46,9 @@ export default function Tooltip({ legendColor, ...props }) {
{...props}
content={({ active, payload, label }) => {
return active && payload ? (
- <div className="bg-white text-sm rounded-md border shadow-lg">
+ <div className="bg-theme-bg-primary text-sm rounded-md border shadow-lg">
<div className="border-b py-2 px-4">
- <p className="text-elem text-gray-700 font-medium">{label}</p>
+ <p className="text-theme-bg-primary font-medium">{label}</p>
</div>
<div className="space-y-1 py-2 px-4">
{payload.map(({ value, name }, idx) => (
@@ -58,7 +58,7 @@ export default function Tooltip({ legendColor, ...props }) {
>
<div className="flex items-center space-x-2">
<span
- className="shrink-0 h-3 w-3 border-white rounded-md rounded-full border-2 shadow-md"
+ className="shrink-0 h-3 w-3 border-theme-bg-primary rounded-md rounded-full border-2 shadow-md"
style={{ backgroundColor: legendColor }}
/>
<p
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx
index 7d2266e7460ec4482b9d3a86f24e151c43660c8e..f47c5852af42c8ab1b04f6662cc29cb9345fcc46 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx
@@ -75,8 +75,10 @@ export function Chartable({ props, workspace }) {
switch (chartType) {
case "area":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
<AreaChart
className="h-[350px]"
data={data}
@@ -90,8 +92,10 @@ export function Chartable({ props, workspace }) {
);
case "bar":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
<BarChart
className="h-[350px]"
data={data}
@@ -107,8 +111,10 @@ export function Chartable({ props, workspace }) {
);
case "line":
return (
- <div className="bg-zinc-900 p-8 pb-12 rounded-xl text-white h-[500px] w-full">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 pb-12 rounded-xl text-white h-[500px] w-full light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
<LineChart
className="h-[400px]"
data={data}
@@ -122,8 +128,10 @@ export function Chartable({ props, workspace }) {
);
case "composed":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
{showLegend && (
<Legend
categories={[value]}
@@ -178,8 +186,10 @@ export function Chartable({ props, workspace }) {
);
case "scatter":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
{showLegend && (
<div className="flex justify-end">
<Legend
@@ -224,8 +234,10 @@ export function Chartable({ props, workspace }) {
);
case "pie":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
<DonutChart
data={data}
category={value}
@@ -248,8 +260,10 @@ export function Chartable({ props, workspace }) {
);
case "radar":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
{showLegend && (
<div className="flex justify-end">
<Legend
@@ -282,8 +296,10 @@ export function Chartable({ props, workspace }) {
);
case "radialbar":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
{showLegend && (
<div className="flex justify-end">
<Legend
@@ -317,8 +333,10 @@ export function Chartable({ props, workspace }) {
);
case "treemap":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
{showLegend && (
<div className="flex justify-end">
<Legend
@@ -343,8 +361,10 @@ export function Chartable({ props, workspace }) {
);
case "funnel":
return (
- <div className="bg-zinc-900 p-8 rounded-xl text-white">
- <h3 className="text-lg font-medium">{title}</h3>
+ <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+ <h3 className="text-lg text-theme-text-primary font-medium">
+ {title}
+ </h3>
{showLegend && (
<div className="flex justify-end">
<Legend
@@ -413,7 +433,7 @@ const customTooltip = (props) => {
const categoryPayload = payload?.[0];
if (!categoryPayload) return null;
return (
- <div className="w-56 bg-zinc-400 rounded-lg border p-2 text-white">
+ <div className="w-56 bg-theme-bg-primary rounded-lg border p-2 text-white">
<div className="flex flex-1 space-x-2.5">
<div
className={`flex w-1.5 flex-col bg-${categoryPayload?.color}-500 rounded`}
@@ -447,13 +467,13 @@ function DownloadGraph({ onClick }) {
<div className="p-1 rounded-full border-none">
{loading ? (
<CircleNotch
- className="text-white/50 w-5 h-5 animate-spin"
+ className="text-theme-text-primary w-5 h-5 animate-spin"
aria-label="Downloading image..."
/>
) : (
<DownloadSimple
weight="bold"
- className="text-white/50 w-5 h-5 hover:text-white"
+ className="text-theme-text-primary w-5 h-5 hover:text-theme-text-primary"
onClick={handleClick}
aria-label="Download graph image"
/>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 539b5866582af97f734f612b6e8643eab014a68e..4a20843d503cbbb14010b2eed237a9ce6f274c9d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -836,6 +836,10 @@ does not extend the close button beyond the viewport. */
fill: #fff;
}
+[data-theme="light"] .recharts-text > * {
+ fill: #000;
+}
+
.recharts-legend-wrapper {
margin-bottom: 10px;
}