diff --git a/frontend/src/components/app-layout/footer/index.vue b/frontend/src/components/app-layout/footer/index.vue
index e931d1f6b..248c4ce4d 100644
--- a/frontend/src/components/app-layout/footer/index.vue
+++ b/frontend/src/components/app-layout/footer/index.vue
@@ -17,6 +17,7 @@
height: 45px;
background: #ffffff;
border-top: 1px solid #e4e7ed;
+ box-sizing: border-box;
a {
font-size: 14px;
color: #858585;
diff --git a/frontend/src/components/app-layout/menu/components/Collapse.vue b/frontend/src/components/app-layout/menu/components/Collapse.vue
index c59031766..8f0c31e64 100644
--- a/frontend/src/components/app-layout/menu/components/Collapse.vue
+++ b/frontend/src/components/app-layout/menu/components/Collapse.vue
@@ -15,8 +15,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index e1f0996d5..882806dad 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -46,10 +46,10 @@ html.dark {
// --el-box-shadow-lighter: 0 0 6px rgb(0 0 0 / 72%);
// --el-box-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 72%), 0 12px 32px #000000, 0 8px 16px -8px #000000;
// --el-bg-color-page: #0a0a0a;
- // --el-bg-color: #141414;
+ --el-bg-color: rgb(36, 37, 37);
// --el-bg-color-overlay: #1d1e1f;
// --el-text-color-primary: #e5eaf3;
- // --el-text-color-regular: #cfd3dc;
+ --el-text-color-regular: #cfd3dc;
// --el-text-color-secondary: #a3a6ad;
// --el-text-color-placeholder: #8d9095;
// --el-text-color-disabled: #6c6e72;
@@ -69,32 +69,63 @@ html.dark {
// --el-mask-color: rgb(0 0 0 / 80%);
// --el-mask-color-extra-light: rgb(0 0 0 / 30%);
+ // * menu
+ --el-menu-bg-color: rgb(36, 37, 37) !important;
+ --el-menu-item-bg-color: rgb(36, 37, 37);
+ --el-menu-text-color: rgb(174, 166, 153);
+ --el-menu-item-bg-color-active: rgb(44, 45, 46);
+
// * panel-admin
+ --panel-border: 1px solid rgb(64, 67, 67);
+ --panel-main-bg-color: rgb(41, 43, 43);
+ --panel-button-active: rgb(44, 45, 46);
+
--panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%);
--panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
- --panel-border-light: 1px solid #4c4c4d;
- --panel-main-bg-color: #0d0d0d;
--panel-popup-color: #060708;
+ .el-card {
+ --el-card-border-color: rgb(64, 67, 67);
+ --el-card-bg-color: rgb(36, 37, 37);
+ color: rgb(174, 166, 153);
+ }
+
+ .el-table {
+ --el-table-bg-color: rgb(36, 37, 37);
+ --el-table-tr-bg-color: rgb(36, 37, 37);
+ --el-table-header-bg-color: rgb(36, 37, 37);
+ --el-table-border: var(--panel-border);
+ --el-table-border-color: rgb(64, 67, 67);
+ }
+
+ .el-alert--info {
+ --el-alert-bg-color: rgb(56, 59, 59);
+ }
+
+ .el-input {
+ --el-input-bg-color: rgb(47 48 48);
+ --el-input-border-color: rgb(64, 67, 67);
+ }
+
// * wangEditor
--w-e-textarea-bg-color: #1b1b1b;
--w-e-textarea-color: #eeeeee;
// * 以下为自定义暗黑模式内容
// login
- .login-container {
- background-color: var(--el-fill-color-extra-light) !important;
- .login-box {
- background-color: var(--el-mask-color) !important;
- .login-form {
- background-color: var(--el-bg-color) !important;
- box-shadow: var(--panel-login-shadow-light) !important;
- .logo-text {
- color: var(--el-text-color-primary) !important;
- }
- }
- }
- }
+ // .login-container {
+ // background-color: var(--el-fill-color-extra-light) !important;
+ // .login-box {
+ // background-color: var(--el-mask-color) !important;
+ // .login-form {
+ // background-color: var(--el-bg-color) !important;
+ // box-shadow: var(--panel-login-shadow-light) !important;
+ // .logo-text {
+ // color: var(--el-text-color-primary) !important;
+ // }
+ // }
+ // }
+ // }
// scroll-bar
::-webkit-scrollbar {
@@ -103,7 +134,47 @@ html.dark {
::-webkit-scrollbar-thumb {
background-color: var(--el-border-color-darker);
}
+ // menu
+ .menu-popper {
+ border: 1px solid #66686c;
+ .el-menu--popup-container {
+ border: none;
+ }
+ }
+ .el-menu {
+ .el-menu-item {
+ &:hover {
+ background-color: var(--el-menu-item-bg-color-active);
+ }
+ }
+ }
+ .collapse {
+ color: var(--el-menu-text-color);
+ border: var(--panel-border);
+ }
+ // layout
+ .el-container {
+ .el-main {
+ background-color: var(--panel-main-bg-color) !important;
+ }
+ .footer {
+ background-color: var(--panel-main-bg-color) !important;
+ border-top: var(--panel-border);
+ }
+ }
+ .el-descriptions__body {
+ background-color: rgb(36, 37, 37);
+ }
+ .system-label {
+ color: var(--el-menu-text-color);
+ }
+
+ .router_card_button {
+ .el-radio-button__inner {
+ background: none;
+ }
+ }
// content-box
.content-box {
.text {
@@ -111,126 +182,10 @@ html.dark {
}
}
- // dataVisualize-box
- .dataVisualize-box {
- .top-box,
- .bottom-box {
- box-shadow: var(--panel-box-shadow-light) !important;
- }
+ .el-drawer .el-drawer__header span {
+ color: var(--el-menu-text-color);
}
-
- // error-message
- .not-container {
- .not-detail {
- h2 {
- color: var(--el-text-color-primary) !important;
- }
- }
- }
-
- // el-table
- .table-box {
- .el-table {
- .el-table__header th {
- color: var(--el-text-color-regular) !important;
- background-color: var(--el-bg-color) !important;
- }
- }
- }
-
- .el-table {
- --el-table-border-color: #696969;
- //fit2cloud-ui 自定义
- --el-table-text-color: #cfcfcf;
-
- // $table-header-bgColor: #f5f6f7 !default;
- .fu-table-header th {
- border-top: 1px solid var(--el-table-border-color);
- font-weight: 500 !important;
- color: var(--el-text-color-regular) !important;
- background-color: var(--el-bg-color) !important;
- }
- }
-
- // el-drawer :close-on-click-modal="false"
- .el-drawer {
- .el-drawer__header {
- border-bottom: var(--panel-border-light) !important;
- span {
- color: var(--el-text-color-primary) !important;
- }
- }
- .el-drawer__footer {
- border-top: var(--panel-border-light) !important;
- }
- }
-
- // el-dialog
- .el-dialog {
- .el-dialog__header {
- border-bottom: var(--panel-border-light) !important;
- }
- }
-
- // layout
- .el-container {
- .el-aside {
- .menu {
- background-color: var(--el-bg-color) !important;
- border-right: var(--panel-border-light) !important;
- .logo {
- border-bottom: var(--panel-border-light) !important;
- }
- .el-menu,
- .el-sub-menu,
- .el-sub-menu__title {
- background-color: var(--el-bg-color) !important;
- }
- }
- }
- .el-header {
- .header {
- background-color: var(--el-bg-color) !important;
- border-bottom-color: var(--el-border-color-light) !important;
- .header-ri {
- .icon-style {
- color: var(--el-text-color-regular) !important;
- }
- .username {
- color: var(--el-text-color-regular) !important;
- }
- }
- }
- }
- .el-main {
- background-color: var(--panel-main-bg-color) !important;
- .main-box {
- background-color: var(--el-bg-color) !important;
- }
- }
- .el-tabs {
- background-color: var(--el-bg-color) !important;
- }
- .el-footer {
- .footer {
- background-color: var(--el-bg-color) !important;
- border-top-color: var(--el-border-color-light) !important;
- a {
- color: var(--el-text-color-regular) !important;
- }
- }
- }
- }
-
- // menu-popup
- .el-menu--popup-container {
- .el-menu {
- background-color: var(--el-bg-color) !important;
- }
- }
-
- // guide
- #driver-highlighted-element-stage {
- background-color: var(--el-color-info-light-5) !important;
+ span {
+ color: var(--el-menu-text-color);
}
}
diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss
index 76d93a480..38d50f98c 100644
--- a/frontend/src/styles/element.scss
+++ b/frontend/src/styles/element.scss
@@ -1,3 +1,11 @@
+html {
+ // * menu
+ --el-menu-bg-color: rgba(0, 94, 235, 0.1) !important;
+ --el-menu-item-bg-color: rgba(255, 255, 255, 0.3);
+ --el-menu-item-bg-color-active: #ffffff;
+ --panel-border: 1px solid #f2f2f2;
+ --panel-button-active: #ffffff;
+}
.el-notification {
z-index: 99999 !important;
}
@@ -114,7 +122,7 @@
.el-drawer__header {
padding: 15px 20px 14px;
margin-bottom: 0;
- border-bottom: 1px solid #ebeef5;
+ border-bottom: var(--panel-border);
span {
font-size: 17px;
color: #303133;
@@ -122,7 +130,7 @@
}
.el-drawer__footer {
- border-top: 1px solid #ebeef5;
+ border-top: var(--panel-border);
}
.el-select {
width: 100%;
@@ -155,11 +163,14 @@
.row-box {
display: flex;
flex-flow: wrap;
- .el-card {
- min-width: 100%;
- height: 100%;
- margin-right: 20px;
- border: 0;
- }
+ .el-card {
+ min-width: 100%;
+ height: 100%;
+ margin-right: 20px;
+ border: 0;
+ }
}
+.el-avatar {
+ --el-avatar-bg-color: #ffffff;
+}
diff --git a/frontend/src/styles/var.scss b/frontend/src/styles/var.scss
index 87bf1e149..d72247789 100644
--- a/frontend/src/styles/var.scss
+++ b/frontend/src/styles/var.scss
@@ -1,5 +1,4 @@
$primary-color: #005eeb;
-$menu-backgroup-color: rgba(0, 94, 235, 0.1);
$menu-item-backgroup-color: rgba(255, 255, 255, 0.3);
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 068002f93..d15705263 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -193,7 +193,7 @@ onMounted(() => {
.app-title {
font-weight: 500;
font-size: 16px;
- color: #1f2329;
+ color: var(--el-text-color-regular);
}
.app-button {
float: right;
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 95a2df5a2..c03ebf5a8 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -173,7 +173,4 @@ onMounted(() => {
margin-top: 5px;
}
}
-.el-avatar {
- --el-avatar-bg-color: #ffffff;
-}
diff --git a/frontend/src/views/app-store/index.scss b/frontend/src/views/app-store/index.scss
index 05cef5213..c9835acca 100644
--- a/frontend/src/views/app-store/index.scss
+++ b/frontend/src/views/app-store/index.scss
@@ -49,10 +49,9 @@
margin-top: 10px;
}
}
-}
-
-.app-card:hover {
- background-color: rgba(0, 94, 235, 0.03);
+ &:hover {
+ background-color: rgba(0, 94, 235, 0.03);
+ }
}
.table-button {
@@ -63,11 +62,7 @@
.app-divider {
margin-top: 5px;
border: 0;
- border-top: 1px solid #f2f2f2;
-}
-
-.el-avatar {
- --el-avatar-bg-color: #ffffff;
+ border-top: var(--panel-border);
}
.update-prompt {
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index 52128faaf..9cb8d1750 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -120,19 +120,14 @@ defineExpose({
.h-app-button {
margin-top: 10px;
}
+ &:hover {
+ background-color: rgba(0, 94, 235, 0.03);
+ }
}
.h-app-divider {
margin-top: 5px;
border: 0;
- border-top: 1px solid #f2f2f2;
-}
-
-.h-app-card:hover {
- background-color: rgba(0, 94, 235, 0.03);
-}
-
-.el-avatar {
- --el-avatar-bg-color: #ffffff;
+ border-top: var(--panel-border);
}
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 029cfbd4a..d374cdcc5 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -579,12 +579,6 @@ onBeforeUnmount(() => {