feat: enhance the Dark Theme (#336)

This commit is contained in:
Fine0830
2023-11-15 19:53:23 +08:00
committed by GitHub
parent 832dc1676b
commit a4271bb479
11 changed files with 151 additions and 127 deletions

View File

@@ -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 {

View File

@@ -74,7 +74,7 @@ limitations under the License. -->
},
};
});
const color: string[] = chartColors(keys);
const color: string[] = chartColors();
return {
color,
tooltip: {

View File

@@ -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",

View File

@@ -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>

View File

@@ -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 {

View File

@@ -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",