@@ -40,7 +40,7 @@ limitations under the License. -->
:href="graph.url"
target="_blank"
:style="{
- color: TextColors[graph.fontColor],
+ color: fontColor,
fontSize: graph.fontSize + 'px',
}"
>
@@ -55,6 +55,8 @@ limitations under the License. -->
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
import { TextColors } from "@/views/dashboard/data";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
/*global defineProps */
const props = defineProps({
@@ -65,9 +67,17 @@ limitations under the License. -->
activeIndex: { type: String, default: "" },
});
const { t } = useI18n();
+ const appStore = useAppStoreWithOut();
const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
+ const backgroundColor = computed(
+ () => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
+ );
+ const fontColor = computed(
+ () => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
+ );
+
function removeTopo() {
dashboardStore.removeControls(props.data);
}
@@ -112,7 +122,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 5eac036c..3103fc1f 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -103,7 +103,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index ccdea213..fd828e3b 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -176,7 +176,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index ff2553f5..f1945216 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -59,7 +59,6 @@ limitations under the License. -->
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index c349bdea..ec7e645f 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -80,13 +80,13 @@ limitations under the License. -->
diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
index e510eddd..6f6e77c0 100644
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -107,7 +107,7 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
- border-bottom: 1px solid rgb(0 0 0 / 10%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
}
.profile-header div {
@@ -115,7 +115,7 @@ limitations under the License. -->
padding: 0 4px;
border-right: 1px dotted silver;
line-height: 30px;
- background-color: #f3f4f9;
+ background-color: var(--sw-table-header);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/src/views/dashboard/related/profile/components/Stack/Item.vue b/src/views/dashboard/related/profile/components/Stack/Item.vue
index 26c08999..9341f4d5 100644
--- a/src/views/dashboard/related/profile/components/Stack/Item.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Item.vue
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. -->
-
+
import { ref, defineComponent, toRefs } from "vue";
import type { PropType } from "vue";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
const props = {
data: { type: Object as PropType
, default: () => ({}) },
@@ -56,24 +61,25 @@ limitations under the License. -->
name: "TableItem",
props,
setup(props) {
+ const appStore = useAppStoreWithOut();
const displayChildren = ref(true);
function toggle() {
displayChildren.value = !displayChildren.value;
}
- return { toggle, displayChildren, ...toRefs(props) };
+ return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
},
});