diff --git a/src/render/components/PlanisphereView.vue b/src/render/components/PlanisphereView.vue
index f210e0e..3b0fe55 100644
--- a/src/render/components/PlanisphereView.vue
+++ b/src/render/components/PlanisphereView.vue
@@ -22,13 +22,17 @@ use([
 ]);
 
 const props = defineProps({
-  title: String
+  title: String,
+  color: String
 })
 
 const option = reactive({
   title: {
     text: props.title,
-    left: 'center'
+    left: 'center',
+    textStyle: {
+      color: 'white'
+    }
   },
   polar: {
     radius: '72%'
@@ -77,8 +81,8 @@ const option = reactive({
       formatter: '{@[2]}'
     },
     itemStyle: {
-      color: '#9ca3af'
-    }
+      color: props.color
+    },
   }, {
     nmea: 'in-positioning',
     coordinateSystem: 'polar',
@@ -89,8 +93,8 @@ const option = reactive({
       formatter: '{@[2]}'
     },
     itemStyle: {
-      color: '#e5323e'
-    }
+      color: props.color
+    },
   }]
 })
 
diff --git a/src/render/page/StateMonitorPage.vue b/src/render/page/StateMonitorPage.vue
index feee6bb..85548b4 100644
--- a/src/render/page/StateMonitorPage.vue
+++ b/src/render/page/StateMonitorPage.vue
@@ -4,16 +4,16 @@
 
     <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
       <div>
-        <PlanisphereView ref="BDPlanisphereView" title="北斗" />
+        <PlanisphereView ref="BDPlanisphereView" color="rgb(0,204,255)" title="北斗" />
       </div>
       <div>
-        <PlanisphereView ref="GPPlanisphereView" title="GPS" />
+        <PlanisphereView ref="GPPlanisphereView" color="rgb(255,255,0)" title="GPS" />
       </div>
       <div>
-        <PlanisphereView ref="GLPlanisphereView" title="格洛纳斯" />
+        <PlanisphereView ref="GLPlanisphereView" color="rgb(102,0,255)" title="格洛纳斯" />
       </div>
       <div>
-        <PlanisphereView ref="GAPlanisphereView" title="伽利略" />
+        <PlanisphereView ref="GAPlanisphereView" color="rgb(0,204,102)" title="伽利略" />
       </div>
     </div>
   </full-screen-container>