diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 00000000..51ac6404
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/index.html b/public/index.html
index ace7544a..bad1e2ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,7 +18,7 @@ limitations under the License. -->
-
+
<%= htmlWebpackPlugin.options.title %>
diff --git a/src/assets/icons/logo-sw.svg b/src/assets/icons/logo-sw.svg
index 72aee3ff..4a0cb5c5 100644
--- a/src/assets/icons/logo-sw.svg
+++ b/src/assets/icons/logo-sw.svg
@@ -1,32 +1,22 @@
-
-
-
diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg
index 65f0531d..8870e00d 100644
--- a/src/assets/icons/logo.svg
+++ b/src/assets/icons/logo.svg
@@ -1,29 +1,15 @@
-
-
-
diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue
index 7b83536c..cf79aa44 100644
--- a/src/components/FullVue.vue
+++ b/src/components/FullVue.vue
@@ -168,7 +168,7 @@ export default defineComponent({
.full-scroll-to.active {
opacity: 1;
padding: 6px;
- background: #252a2f;
+ background: #9876AA;
}
}
}
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index 16b505b2..93bce63e 100644
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -106,7 +106,7 @@ export function useECharts(
nextTick(() => {
useTimeoutFn(() => {
if (!chartInstance) {
- initCharts(getDarkMode.value as "default");
+ initCharts("default");
if (!chartInstance) return;
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ce0421bb..18a9c0e8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -17,3 +17,6 @@
@import "./grid.scss";
@import "./lib.scss";
@import "./reset.scss";
+//@import "./spp-light.scss";
+//@import "./spp-dark.scss";
+@import "./jetbrains-dark.scss";
diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss
new file mode 100644
index 00000000..8029bb1c
--- /dev/null
+++ b/src/styles/jetbrains-dark.scss
@@ -0,0 +1,390 @@
+:root {
+ --spp-white: #A9B7C6;
+ --spp-light-grey: #A9B7C6;
+ --spp-grey: #A9B7C6;
+ --spp-light-blue: #629755;
+ --spp-blue: #313335;
+ --spp-red: #e1483b;
+ --spp-green: #2b2b2b;
+ --spp-dark-green: #313335;
+ --spp-darkest-green: #313335;
+ --spp-other-green: #2b2b2b;
+ --nice-black: #2b2b2b;
+ --widget-background: #2b2b2b;
+ --border-color: #1a1a1a;
+ --dashboard-tool-background: #1a1a1a;
+}
+
+.el-table {
+ --el-table-tr-bg-color: var(--nice-black);
+ --el-table-header-bg-color: var(--spp-dark-green);
+ --el-table-row-hover-bg-color: var(--spp-other-green);
+ --el-table-border-color: var(--spp-darkest-green);
+ --el-table-bg-color: var(--nice-black);
+}
+
+:root {
+ --el-disabled-bg-color: var(--nice-black);
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+ background: var(--spp-other-green);
+}
+
+.el-input__inner {
+ --el-input-bg-color: var(--spp-other-green);
+ //--el-input-border: red !important;
+}
+
+.el-select {
+ --el-select-border-color-hover: var(--spp-light-blue);
+ --el-select-input-focus-border-color: var(--spp-red);
+ --el-input-placeholder-color: red;
+ --el-text-color-placeholder: var(--spp-light-grey);
+ --el-input-border: red;
+ --el-border-color-base: red;
+ --el-input-bg-color: red;
+}
+
+.el-scrollbar {
+ --el-scrollbar-bg-color: var(--spp-light-grey);
+}
+
+.el-select__popper.el-popper[role="tooltip"] {
+ background: var(--spp-other-green);
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background: var(--spp-other-green);
+}
+
+.el-select__popper.el-popper[role="tooltip"] {
+ border: 1px solid var(--spp-blue);
+}
+
+.el-popper.is-light {
+ background: var(--nice-black);
+}
+
+.micro-topo-chart .operations-list {
+ background: var(--spp-other-green) !important;
+ color: white !important;
+}
+
+.el-input {
+ --el-input-border: 1px solid var(--spp-blue);
+ --el-input-text-color: var(--spp-white);
+}
+
+.el-select-dropdown__item.selected {
+ color: var(--spp-white);
+}
+
+.el-select__popper.el-popper[role="tooltip"] .el-popper__arrow::before {
+ border: 1px solid var(--spp-blue);
+}
+
+.el-popper.is-light .el-popper__arrow::before {
+ background: var(--spp-other-green);
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background: var(--spp-dark-green);
+}
+
+.settings .label {
+ color: var(--spp-white);
+}
+
+.settings i, span {
+ color: var(--spp-light-grey);
+}
+
+.utc-input {
+ color: var(--spp-white) !important;
+}
+
+.settings input {
+ background: var(--spp-dark-green) !important;
+ border: 1px solid var(--spp-blue) !important;
+ color: var(--spp-white);
+}
+
+.auto-time {
+ color: var(--spp-white);
+}
+
+.el-switch__core {
+ --el-switch-off-color: var(--spp-dark-green);
+ --el-switch-on-color: var(--spp-red);
+}
+
+.alarm-tool {
+ background-color: var(--nice-black) !important;
+ border-bottom: 1px solid var(--spp-blue) !important;
+}
+
+.el-dialog {
+ background-color: var(--nice-black);
+}
+
+.el-dialog__title {
+ color: var(--spp-white);
+}
+
+.el-pagination button:disabled {
+ background-color: var(--spp-dark-green);
+}
+
+.timeline-table-i {
+ border-left: 4px solid var(--spp-other-green) !important;
+}
+
+.timeline-table-i::before {
+ background-color: var(--spp-other-green) !important;
+}
+.timeline-table-i::after {
+ background-color: var(--spp-grey) !important;
+}
+
+.settings .label {
+ color: var(--spp-white) !important;
+}
+
+.event-tool {
+ background-color: var(--nice-black) !important;
+}
+
+.el-button {
+ background-color: var(--spp-green);
+ border-color: var(--spp-other-green);
+}
+
+.el-button--danger {
+ background-color: var(--spp-red);
+}
+
+.el-button:focus, .el-button:hover {
+ background-color: var(--spp-darkest-green);
+ border-color: black
+}
+
+.table {
+ background-color: var(--nice-black) !important;
+}
+
+.trace-td.selected {
+ background-color: var(--spp-other-green) !important;
+}
+
+.trace-td.trace-error.selected {
+ background-color: var(--nice-black) !important;
+}
+
+.el-pager li.active {
+ background-color: var(--spp-other-green);
+}
+
+.el-pager li {
+ background-color: var(--spp-green);
+}
+
+.el-pager li.active {
+ color: var(--spp-white);
+}
+
+.el-pager + button.btn-next[type="button"] {
+ background-color: var(--spp-grey);
+}
+
+.toggle-selection {
+ background-color: var(--nice-black) !important;
+}
+
+.side-bar {
+ background-color: var(--spp-other-green) !important;
+}
+
+.bar-select {
+ background: black !important;
+
+ .selected {
+ color: var(--spp-red) !important;
+ }
+}
+
+.nav-bar {
+ background-color: var(--spp-darkest-green) !important;
+ border-bottom: 1px solid var(--spp-darkest-green) !important;
+ color: var(--spp-white) !important;
+}
+
+.nav-bar.dark {
+ background-color: var(--spp-darkest-green) !important;
+ border-bottom: 1px solid var(--spp-green) !important;
+}
+
+.tools {
+ &:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.chart-card {
+ color: var(--spp-white) !important;
+}
+
+.profile-item.level0 {
+ &:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.name {
+ color: var(--spp-red) !important;
+}
+
+//span.active {
+// background-color: var(--spp-red) !important;
+//}
+
+.topology {
+ background-color: var(--spp-darkest-green) !important;
+}
+
+.widget {
+ background: var(--widget-background) !important;
+}
+
+.header {
+ border-bottom: 1px solid var(--border-color) !important;
+}
+
+.body {
+ color: var(--spp-blue) !important;
+ background: var(--spp-darkest-green) !important;
+}
+
+.tabs {
+ input {
+ background: inherit !important;
+ }
+
+ input.tab-name {
+ color: var(--spp-white) !important;;
+ }
+
+ span.active {
+ border-bottom: 1px solid var(--spp-red) !important;
+ color: var(--spp-red) !important;
+ }
+}
+
+.tab-header {
+ border-bottom: 1px solid var(--border-color) !important;
+}
+
+.vue-grid-layout {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item.active {
+ border: 1px solid var(--spp-red) !important;
+}
+
+.vue-grid-layout {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+ background: var(--spp-dark-green) !important;
+}
+
+.vue-grid-item.active {
+ border: 1px solid var(--spp-red) !important;
+}
+
+.dashboard-tool {
+ background: var(--dashboard-tool-background) !important;
+ border-bottom: 1px solid var(--border-color) !important;
+}
+
+.micro-topo-chart {
+ .operations-list {
+ span:hover {
+ color: var(--spp-red) !important;
+ }
+ }
+ .switch-icon {
+ background-color: #182d3499 !important;
+ }
+}
+
+.d3-tip {
+ background: var(--spp-green) !important;
+}
+
+.d3-tip:after {
+ color: var(--spp-green) !important;
+}
+
+.sankey {
+ background-color: var(--spp-darkest-green) !important;
+}
+
+.switch-icon {
+ background-color: #182d3499 !important;
+}
+
+.operations-list {
+ span:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.link {
+ color: var(--spp-red) !important;
+}
+
+.dark-dialog {
+ background-color: var(--spp-darkest-green) !important;
+ color: #ddd !important;
+
+ .el-loading-mask {
+ background-color: red !important;
+ color: red !important;
+ }
+}
+
+.el-loading-mask {
+ background-color: unset !important;
+ color: unset !important;
+}
+
+.app-main {
+ background: var(--spp-darkest-green) !important;
+}
+
+.opt {
+ &.select-disabled {
+ color: var(--spp-red) !important;
+ }
+}
+
+blockquote {
+ border-left: 4px solid var(--spp-light-grey) !important;
+}
+
+a {
+ color: var(--spp-white) !important;
+}
+
+.timeline-table-i {
+ &::before {
+ background-color: #448dfe !important;
+ }
+}
diff --git a/src/styles/spp-dark.scss b/src/styles/spp-dark.scss
new file mode 100644
index 00000000..f5db25d5
--- /dev/null
+++ b/src/styles/spp-dark.scss
@@ -0,0 +1,387 @@
+:root {
+ --spp-white: #e9ebfc;
+ --spp-light-grey: #cacaca;
+ --spp-grey: #a7aebb;
+ --spp-light-blue: #747990;
+ --spp-blue: #3d444f;
+ --spp-red: #e1483b;
+ --spp-green: #182d34;
+ --spp-dark-green: #172127;
+ --spp-darkest-green: #0d1216;
+ --spp-other-green: #24343d;
+ --nice-black: #1a1a1a;
+}
+
+.el-table {
+ --el-table-tr-bg-color: var(--nice-black);
+ --el-table-header-bg-color: var(--spp-dark-green);
+ --el-table-row-hover-bg-color: var(--spp-other-green);
+ --el-table-border-color: var(--spp-darkest-green);
+ --el-table-bg-color: var(--nice-black);
+}
+
+:root {
+ --el-disabled-bg-color: var(--nice-black);
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+ background: var(--spp-other-green);
+}
+
+.el-input__inner {
+ --el-input-bg-color: var(--spp-other-green);
+ //--el-input-border: red !important;
+}
+
+.el-select {
+ --el-select-border-color-hover: var(--spp-light-blue);
+ --el-select-input-focus-border-color: var(--spp-red);
+ --el-input-placeholder-color: red;
+ --el-text-color-placeholder: var(--spp-light-grey);
+ --el-input-border: red;
+ --el-border-color-base: red;
+ --el-input-bg-color: red;
+}
+
+.el-scrollbar {
+ --el-scrollbar-bg-color: var(--spp-light-grey);
+}
+
+.el-select__popper.el-popper[role="tooltip"] {
+ background: var(--spp-other-green);
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background: var(--spp-other-green);
+}
+
+.el-select__popper.el-popper[role="tooltip"] {
+ border: 1px solid var(--spp-blue);
+}
+
+.el-popper.is-light {
+ background: var(--nice-black);
+}
+
+.micro-topo-chart .operations-list {
+ background: var(--spp-other-green) !important;
+ color: white !important;
+}
+
+.el-input {
+ --el-input-border: 1px solid var(--spp-blue);
+ --el-input-text-color: var(--spp-white);
+}
+
+.el-select-dropdown__item.selected {
+ color: var(--spp-white);
+}
+
+.el-select__popper.el-popper[role="tooltip"] .el-popper__arrow::before {
+ border: 1px solid var(--spp-blue);
+}
+
+.el-popper.is-light .el-popper__arrow::before {
+ background: var(--spp-other-green);
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background: var(--spp-dark-green);
+}
+
+.settings .label {
+ color: var(--spp-white);
+}
+
+.settings i, span {
+ color: var(--spp-light-grey);
+}
+
+.utc-input {
+ color: var(--spp-white) !important;
+}
+
+.settings input {
+ background: var(--spp-dark-green) !important;
+ border: 1px solid var(--spp-blue) !important;
+ color: var(--spp-white);
+}
+
+.auto-time {
+ color: var(--spp-white);
+}
+
+.el-switch__core {
+ --el-switch-off-color: var(--spp-dark-green);
+ --el-switch-on-color: var(--spp-red);
+}
+
+.alarm-tool {
+ background-color: var(--nice-black) !important;
+ border-bottom: 1px solid var(--spp-blue) !important;
+}
+
+.el-dialog {
+ background-color: var(--nice-black);
+}
+
+.el-dialog__title {
+ color: var(--spp-white);
+}
+
+.el-pagination button:disabled {
+ background-color: var(--spp-dark-green);
+}
+
+.timeline-table-i {
+ border-left: 4px solid var(--spp-other-green) !important;
+}
+
+.timeline-table-i::before {
+ background-color: var(--spp-other-green) !important;
+}
+.timeline-table-i::after {
+ background-color: var(--spp-grey) !important;
+}
+
+.settings .label {
+ color: var(--spp-white) !important;
+}
+
+.event-tool {
+ background-color: var(--nice-black) !important;
+}
+
+.el-button {
+ background-color: var(--spp-green);
+ border-color: var(--spp-other-green);
+}
+
+.el-button--danger {
+ background-color: var(--spp-red);
+}
+
+.el-button:focus, .el-button:hover {
+ background-color: var(--spp-darkest-green);
+ border-color: black
+}
+
+.table {
+ background-color: var(--nice-black) !important;
+}
+
+.trace-td.selected {
+ background-color: var(--spp-other-green) !important;
+}
+
+.trace-td.trace-error.selected {
+ background-color: var(--nice-black) !important;
+}
+
+.el-pager li.active {
+ background-color: var(--spp-other-green);
+}
+
+.el-pager li {
+ background-color: var(--spp-green);
+}
+
+.el-pager li.active {
+ color: var(--spp-white);
+}
+
+.el-pager + button.btn-next[type="button"] {
+ background-color: var(--spp-grey);
+}
+
+.toggle-selection {
+ background-color: var(--nice-black) !important;
+}
+
+.side-bar {
+ background-color: var(--spp-other-green) !important;
+}
+
+.bar-select {
+ background: black !important;
+
+ .selected {
+ color: var(--spp-red) !important;
+ }
+}
+
+.nav-bar {
+ background-color: var(--spp-darkest-green) !important;
+ border-bottom: 1px solid var(--spp-darkest-green) !important;
+ color: var(--spp-white) !important;
+}
+
+.nav-bar.dark {
+ background-color: var(--spp-darkest-green) !important;
+ border-bottom: 1px solid var(--spp-green) !important;
+}
+
+.tools {
+ &:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.chart-card {
+ color: var(--spp-white) !important;
+}
+
+.profile-item.level0 {
+ &:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.name {
+ color: var(--spp-red) !important;
+}
+
+//span.active {
+// background-color: var(--spp-red) !important;
+//}
+
+.topology {
+ background-color: var(--spp-darkest-green) !important;
+}
+
+.widget {
+ background: #010409 !important;
+}
+
+.header {
+ border-bottom: 1px solid #1c3139 !important;
+}
+
+.body {
+ color: var(--spp-blue) !important;
+ background: var(--spp-darkest-green) !important;
+}
+
+.tabs {
+ input {
+ background: inherit !important;
+ }
+
+ input.tab-name {
+ color: var(--spp-white) !important;;
+ }
+
+ span.active {
+ border-bottom: 1px solid var(--spp-red) !important;
+ color: var(--spp-red) !important;
+ }
+}
+
+.tab-header {
+ border-bottom: 1px solid #1c3139 !important;
+}
+
+.vue-grid-layout {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item.active {
+ border: 1px solid var(--spp-red) !important;
+}
+
+.vue-grid-layout {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+ background: var(--spp-dark-green) !important;
+}
+
+.vue-grid-item.active {
+ border: 1px solid var(--spp-red) !important;
+}
+
+.dashboard-tool {
+ background: #1a262d !important;
+ border-bottom: 1px solid #1c3139 !important;
+}
+
+.micro-topo-chart {
+ .operations-list {
+ span:hover {
+ color: var(--spp-red) !important;
+ }
+ }
+ .switch-icon {
+ background-color: #182d3499 !important;
+ }
+}
+
+.d3-tip {
+ background: var(--spp-green) !important;
+}
+
+.d3-tip:after {
+ color: var(--spp-green) !important;
+}
+
+.sankey {
+ background-color: var(--spp-darkest-green) !important;
+}
+
+.switch-icon {
+ background-color: #182d3499 !important;
+}
+
+.operations-list {
+ span:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.link {
+ color: var(--spp-red) !important;
+}
+
+.dark-dialog {
+ background-color: var(--spp-darkest-green) !important;
+ color: #ddd !important;
+
+ .el-loading-mask {
+ background-color: red !important;
+ color: red !important;
+ }
+}
+
+.el-loading-mask {
+ background-color: unset !important;
+ color: unset !important;
+}
+
+.app-main {
+ background: var(--spp-darkest-green) !important;
+}
+
+.opt {
+ &.select-disabled {
+ color: var(--spp-red) !important;
+ }
+}
+
+blockquote {
+ border-left: 4px solid var(--spp-light-grey) !important;
+}
+
+a {
+ color: var(--spp-white) !important;
+}
+
+.timeline-table-i {
+ &::before {
+ background-color: #448dfe !important;
+ }
+}
diff --git a/src/styles/spp-light.scss b/src/styles/spp-light.scss
new file mode 100644
index 00000000..4e31cbe3
--- /dev/null
+++ b/src/styles/spp-light.scss
@@ -0,0 +1,29 @@
+:root {
+ --spp-white: #e9ebfc;
+ --spp-light-grey: #cacaca;
+ --spp-grey: #a7aebb;
+ --spp-light-blue: #747990;
+ --spp-blue: #3d444f;
+ --spp-red: #e1483b;
+ --spp-green: #182d34;
+ --spp-dark-green: #172127;
+ --spp-darkest-green: #0d1216;
+ --spp-other-green: #24343d;
+ --nice-black: #1a1a1a;
+}
+
+.side-bar {
+ background: var(--spp-other-green) !important;
+}
+
+.el-menu {
+ background-color: var(--spp-other-green) !important;
+}
+
+.el-sub-menu__title {
+ background-color: var(--spp-other-green) !important;
+}
+
+.el-menu-item.is-active {
+ color: var(--spp-red) !important;
+}
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index aed49ef3..7b943af9 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -107,29 +107,19 @@ function getOption() {
let color: string[] = [];
switch (keys.length) {
case 2:
- color = ["#FF6A84", "#a0b1e6"];
+ color = ["#629755", "#9876AA"];
break;
case 1:
- color = ["#3f96e3"];
+ color = ["#629755"];
break;
default:
color = [
- "#30A4EB",
- "#45BFC0",
- "#FFCC55",
- "#FF6A84",
- "#a0a7e6",
- "#c23531",
- "#2f4554",
- "#61a0a8",
- "#d48265",
- "#91c7ae",
- "#749f83",
- "#ca8622",
- "#bda29a",
- "#6e7074",
- "#546570",
- "#c4ccd3",
+ "#629755",
+ "#9876AA",
+ "#CC7832",
+ "#8A653B",
+ "#FF0000",
+ "#FFC66D",
];
break;
}
@@ -143,7 +133,7 @@ function getOption() {
confine: true,
textStyle: {
fontSize: 13,
- color: "#ccc",
+ color: "#A9B7C6",
},
enterable: true,
extraCssText: "max-height: 300px; overflow: auto; border: none",
@@ -156,7 +146,7 @@ function getOption() {
left: 0,
itemWidth: 12,
textStyle: {
- color: "#333",
+ color: "#A9B7C6",
},
},
grid: {
@@ -174,14 +164,20 @@ function getOption() {
},
splitLine: { show: false },
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
- axisLabel: { color: "#9da5b2", fontSize: "11" },
+ axisLabel: {
+ color: "#808080",
+ fontSize: "13",
+ },
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
- axisLabel: { color: "#9da5b2", fontSize: "11" },
+ axisLabel: {
+ color: "#808080",
+ fontSize: "13",
+ },
},
series: temp,
};
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 295bc87f..93ac9d7d 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -117,29 +117,19 @@ function getOption() {
let color: string[] = [];
switch (keys.length) {
case 2:
- color = ["#FF6A84", "#a0b1e6"];
+ color = ["#629755", "#9876AA"];
break;
case 1:
- color = ["#3f96e3"];
+ color = ["#629755"];
break;
default:
color = [
- "#30A4EB",
- "#45BFC0",
- "#FFCC55",
- "#FF6A84",
- "#a0a7e6",
- "#c23531",
- "#2f4554",
- "#61a0a8",
- "#d48265",
- "#91c7ae",
- "#749f83",
- "#ca8622",
- "#bda29a",
- "#6e7074",
- "#546570",
- "#c4ccd3",
+ "#629755",
+ "#9876AA",
+ "#CC7832",
+ "#8A653B",
+ "#FF0000",
+ "#FFC66D",
];
break;
}
@@ -148,7 +138,7 @@ function getOption() {
backgroundColor: "rgb(50,50,50)",
textStyle: {
fontSize: 12,
- color: "#ccc",
+ color: "#A9B7C6",
},
enterable: true,
confine: true,
@@ -178,7 +168,7 @@ function getOption() {
left: 0,
itemWidth: 12,
textStyle: {
- color: props.theme === "dark" ? "#fff" : "#333",
+ color: "#A9B7C6",
},
},
grid: {
@@ -198,7 +188,10 @@ function getOption() {
},
splitLine: { show: false },
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
- axisLabel: { color: "#9da5b2", fontSize: "11" },
+ axisLabel: {
+ color: "#808080",
+ fontSize: "13",
+ },
},
yAxis: {
show: props.config.showYAxis,
@@ -207,8 +200,8 @@ function getOption() {
axisTick: { show: false },
splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } },
axisLabel: {
- color: "#9da5b2",
- fontSize: "11",
+ color: "#808080",
+ fontSize: "13",
show: props.config.showYAxis,
},
},