diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index 460580e87..c352f3c4d 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -7,15 +7,15 @@
--b3-theme-secondary: #f3a92f;
--b3-theme-background: #fff;
--b3-theme-background-light: #dfe0e1;
- --b3-theme-surface: #f7f8fa;
+ --b3-theme-surface: #f6f6f6;
--b3-theme-surface-light: rgba(243, 243, 243, .86);
- --b3-theme-surface-lighter: rgba(0, 0, 0, .06);
+ --b3-theme-surface-lighter: #e0e0e0;
--b3-theme-error: #d23f31;
/* 文字颜色 */
--b3-theme-on-primary: #fff;
--b3-theme-on-secondary: #fff;
- --b3-theme-on-background: #202124;
+ --b3-theme-on-background: #222;
--b3-theme-on-surface: #5f6368;
--b3-theme-on-surface-light: rgba(95, 99, 104, .68);
--b3-theme-on-error: #fff;
@@ -28,30 +28,31 @@
--b3-font-family-math: KaTeX_Math;
/* 顶部工具栏 */
- --b3-toolbar-background: #2b2d30;
- --b3-toolbar-blur-background: #373a41;
- --b3-toolbar-color: #9aa0a6;
- --b3-toolbar-hover: #383a42;
+ --b3-toolbar-background: var(--b3-theme-surface);
+ --b3-toolbar-blur-background: #fcfcfc;
+ --b3-toolbar-color: var(--b3-theme-on-surface);
+ --b3-toolbar-hover: var(--b3-theme-background-light);
--b3-toolbar-left-mac: 69px;
/* 线条 */
- --b3-border-color: rgba(0, 0, 0, .1);
+ --b3-border-color: var(--b3-theme-surface-lighter);
/* 滚动条 */
--b3-scroll-color: rgba(0, 0, 0, .2);
/* 列表 */
- --b3-list-hover: #e9eaea;
+ --b3-list-hover: rgba(0, 0, 0, .075);
--b3-list-icon-hover: rgba(33, 34, 36, .1);
/* 菜单 */
- --b3-menu-background: #f8f9fa;
+ --b3-menu-background: var(--b3-theme-surface);
/* 提示 */
- --b3-tooltips-color: rgba(0, 0, 0, 0.54);
+ --b3-tooltips-color: rgba(0, 0, 0, .9);
+ --b3-tooltips-shadow: 0 2px 8px rgba(0, 0, 0, .1);
/* 遮罩 */
- --b3-mask-background: rgba(0, 0, 0, 0.78);
+ --b3-mask-background: rgba(220, 220, 220, .4);
/* 卡片背景 */
--b3-card-error-color: rgb(97, 26, 21);
@@ -99,8 +100,8 @@
--b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-theme-background);
/* 阴影 */
- --b3-point-shadow: 0 3px 6px rgba(140, 149, 159, 0.15);
- --b3-dialog-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
+ --b3-point-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1), 0 0 2px 0px rgba(0, 0, 0, 0.2);
+ --b3-dialog-shadow: 0 8px 24px rgba(0,0,0, 0.2);
--b3-button-shadow: 0px 5px 5px -3px rgb(0 0 0 / 0.2), 0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);
/* 图表颜色 */
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index 92c9972b4..71cf5d84a 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -49,6 +49,7 @@
/* 提示 */
--b3-tooltips-color: #030303;
+ --b3-tooltips-shadow: 0 2px 8px rgba(0, 0, 0, .3);
/* 遮罩 */
--b3-mask-background: rgba(10, 10, 10, 0.4);
@@ -96,17 +97,11 @@
--b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
/* 下拉菜单 */
- --b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-border-color);
+ --b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-theme-background);
/* 阴影 */
- --b3-point-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09),
- 0 2px 4px 0 rgba(0, 0, 0, .15),
- 0 1px 1.5px 0 rgba(0, 0, 0, .1),
- 0 1px 2px 0 rgba(0, 0, 0, .2),
- 0 0 0 0 transparent;
- --b3-dialog-shadow: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071),
- 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
- 0px 30px 90px rgba(0, 0, 0, 0.2);
+ --b3-point-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 0 3px 6px rgba(0, 0, 0, .04), 0 0 0 0 transparent;
+ --b3-dialog-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
--b3-button-shadow: 0px 5px 5px -3px rgb(0 0 0 / 0.2), 0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);
/* 图表颜色 */
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 3e79ecdfa..ede11452c 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -188,6 +188,7 @@ html {
&:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
&--active {
background-color: var(--b3-toolbar-hover);
+ color: var(--b3-theme-on-background);
}
svg {
@@ -245,7 +246,6 @@ html {
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
- color: #ebecf0;
}
}
diff --git a/app/src/assets/scss/component/_dialog.scss b/app/src/assets/scss/component/_dialog.scss
index e94e1efb6..6f29e1749 100644
--- a/app/src/assets/scss/component/_dialog.scss
+++ b/app/src/assets/scss/component/_dialog.scss
@@ -33,7 +33,8 @@
}
&__container {
- border-radius: 4px;
+ overflow: hidden;
+ border-radius: 12px;
background-color: var(--b3-theme-surface);
position: relative;
box-shadow: var(--b3-dialog-shadow);
diff --git a/app/src/assets/scss/component/_select.scss b/app/src/assets/scss/component/_select.scss
index 6ff80df2b..03adcf86d 100644
--- a/app/src/assets/scss/component/_select.scss
+++ b/app/src/assets/scss/component/_select.scss
@@ -16,7 +16,7 @@
&:hover {
box-shadow: inset 0 0 0 .6px var(--b3-theme-on-background);
- background-color: var(--b3-theme-background-light);
+ background-color: var(--b3-theme-surface);
}
&:focus {
diff --git a/app/src/assets/scss/component/_slider.scss b/app/src/assets/scss/component/_slider.scss
index 7c2820a55..2797726ef 100644
--- a/app/src/assets/scss/component/_slider.scss
+++ b/app/src/assets/scss/component/_slider.scss
@@ -20,7 +20,6 @@
background-color: var(--b3-theme-primary);
margin-top: -4px;
box-shadow: var(--b3-point-shadow);
- border: 1px solid var(--b3-theme-surface-lighter);
transition: transform 100ms ease-out;
}
diff --git a/app/src/assets/scss/component/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss
index 1aff80b67..7610a67c3 100644
--- a/app/src/assets/scss/component/_tooltips.scss
+++ b/app/src/assets/scss/component/_tooltips.scss
@@ -52,7 +52,7 @@
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
- box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
+ box-shadow: var(--b3-tooltips-shadow);
}
&::before {