Pr@dev@dan (#1668)

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

frontend/src/styles/element-dark.scss

@@ -309,4 +309,7 @@ html.dark {
     .el-dropdown-menu__item.is-disabled {
         color: var(--panel-button-disabled);
     }
+    .el-date-editor .el-range-separator {
+        color: var(--panel-button-disabled);
+    }
 }

frontend/src/views/host/monitor/monitor/index.vue

@@ -424,6 +424,10 @@ function initCharts(chartName: string, xDatas: any, yDatas: any, yTitle: string,
         },
         legend: {
             data: chartName === 'loadNetworkChart' && [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
+            textStyle: {
+                color: '#646A73',
+            },
+            icon: 'circle',
         },
         grid: {
             left: getSideWidth(chartName == 'loadNetworkChart'),
@@ -481,6 +485,10 @@ function initLoadCharts(item: Monitor.MonitorData) {
                 '15 ' + i18n.global.t('commons.units.minute'),
                 i18n.global.t('monitor.resourceUsage'),
             ],
+            textStyle: {
+                color: '#646A73',
+            },
+            icon: 'circle',
         },
         grid: { left: '7%', right: '7%', bottom: '20%' },
         xAxis: {
@@ -638,6 +646,10 @@ function initIOCharts(item: Monitor.MonitorData) {
                 i18n.global.t('monitor.readWriteCount'),
                 i18n.global.t('monitor.readWriteTime'),
             ],
+            textStyle: {
+                color: '#646A73',
+            },
+            icon: 'circle',
         },
         grid: { left: getSideWidth(true), right: getSideWidth(true), bottom: '20%' },
         xAxis: {