diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 9f7e83e67..184e2807a 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -434,3 +434,6 @@ input, textarea {
     font-weight: 600;
   }
 }
+.is-disabled{
+    color: $--color-text-disabled !important;
+}
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 438992d19..7d70ffce7 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -297,7 +297,7 @@
           outline: none;
           i {
             font-size: 14px;
-            color: $--color-text-disabled;
+            color: $--color-text-label;
           }
         }
         .table-operation-item.table-operation-item--disable:hover {
diff --git a/nezha-fronted/src/assets/css/components/common/project/topology.scss b/nezha-fronted/src/assets/css/components/common/project/topology.scss
index 6dd629fea..b3197b5c0 100644
--- a/nezha-fronted/src/assets/css/components/common/project/topology.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss
@@ -496,6 +496,7 @@
 }
 .from-project{
   padding: 0px 10px 0 0 !important;
+  background: $--background-color-empty !important;
   .nz-table-list{
     padding: 0;
     box-sizing: content-box;
diff --git a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
index 56431c242..aa553924f 100644
--- a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
@@ -124,6 +124,7 @@
     width: 75%;
     border-left: 1px solid $--border-color-light;
     word-break: break-all;
+    color: $--color-text-secondary;
   }
   .mib-browser-detail-row:not(:last-of-type) {
     border-bottom: 1px solid $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
index a0f267a6b..5eac08db9 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
@@ -114,7 +114,7 @@
   top: 0px;
 }
 .topology-box{
-  width: 100%;
+  width: calc(100% - 2px);
   height: 242px;
   border: 1px solid $--border-color-light;
   border-radius: 2px;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 31c4d2011..bfcb7238e 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -182,7 +182,7 @@ $--overview-project-icon-color: $--time-picker-hover-color;
 $--overview-module-icon-color: $--time-picker-hover-color;
 $--overview-endpoint-icon-color: $--time-picker-hover-color;
 $--overview-alert-icon-color: $--time-picker-hover-color;
-$--overview-disabled-icon-color: $--color-text-disabled;
+$--overview-disabled-icon-color: $--color-text-label;
 $--overview-icon-color: $--color-text-primary;
 // background
 $--overview-module-icon-background-color: #5F80D5;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index e5a1e8949..ad2407b6e 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -40,7 +40,7 @@ $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
 // 禁用字色
-$--color-text-disabled: #FFFFFF;
+$--color-text-disabled: #c0c4cc;
 // 标签内白色
 $--color-text-label: #FFFFFF;
 
@@ -159,7 +159,7 @@ $--picker-page-background-color: $--background-color-empty;
 $--picker-page-border-color: $--select-page-border-color;
 $--picker-page-btn-color: $--color-primary;
 $--picker-page-btn-border-color: $--color-primary;
-$--picker-page-btn-background-color: $--color-text-disabled;
+$--picker-page-btn-background-color: $--color-text-label;
 
 // icon 字色
 $--nz-icon-color: $--color-primary; //icon
@@ -167,7 +167,7 @@ $--span-nz-icon-border-color: $--asset-label-btn-border-color;
 
 // value
 $--value-background-color: #5C6BC0;
-$--value-color: $--color-text-disabled;
+$--value-color: $--color-text-label;
 $--value-input-background-color: $--value-color;
 
 // time picker
@@ -218,26 +218,26 @@ $--export-span-background-color: $--background-color-base;
 $--switch-background-color: #dcdfe6;
 
 /* project */
-$--project-input-background-color: $--color-text-disabled;
+$--project-input-background-color: $--color-text-label;
 
 /* alert rule */
 $--alert-rule-background-color: #f5f5f5;
 $--alert-rule-color: $--overview-icon-color;
 
 /* webSSH */
-$--web-ssh-background-color: $--color-text-disabled;
+$--web-ssh-background-color: $--color-text-label;
 $--web-ssh-border-bottom-color: transparent;
 
 /* 图表弹框 */
 $--chart-background-color: #dde4ed;
-$--chart-border-color: $--color-text-disabled;
+$--chart-border-color: $--color-text-label;
 
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
 
 /* 14.popover */
-$--popover-background-color: $--color-text-disabled;
+$--popover-background-color: $--color-text-label;
 
 /* 15.侧滑 */
 $--right-box-shadow: -3px 0 8px -3px #ccc;
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index edc82116e..f7e408179 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -5,7 +5,7 @@
 <template>
   <div class="project-box list-page" v-my-loading="topologyLoading">
     <div class="main-list" style="overflow: hidden">
-      <div class="main-container" :class="fromOverView?'from-overview':'from-project'" style="background: #fff">
+      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
         <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
           <!--工具栏-->
           <span v-if="!isPreview" class="project-topology-tool">
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 421b9be96..a1794235e 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -183,7 +183,7 @@
             </el-form-item>
           </el-row>
           <transition name="el-zoom-in-top">
-            <div v-show="selection.pen.data.tooltipShow" class="tooltip-box sub-box">
+            <div v-show="selection.pen.data.tooltipShow" class="sub-box">
               <!--title-->
               <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
                 <el-input v-model="selection.pen.data.chartTitle" class="input" size="small"></el-input>
@@ -468,7 +468,7 @@
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" stroke="black" stroke-width="1">
+                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
                             <path
                               :d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
                               :stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
@@ -480,7 +480,7 @@
                     <el-option v-for="(item,index) in penDash" :value="index" :key="index">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':'black'" stroke-width="1">
+                          <g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
                             <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                           </g>
                         </svg>
@@ -498,7 +498,7 @@
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" stroke="black" stroke-width="1">
+                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
                             <path
                               :d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
                             >
@@ -510,7 +510,7 @@
                     <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                          <g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
                             <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                           </g>
                         </svg>
@@ -528,7 +528,7 @@
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
                              :key="index" v-if="selection.pen.fromArrow==item.name">
                             <path :d="item.d"></path>
                             <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
@@ -542,7 +542,7 @@
                     <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':'black'"
+                          <g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.strokeColor"
                              stroke-width="1">
                             <path :d="item.d"></path>
                             <polygon
@@ -577,7 +577,7 @@
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
+                          <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
                              :key="index" v-if="selection.pen.toArrow==item.name">
                             <path :d="item.d"></path>
                             <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
@@ -591,7 +591,7 @@
                     <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':'black'"
+                          <g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.strokeColor"
                              stroke-width="1">
                             <path :d="item.d"></path>
                             <polygon
@@ -1112,7 +1112,9 @@ const rz = {
 export default {
   // pen.type 0为node 1位line
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
+      theme: theme,
       expressions: [],
       chartTypeList: [
         {
@@ -1264,26 +1266,28 @@ export default {
         }
       ],
       penDash: [
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '5,5' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10' }
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '5,5', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
       ],
       penLineType: [
-        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
-        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
-        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' }
+        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
         // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
       ],
       penLineFromTOArrow: [
-        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
+        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
         {
           d: 'M5 14 l85 0',
           points: '5 14,20 9,20 19',
           fill: '#000000',
           stroke: '',
           'stroke-width': '',
-          name: 'triangleSolid'
+          name: 'triangleSolid',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
+
         },
         {
           d: 'M5 14 l85 0',
@@ -1291,7 +1295,8 @@ export default {
           fill: '#ffffff',
           stroke: '#000000',
           'stroke-width': '1',
-          name: 'triangle'
+          name: 'triangle',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
         },
         {
           d: 'M5 14 l85 0',
@@ -1301,7 +1306,8 @@ export default {
           cx: '10',
           cy: '14',
           r: '5',
-          name: 'circleSolid'
+          name: 'circleSolid',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
         },
         {
           d: 'M5 14 l85 0',
@@ -1311,7 +1317,8 @@ export default {
           cx: '10',
           cy: '14',
           r: '5',
-          name: 'circle'
+          name: 'circle',
+          strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
         }
       ],
       lineAnimateOptions: [
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 0e2eb15eb..3dbf52dda 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -62,7 +62,7 @@
                <div slot="prefix">
                 <div class="icon-item" style="width: 100%;padding: 0">
                   <svg>
-                    <g fill="none" stroke="black" stroke-width="1">
+                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
                       <path
                         :d="penLineType.find((item,i)=>item.id==lineName).d"
                       >
@@ -75,7 +75,7 @@
                 <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
                   <div class="icon-item" style="position: relative;width: 100%;padding: 0">
                     <svg>
-                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
                     <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                     </g>
                     </svg>
@@ -379,7 +379,9 @@ const canvasOptions = {
 export default {
   name: 'topologyL5',
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
+      theme,
       title: this.$t('overall.uploadCustomPicture'),
       objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
       chartDataInfo: {},
@@ -477,10 +479,10 @@ export default {
       chartData: {},
       chartGetData: [],
       penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
-        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
       ],
       lineName: 'curve',
       cachesIndex: 0,
diff --git a/nezha-fronted/src/components/common/table/asset/assetTable.vue b/nezha-fronted/src/components/common/table/asset/assetTable.vue
index d095e405f..7d6a7d62f 100644
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -138,7 +138,7 @@
             </div>
             <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
               <el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-              <el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('config.system.terminal.terminal')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>