github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-16 05:09:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement the Dark Theme (#334)

Browse Source
This commit is contained in:
Fine0830
2023-11-14 20:37:15 +08:00
committed by GitHub
parent 780104c5d2
commit 832dc1676b
81 changed files with 638 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/dashboard/related/profile/components/Stack/Container.vue
View File

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

30
src/views/dashboard/related/profile/components/Stack/Item.vue
View File

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>
<div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
<div
:class="['profile-item', 'level' + data.parentId]"
:style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
>
<div
:class="['thread', 'level' + data.parentId]"
:style="{
@@ -47,6 +50,8 @@ limitations under the License. -->
<script lang="ts">
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<any>, default: () => ({}) },
@@ -56,24 +61,25 @@ limitations under the License. -->
name: "TableItem",
props,
setup(props) {
const appStore = useAppStoreWithOut();
const displayChildren = ref<boolean>(true);
function toggle() {
displayChildren.value = !displayChildren.value;
}
return { toggle, displayChildren, ...toRefs(props) };
return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
},
});
</script>
<style lang="scss" scoped>
@import "./profile.scss";
@import url("./profile.scss");
.profile-item.level0 {
background: rgba(0, 0, 0, 0.04);
color: #448dfe;
background-color: var(--sw-list-hover);
color: var(--el-color-primary);
&:hover {
background: rgba(0, 0, 0, 0.04);
color: #448dfe;
background-color: var(--sw-list-hover);
color: var(--el-color-primary);
}
&::before {
@@ -81,7 +87,7 @@ limitations under the License. -->
content: "";
width: 5px;
height: 100%;
background: #448dfe;
background-color: var(--el-color-primary);
left: 0;
}
}
@@ -92,11 +98,11 @@ limitations under the License. -->
}
.profile-item.selected {
background: rgba(0, 0, 0, 0.04);
background-color: var(--sw-list-selected);
}
.profile-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04);
background-color: var(--sw-list-hover);
}
.profile-item > div {
@@ -123,7 +129,7 @@ limitations under the License. -->
width: 100%;
height: 6px;
border-radius: 3px;
background: rgb(63, 177, 227);
background: var(--el-color-primary);
position: relative;
margin-top: 11px;
border: none;
@@ -131,7 +137,7 @@ limitations under the License. -->
.inner-progress_bar {
position: absolute;
background: rgb(110, 64, 170);
background: rgb(110 64 170);
height: 4px;
border-radius: 2px;
left: 0;