This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new a4271bb4 feat: enhance the Dark Theme (#336)
a4271bb4 is described below
commit a4271bb4797034e5921e4ef795cb6df131cdc8c8
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Wed Nov 15 19:53:23 2023 +0800
feat: enhance the Dark Theme (#336)
---
src/components/Graph.vue | 8 +-
src/hooks/data.ts | 40 ++++++++++
src/hooks/useLegendProcessor.ts | 39 ++--------
src/styles/reset.scss | 86 ---------------------
src/styles/theme.scss | 88 ++++++++++++++++++++++
src/views/dashboard/controls/Tab.vue | 2 +-
src/views/dashboard/graphs/Bar.vue | 2 +-
src/views/dashboard/graphs/Line.vue | 2 +-
src/views/dashboard/graphs/components/Legend.vue | 3 +-
src/views/dashboard/panel/Layout.vue | 2 +-
.../related/topology/components/Sankey.vue | 6 ++
11 files changed, 151 insertions(+), 127 deletions(-)
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 2ad0b48f..5ed35d1d 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -252,11 +252,11 @@ limitations under the License. -->
display: block;
white-space: nowrap;
z-index: 9999999;
- box-shadow: #ddd 1px 2px 10px;
+ box-shadow: var(--sw-topology-box-shadow);
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
- background-color: rgb(255 255 255);
+ background-color: var(--sw-bg-color-overlay);
border-radius: 4px;
- color: rgb(51 51 51);
+ color: $font-color;
padding: 5px;
}
@@ -267,7 +267,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
</style>
diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index 8d88e076..3d45a00d 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -130,3 +130,43 @@ export const RespFields: Indexable = {
error
}`,
};
+
+export const DarkChartColors = [
+ "#79bbff",
+ "#a0a7e6",
+ "#30A4EB",
+ "#45BFC0",
+ "#ebbf93",
+ "#884dde",
+ "#1bbf93",
+ "#7289ab",
+ "#f56c6c",
+ "#81feb7",
+ "#4094fa",
+ "#ff894d",
+ "#884dde",
+ "#ebbf93",
+ "#fedc6d",
+ "#da7cfa",
+ "#b88230",
+ "#a0cfff",
+];
+
+export const LightChartColors = [
+ "#3f96e3",
+ "#a0a7e6",
+ "#45BFC0",
+ "#FFCC55",
+ "#FF6A84",
+ "#c23531",
+ "#2f4554",
+ "#61a0a8",
+ "#d48265",
+ "#91c7ae",
+ "#749f83",
+ "#ca8622",
+ "#bda29a",
+ "#6e7074",
+ "#546570",
+ "#c4ccd3",
+];
diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index 11c4e4b4..e9439a09 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -16,6 +16,9 @@
*/
import type { LegendOptions } from "@/types/dashboard";
import { isDef } from "@/utils/is";
+import { DarkChartColors, LightChartColors } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
export default function useLegendProcess(legend?: LegendOptions) {
let isRight = false;
@@ -96,37 +99,11 @@ export default function useLegendProcess(legend?:
LegendOptions) {
return { source, headers };
}
- function chartColors(keys: string[]) {
- let color: string[] = [];
- switch (keys.length) {
- case 2:
- color = ["#FF6A84", "#a0b1e6"];
- break;
- case 1:
- color = ["#3f96e3"];
- break;
- default:
- color = [
- "#30A4EB",
- "#45BFC0",
- "#FFCC55",
- "#FF6A84",
- "#a0a7e6",
- "#c23531",
- "#2f4554",
- "#61a0a8",
- "#d48265",
- "#91c7ae",
- "#749f83",
- "#ca8622",
- "#bda29a",
- "#6e7074",
- "#546570",
- "#c4ccd3",
- ];
- break;
- }
- return color;
+ function chartColors() {
+ const appStore = useAppStoreWithOut();
+ const list = appStore.theme === Themes.Dark ? DarkChartColors :
LightChartColors;
+
+ return list;
}
return { showEchartsLegend, isRight, aggregations, chartColors };
}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index d2396848..75987932 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -123,89 +123,3 @@ code,
pre {
font-family: Consolas, Menlo, Courier, monospace;
}
-
-.el-menu {
- --el-menu-item-height: 50px;
-}
-
-.el-menu-item-group__title {
- display: none;
-}
-
-.el-sub-menu .el-menu-item {
- height: 40px;
- line-height: 40px;
- padding: 0 0 0 56px !important;
-}
-
-.el-sub-menu__title {
- .el-icon.menu-icons {
- margin-top: -5px !important;
- }
-}
-
-.el-drawer__header {
- margin-bottom: 0;
- padding-left: 10px;
- font-size: 16px;
-}
-
-.el-drawer__body {
- padding: 0;
-}
-
-.switch {
- margin: 0 5px;
-}
-
-div.vis-tooltip {
- max-width: 600px;
- overflow: hidden;
- background-color: var(--vis-tooltip-bg) !important;
- white-space: normal !important;
- font-size: $font-size-smaller !important;
- color: var(--font-color) !important;
-}
-
-.vis-item {
- cursor: pointer;
- height: 20px;
-}
-
-.vis-item.Error {
- background-color: #e66;
- opacity: 0.8;
- border-color: #e66;
- color: var(--sw-event-vis-selected) !important;
-}
-
-.vis-item.Normal {
- background-color: #fac858;
- border-color: #fac858;
- color: var(--sw-event-vis-selected) !important;
-}
-
-.vis-item .vis-item-content {
- padding: 0 3px !important;
-}
-
-.vis-item.vis-selected.Error,
-.vis-item.vis-selected.Normal {
- color: var(--sw-event-vis-selected) !important;
-}
-
-.vis-time-axis .vis-text {
- color: var(--sw-time-axis-text) !important;
-}
-
-.el-menu--vertical.sub-list {
- display: none;
-}
-
-div:has(> a.menu-title) {
- display: none;
-}
-
-.el-input-number .el-input__inner {
- text-align: left !important;
-}
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 9d48255d..2fb0dd27 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -54,6 +54,7 @@ html {
--sw-time-axis-text: #4d4d4d;
--sw-drawer-header: #72767b;
--sw-marketplace-border: #dedfe0;
+ --sw-grid-item-active: #79bbff;
}
html.dark {
@@ -94,6 +95,7 @@ html.dark {
--sw-time-axis-text: #aaa;
--sw-drawer-header: #e9e9eb;
--sw-marketplace-border: #606266;
+ --sw-grid-item-active: #73767a;
}
.el-drawer__header {
@@ -150,3 +152,89 @@ $theme-background: var(--theme-background);
$active-background: var(--el-color-primary);
$font-size-smaller: 12px;
$font-size-normal: 14px;
+
+.el-menu {
+ --el-menu-item-height: 50px;
+}
+
+.el-menu-item-group__title {
+ display: none;
+}
+
+.el-sub-menu .el-menu-item {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 0 0 56px !important;
+}
+
+.el-sub-menu__title {
+ .el-icon.menu-icons {
+ margin-top: -5px !important;
+ }
+}
+
+.el-drawer__header {
+ margin-bottom: 0;
+ padding-left: 10px;
+ font-size: 16px;
+}
+
+.el-drawer__body {
+ padding: 0;
+}
+
+.switch {
+ margin: 0 5px;
+}
+
+div.vis-tooltip {
+ max-width: 600px;
+ overflow: hidden;
+ background-color: var(--vis-tooltip-bg) !important;
+ white-space: normal !important;
+ font-size: $font-size-smaller !important;
+ color: var(--font-color) !important;
+}
+
+.vis-item {
+ cursor: pointer;
+ height: 20px;
+}
+
+.vis-item.Error {
+ background-color: #e66;
+ opacity: 0.8;
+ border-color: #e66;
+ color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-item.Normal {
+ background-color: #fac858;
+ border-color: #fac858;
+ color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-item .vis-item-content {
+ padding: 0 3px !important;
+}
+
+.vis-item.vis-selected.Error,
+.vis-item.vis-selected.Normal {
+ color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-time-axis .vis-text {
+ color: var(--sw-time-axis-text) !important;
+}
+
+.el-menu--vertical.sub-list {
+ display: none;
+}
+
+div:has(> a.menu-title) {
+ display: none;
+}
+
+.el-input-number .el-input__inner {
+ text-align: left !important;
+}
diff --git a/src/views/dashboard/controls/Tab.vue
b/src/views/dashboard/controls/Tab.vue
index 74f71b92..55df3fe0 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -375,7 +375,7 @@ limitations under the License. -->
}
.vue-grid-item.active {
- border: 1px solid $active-color;
+ border: 1px solid var(--sw-grid-item-active);
}
.no-data-tips {
diff --git a/src/views/dashboard/graphs/Bar.vue
b/src/views/dashboard/graphs/Bar.vue
index db646e48..50b61f3e 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -74,7 +74,7 @@ limitations under the License. -->
},
};
});
- const color: string[] = chartColors(keys);
+ const color: string[] = chartColors();
return {
color,
tooltip: {
diff --git a/src/views/dashboard/graphs/Line.vue
b/src/views/dashboard/graphs/Line.vue
index d438df06..11d23515 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -92,7 +92,7 @@ limitations under the License. -->
}
return serie;
});
- const color: string[] = chartColors(keys);
+ const color: string[] = chartColors();
const tooltip = {
trigger: "axis",
backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
diff --git a/src/views/dashboard/graphs/components/Legend.vue
b/src/views/dashboard/graphs/components/Legend.vue
index 268c1b28..36be0de9 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -111,9 +111,8 @@ limitations under the License. -->
const isRight = computed(() => useLegendProcess(props.config).isRight);
const width = computed(() => (props.config.width ? props.config.width + "px"
: isRight.value ? "150px" : "100%"));
const colors = computed(() => {
- const keys = Object.keys(props.data || {}).filter((i: any) =>
Array.isArray(props.data[i]) && props.data[i].length);
const { chartColors } = useLegendProcess(props.config);
- return chartColors(keys);
+ return chartColors();
});
</script>
<style lang="scss" scoped>
diff --git a/src/views/dashboard/panel/Layout.vue
b/src/views/dashboard/panel/Layout.vue
index ec7e645f..222f2ddf 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -91,7 +91,7 @@ limitations under the License. -->
}
.vue-grid-item.active {
- border: 1px solid $active-color;
+ border: 1px solid var(--sw-grid-item-active);
}
.no-data-tips {
diff --git a/src/views/dashboard/related/topology/components/Sankey.vue
b/src/views/dashboard/related/topology/components/Sankey.vue
index f8fa2d44..553bf0b9 100644
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@@ -44,6 +44,12 @@ limitations under the License. -->
tooltip: {
trigger: "item",
confine: true,
+ backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+ borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+ textStyle: {
+ fontSize: 12,
+ color: appStore.theme === Themes.Dark ? "#eee" : "#333",
+ },
},
series: {
type: "sankey",
