feat: 初步适配主题颜色效果

src/pages/Home.tsx

@@ -133,7 +133,7 @@ const HomePage: React.FC<HomePageProps> = ({ viewMode, searchTerm }) => {
 
       <main className="flex-1 px-4 pb-4">
         {enableGroupedBar && (
-          <div className="flex overflow-auto whitespace-nowrap overflow-x-auto items-center min-w-[300px] text-secondary-foreground box-border border border-border space-x-4 px-4 rounded-lg mb-4 purcarte-blur">
+          <div className="flex overflow-auto whitespace-nowrap overflow-x-auto items-center min-w-[300px] text-secondary-foreground box-border border border-(--accent-a4) space-x-4 px-4 rounded-lg mb-4 purcarte-blur">
             <span>分组</span>
             {groups.map((group: string) => (
               <Button
@@ -155,7 +155,7 @@ const HomePage: React.FC<HomePageProps> = ({ viewMode, searchTerm }) => {
               className={
                 viewMode === "grid"
                   ? ""
-                  : "space-y-2 overflow-auto box-border border border-border purcarte-blur rounded-lg p-2"
+                  : "space-y-2 overflow-auto box-border border border-(--accent-a4) purcarte-blur rounded-lg p-2"
               }>
               <div
                 className={

src/pages/instance/PingChart.tsx

@@ -394,7 +394,8 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
                 <Brush
                   dataKey="time"
                   height={30}
-                  stroke="#8884d8"
+                  stroke="var(--accent-track)"
+                  fill="transparent"
                   alwaysShowText
                   tickFormatter={(time) => {
                     const date = new Date(time);

src/pages/instance/index.tsx

@@ -108,11 +108,11 @@ const InstancePage = () => {
 
   return (
     <div className="w-[90%] max-w-screen-2xl mx-auto flex-1 flex flex-col pb-15 p-4 space-y-4">
-      <div className="flex items-center justify-between purcarte-blur box-border border border-border rounded-lg p-4 mb-4 text-secondary-foreground">
+      <div className="flex items-center justify-between purcarte-blur box-border border border-(--accent-a4) rounded-lg p-4 mb-4 text-secondary-foreground">
         <div className="flex items-center gap-2 min-w-0">
           <Button
             className="flex-shrink-0"
-            variant="ghost"
+            variant="outline"
             size="icon"
             onClick={() => navigate(-1)}>
             <ArrowLeft />
@@ -130,7 +130,7 @@ const InstancePage = () => {
       {enableInstanceDetail && <Instance node={node as NodeWithStatus} />}
 
       <div className="flex flex-col items-center w-full space-y-4">
-        <div className="purcarte-blur box-border border border-border rounded-lg p-2">
+        <div className="purcarte-blur box-border border border-(--accent-a4) rounded-lg p-2">
           <div className="flex justify-center space-x-2">
             <Button
               variant={chartType === "load" ? "secondary" : "ghost"}
@@ -149,7 +149,7 @@ const InstancePage = () => {
           </div>
         </div>
         <div
-          className={`purcarte-blur box-border border border-border justify-center rounded-lg p-2 ${
+          className={`purcarte-blur box-border border border-(--accent-a4) justify-center rounded-lg p-2 ${
             isMobile ? "w-full" : ""
           }`}>
           {chartType === "load" ? (