This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 49a51d2a refactor: optimize the pages theme (#522)
49a51d2a is described below
commit 49a51d2a3728bc48932106d84e15b3220f0105db
Author: Fine0830 <[email protected]>
AuthorDate: Tue Feb 10 14:45:31 2026 +0800
refactor: optimize the pages theme (#522)
---
src/hooks/useTheme.ts | 8 +
src/styles/theme.scss | 534 +++++++++++++++++++++++++++++++++++---------------
2 files changed, 387 insertions(+), 155 deletions(-)
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index b3a750a6..2bef4c8f 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -58,6 +58,14 @@ export function useTheme() {
// Handle theme change with transition animation
function handleChangeTheme() {
+ const prefersReducedMotion =
+ typeof window !== "undefined" &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+ if (prefersReducedMotion) {
+ applyTheme();
+ return;
+ }
+
const x = themeSwitchRef.value?.offsetLeft ?? 0;
const y = themeSwitchRef.value?.offsetTop ?? 0;
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y,
innerHeight - y));
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 0f9a62e3..52cde5e2 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -15,135 +15,308 @@
* limitations under the License.
*/
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+
+/* ============================================
+ ANIMATIONS
+ ============================================ */
@keyframes topo-dash {
from {
stroke-dashoffset: 10;
}
-
to {
stroke-dashoffset: 0;
}
}
+
+@keyframes theme-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* ============================================
+ BASE THEME TOKENS
+ ============================================ */
:root {
+ /* Brand Colors */
--sw-green: #70c877;
--sw-orange: #e6a23c;
+ --sw-red: #e66;
+ --sw-blue-primary: #409eff;
+
+ /* Animation */
--sw-topo-animation: topo-dash 0.3s linear infinite;
+
+ /* Timing Functions */
+ --sw-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+ --sw-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+ /* Transitions */
+ --sw-transition-fast: 150ms var(--sw-ease-smooth);
+ --sw-transition-base: 250ms var(--sw-ease-smooth);
+ --sw-transition-slow: 350ms var(--sw-ease-smooth);
+
+ /* Shadows */
+ --sw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --sw-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 /
0.1);
+ --sw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 /
0.1);
+ --sw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0
/ 0.1);
}
+/* ============================================
+ LIGHT THEME
+ ============================================ */
html {
- --el-color-primary: #409eff;
+ color-scheme: light;
+
+ /* === Element Plus Integration === */
+ --el-color-primary: var(--sw-blue-primary);
--el-color-info-light-9: #666;
- --theme-background: #fff;
- --font-color: #3d444f;
- --disabled-color: #ccc;
- --dashboard-tool-bg: rgb(240 242 245);
- --text-color-placeholder: #666;
- --border-color: #dcdfe6;
- --border-color-primary: #eee;
- --layout-background: #f7f9fa;
- --box-shadow-color: #ccc;
- --sw-bg-color-overlay: #fff;
- --sw-border-color-light: #e4e7ed;
- --popper-hover-bg: #eee;
- --sw-icon-btn-bg: #eee;
- --sw-icon-btn-color: #666;
- --sw-icon-btn-border: #ccc;
- --sw-table-col: #fff;
- --sw-config-header: aliceblue;
- --sw-topology-color: #666;
- --vis-tooltip-bg: #fff;
- --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
- --sw-topology-box-shadow: #eee 1px 2px 10px;
- --sw-topology-setting-bg: #fff;
- --sw-topology-border: 1px solid #999;
- --sw-trace-success: rgb(46 47 51 / 10%);
- --sw-trace-list-border: rgb(0 0 0 / 10%);
- --sw-list-selected: #ededed;
- --sw-table-header: #f3f4f9;
- --sw-list-hover: rgb(0 0 0 / 4%);
- --sw-setting-color: #606266;
- --sw-alarm-tool: #f0f2f5;
- --sw-alarm-tool-border: #c1c5ca41;
- --sw-table-color: #000;
- --sw-event-vis-selected: #1a1a1a;
- --sw-time-axis-text: #4d4d4d;
- --sw-drawer-header: #72767b;
- --sw-marketplace-border: #dedfe0;
- --sw-grid-item-active: #d4d7de;
- --sw-trace-line: #999;
- --sw-scrollbar-track: #eee;
- --sw-scrollbar-thumb: #aaa;
- --sw-font-grey-color: #a7aebb;
- --sw-trace-list-path: rgba(0, 0, 0, 0.1);
- --sw-trace-table-selected: rgba(0, 0, 0, 0.1);
+ --el-fill-color-blank: transparent;
+
+ /* === Foundation === */
+ --theme-background: hsl(0, 0%, 100%);
+ --layout-background: hsl(210, 20%, 98%);
+
+ /* === Typography === */
+ --font-color: hsl(220, 13%, 28%);
+ --font-color-secondary: hsl(220, 9%, 46%);
+ --font-grey-color: hsl(220, 12%, 68%);
+ --text-color-placeholder: hsl(0, 0%, 40%);
+ --disabled-color: hsl(0, 0%, 80%);
+
+ /* === Surfaces & Overlays === */
+ --sw-bg-color-overlay: hsl(0, 0%, 100%);
+ --sw-config-header: hsl(208, 100%, 97%);
+ --dashboard-tool-bg: hsl(220, 14%, 96%);
+ --sw-alarm-tool: hsl(220, 14%, 94%);
+ --sw-table-header: hsl(225, 25%, 97%);
+
+ /* === Borders === */
+ --border-color: hsl(214, 15%, 91%);
+ --border-color-primary: hsl(0, 0%, 93%);
+ --sw-border-color-light: hsl(214, 18%, 91%);
+ --sw-alarm-tool-border: hsl(220 13% 80% / 0.25);
+ --sw-marketplace-border: hsl(220, 5%, 87%);
+
+ /* === Interactive States === */
+ --sw-list-hover: hsl(0 0% 0% / 0.04);
+ --sw-list-selected: hsl(0, 0%, 93%);
+ --popper-hover-bg: hsl(0, 0%, 93%);
+ --sw-grid-item-active: hsl(222, 13%, 85%);
+
+ /* === Buttons & Icons === */
+ --sw-icon-btn-bg: hsl(0, 0%, 93%);
+ --sw-icon-btn-color: hsl(0, 0%, 40%);
+ --sw-icon-btn-border: hsl(0, 0%, 80%);
+
+ /* === Tables === */
+ --sw-table-col: hsl(0, 0%, 100%);
+ --sw-table-color: hsl(0, 0%, 0%);
+ --sw-setting-color: hsl(220, 18%, 38%);
+
+ /* === Topology === */
+ --sw-topology-color: hsl(0, 0%, 40%);
+ --sw-topology-switch-icon: hsl(0 0% 0% / 0.3);
+ --sw-topology-box-shadow: var(--sw-shadow-lg);
+ --sw-topology-setting-bg: hsl(0, 0%, 100%);
+ --sw-topology-border: 1px solid hsl(0, 0%, 60%);
+
+ /* === Trace & Events === */
+ --sw-trace-success: hsl(220 13% 18% / 0.1);
+ --sw-trace-list-border: hsl(0 0% 0% / 0.1);
+ --sw-trace-list-path: hsl(0 0% 0% / 0.1);
+ --sw-trace-table-selected: hsl(0 0% 0% / 0.1);
+ --sw-trace-line: hsl(0, 0%, 60%);
+ --sw-event-vis-selected: hsl(0, 0%, 10%);
+ --sw-time-axis-text: hsl(0, 0%, 30%);
+
+ /* === Tooltips & Popovers === */
+ --vis-tooltip-bg: hsl(0, 0%, 100%);
+
+ /* === Drawer & Modal === */
+ --sw-drawer-header: hsl(220, 9%, 46%);
+
+ /* === Scrollbars === */
+ --sw-scrollbar-track: hsl(0, 0%, 93%);
+ --sw-scrollbar-thumb: hsl(0, 0%, 67%);
+
+ /* === Shadows === */
+ --box-shadow-color: hsl(0, 0%, 80%);
}
+/* ============================================
+ DARK THEME
+ ============================================ */
html.dark {
- --el-color-primary: #409eff;
- --el-color-info-light-9: #333;
- --theme-background: #212224;
- --font-color: #fafbfc;
- --disabled-color: #999;
- --dashboard-tool-bg: #000;
- --text-color-placeholder: #ccc;
- --border-color: #333;
- --border-color-primary: #4b4b52;
- --layout-background: #000;
- --box-shadow-color: #606266;
- --sw-bg-color-overlay: #1d1e1f;
- --sw-border-color-light: #414243;
- --popper-hover-bg: rgb(64, 158, 255, 0.1);
- --sw-icon-btn-bg: #222;
- --sw-icon-btn-color: #ccc;
- --sw-icon-btn-border: #999;
+ color-scheme: dark;
+
+ /* === Element Plus Integration === */
+ --el-color-primary: var(--sw-blue-primary);
+ --el-color-info-light-9: hsl(0, 0%, 20%);
+ --el-fill-color-blank: transparent;
+
+ /* === Foundation === */
+ --theme-background: hsl(220, 6%, 13%);
+ --layout-background: hsl(0, 0%, 0%);
+
+ /* === Typography === */
+ --font-color: hsl(210, 17%, 98%);
+ --font-color-secondary: hsl(220, 9%, 78%);
+ --font-grey-color: hsl(220, 12%, 68%);
+ --text-color-placeholder: hsl(0, 0%, 80%);
+ --disabled-color: hsl(0, 0%, 60%);
+
+ /* === Surfaces & Overlays === */
+ --sw-bg-color-overlay: hsl(220, 7%, 12%);
+ --sw-config-header: hsl(210, 6%, 19%);
+ --dashboard-tool-bg: hsl(0, 0%, 0%);
+ --sw-alarm-tool: hsl(210, 6%, 19%);
+ --sw-table-header: hsl(210, 6%, 19%);
+
+ /* === Borders === */
+ --border-color: hsl(0, 0%, 20%);
+ --border-color-primary: hsl(225, 5%, 30%);
+ --sw-border-color-light: hsl(214, 5%, 26%);
+ --sw-alarm-tool-border: hsl(0, 0%, 27%);
+ --sw-marketplace-border: hsl(220, 7%, 38%);
+
+ /* === Interactive States === */
+ --sw-list-hover: hsl(220, 6%, 15%);
+ --sw-list-selected: hsl(220, 13%, 28%);
+ --popper-hover-bg: hsl(207 100% 62% / 0.1);
+ --sw-grid-item-active: hsl(220, 5%, 46%);
+
+ /* === Buttons & Icons === */
+ --sw-icon-btn-bg: hsl(0, 0%, 13%);
+ --sw-icon-btn-color: hsl(0, 0%, 80%);
+ --sw-icon-btn-border: hsl(0, 0%, 60%);
+
+ /* === Tables === */
--sw-table-col: none;
- --sw-config-header: #303133;
- --sw-topology-color: #ccc;
- --vis-tooltip-bg: #414243;
- --sw-topology-switch-icon: #999;
- --sw-topology-box-shadow: 0 0 2px 0 #444;
- --sw-topology-setting-bg: #333;
- --sw-topology-border: 1px solid #666;
- --sw-trace-success: #aaa;
- --sw-trace-list-border: #333133;
- --sw-list-hover: #262629;
- --sw-table-header: #303133;
- --sw-list-selected: #3d444f;
- --sw-setting-color: #eee;
- --sw-alarm-tool: #303133;
- --sw-alarm-tool-border: #444;
- --sw-table-color: #fff;
- --sw-event-vis-selected: #fff;
- --sw-time-axis-text: #aaa;
- --sw-drawer-header: #e9e9eb;
- --sw-marketplace-border: #606266;
- --sw-grid-item-active: #73767a;
- --sw-trace-line: #e8e8e8;
- --sw-scrollbar-track: #252a2f;
- --sw-scrollbar-thumb: #888;
- --sw-font-grey-color: #a7aebb;
- --sw-trace-list-path: rgba(244, 244, 244, 0.4);
- --sw-trace-table-selected: rgba(255, 255, 255, 0.1);
+ --sw-table-color: hsl(0, 0%, 100%);
+ --sw-setting-color: hsl(0, 0%, 93%);
+
+ /* === Topology === */
+ --sw-topology-color: hsl(0, 0%, 80%);
+ --sw-topology-switch-icon: hsl(0, 0%, 60%);
+ --sw-topology-box-shadow: 0 0 2px 0 hsl(0, 0%, 27%);
+ --sw-topology-setting-bg: hsl(0, 0%, 20%);
+ --sw-topology-border: 1px solid hsl(0, 0%, 40%);
+
+ /* === Trace & Events === */
+ --sw-trace-success: hsl(0, 0%, 67%);
+ --sw-trace-list-border: hsl(220, 3%, 20%);
+ --sw-trace-list-path: hsl(0 0% 96% / 0.4);
+ --sw-trace-table-selected: hsl(0 0% 100% / 0.1);
+ --sw-trace-line: hsl(0, 0%, 91%);
+ --sw-event-vis-selected: hsl(0, 0%, 100%);
+ --sw-time-axis-text: hsl(0, 0%, 67%);
+
+ /* === Tooltips & Popovers === */
+ --vis-tooltip-bg: hsl(214, 5%, 26%);
+
+ /* === Drawer & Modal === */
+ --sw-drawer-header: hsl(240, 5%, 91%);
+
+ /* === Scrollbars === */
+ --sw-scrollbar-track: hsl(210, 11%, 15%);
+ --sw-scrollbar-thumb: hsl(0, 0%, 53%);
+
+ /* === Shadows === */
+ --box-shadow-color: hsl(220, 7%, 38%);
}
+/* ============================================
+ ELEMENT PLUS OVERRIDES
+ ============================================ */
+
+/* === Drawer === */
.el-drawer__header {
+ margin-bottom: 0;
+ padding-left: 10px;
+ font-size: 16px;
color: var(--sw-drawer-header);
}
+.el-drawer__body {
+ padding: 0;
+}
+
+/* === Table === */
.el-table {
--el-table-tr-bg-color: var(--theme-background);
--el-table-header-bg-color: var(--theme-background);
}
+/* === Popper === */
.el-popper.is-light {
background: var(--sw-bg-color-overlay);
border: 1px solid var(--sw-border-color-light);
+ box-shadow: var(--sw-shadow-md);
}
+/* === Switch === */
.el-switch {
- --el-switch-off-color: #aaa;
+ --el-switch-off-color: var(--disabled-color);
+}
+
+/* === Menu === */
+.el-menu {
+ --el-menu-item-height: 50px;
}
+.el-menu-item-group__title {
+ display: none;
+}
+
+.el-sub-menu {
+ .el-menu-item {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 0 0 56px !important;
+ }
+}
+
+.el-sub-menu__title {
+ .el-icon.menu-icons {
+ margin-top: -5px !important;
+ }
+}
+
+/* === Input === */
+.el-input-number .el-input__inner {
+ text-align: left !important;
+}
+
+.el-input--small .el-input__inner {
+ --el-input-inner-height: calc(var(--el-input-height, 24px));
+}
+
+/* === Loading === */
+.el-loading-mask {
+ background-color: var(--theme-background);
+}
+
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
{
+ .el-loading-mask {
+ backdrop-filter: blur(1px);
+ -webkit-backdrop-filter: blur(1px);
+ }
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion:
reduce) {
+ .el-loading-mask {
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ }
+}
+/* ============================================
+ SCSS VARIABLES (Legacy Support)
+ ============================================ */
$tool-icon-btn-bg: var(--sw-icon-btn-bg);
$tool-icon-btn-color: var(--sw-icon-btn-color);
$popper-hover-bg-color: var(--popper-hover-bg);
@@ -160,126 +333,177 @@ $theme-background: var(--theme-background);
$active-background: var(--el-color-primary);
$font-size-smaller: 12px;
$font-size-normal: 14px;
-$error-color: #e66;
+$error-color: var(--sw-red);
-.opt:hover {
- background-color: var(--sw-list-hover) !important;
-}
+/* ============================================
+ COMPONENT STYLES
+ ============================================ */
-.el-loading-mask {
- background-color: var(--theme-background);
+/* === Interactive Elements === */
+.opt {
+ transition: background-color var(--sw-transition-fast);
}
-.el-menu {
- --el-menu-item-height: 50px;
-}
-
-.el-menu-item-group__title {
- display: none;
-}
-
-.el-sub-menu .el-menu-item {
- height: 40px;
- line-height: 40px;
- padding: 0 0 0 56px !important;
+.opt:hover {
+ background-color: var(--sw-list-hover) !important;
}
-.el-sub-menu__title {
- .el-icon.menu-icons {
- margin-top: -5px !important;
- }
+.switch {
+ margin: 0 5px;
}
-.el-drawer__header {
- margin-bottom: 0;
- padding-left: 10px;
- font-size: 16px;
+/* === Menu Visibility === */
+.el-menu--vertical.sub-list {
+ display: none;
}
-.el-drawer__body {
- padding: 0;
+div:has(> a.menu-title) {
+ display: none;
}
-.switch {
- margin: 0 5px;
-}
+/* ============================================
+ VIS.JS TIMELINE CUSTOMIZATION
+ ============================================ */
+/* === Tooltip === */
div.vis-tooltip {
max-width: 600px;
overflow: hidden;
background-color: var(--vis-tooltip-bg) !important;
+ border: 1px solid var(--border-color) !important;
+ box-shadow: var(--sw-shadow-md) !important;
white-space: normal !important;
font-size: $font-size-smaller !important;
color: var(--font-color) !important;
+ border-radius: 6px;
+ padding: 8px 12px;
}
+/* === Timeline Items === */
.vis-item {
cursor: pointer;
height: 20px;
-}
+ border-radius: 4px;
+ transition: transform var(--sw-transition-fast), box-shadow
var(--sw-transition-fast);
-.vis-item.Error {
- background-color: $error-color;
- opacity: 0.8;
- border-color: $error-color;
- color: var(--sw-event-vis-selected) !important;
-}
+ &:hover {
+ transform: translateY(-1px);
+ box-shadow: var(--sw-shadow-sm);
+ }
-.vis-item.Normal {
- background-color: #fac858;
- border-color: #fac858;
- color: var(--sw-event-vis-selected) !important;
-}
+ &.Error {
+ background-color: $error-color;
+ opacity: 0.8;
+ border-color: $error-color;
+ color: var(--sw-event-vis-selected) !important;
+ }
-.vis-item .vis-item-content {
- padding: 0 3px !important;
-}
+ &.Normal {
+ background-color: #fac858;
+ border-color: #fac858;
+ color: var(--sw-event-vis-selected) !important;
+ }
-.vis-item.vis-selected.Error,
-.vis-item.vis-selected.Normal {
- color: var(--sw-event-vis-selected) !important;
+ .vis-item-content {
+ padding: 0 3px !important;
+ }
+
+ &.vis-selected {
+ &.Error,
+ &.Normal {
+ color: var(--sw-event-vis-selected) !important;
+ box-shadow: var(--sw-shadow-base);
+ }
+ }
}
+/* === Time Axis === */
.vis-time-axis .vis-text {
color: var(--sw-time-axis-text) !important;
+ font-size: $font-size-smaller;
}
-.el-menu--vertical.sub-list {
- display: none;
-}
-
-div:has(> a.menu-title) {
- display: none;
-}
-
-.el-input-number .el-input__inner {
- text-align: left !important;
-}
-
-.el-input--small .el-input__inner {
- --el-input-inner-height: calc(var(--el-input-height, 24px));
-}
-
+/* ============================================
+ VIEW TRANSITIONS
+ ============================================ */
html {
+ /* Smooth theme switching with fade */
&::view-transition-old(root),
&::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
+ /* Light to Dark: Fade out light, fade in dark */
&.dark {
&::view-transition-old(root) {
z-index: 1;
+ animation: theme-fade-out 0.35s var(--sw-ease-smooth);
}
&::view-transition-new(root) {
z-index: 999;
+ animation: theme-fade-in 0.35s var(--sw-ease-smooth);
}
}
+ /* Dark to Light: Fade out dark, fade in light */
&::view-transition-old(root) {
z-index: 999;
+ animation: theme-fade-out 0.35s var(--sw-ease-smooth);
}
&::view-transition-new(root) {
z-index: 1;
+ animation: theme-fade-in 0.35s var(--sw-ease-smooth);
+ }
+}
+
+@keyframes theme-fade-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+/* ============================================
+ ACCESSIBILITY: REDUCED MOTION
+ ============================================ */
+@media (prefers-reduced-motion: reduce) {
+ /* Disable view transition animations */
+ html {
+ &::view-transition-old(root),
+ &::view-transition-new(root) {
+ animation: none !important;
+ }
+
+ &.dark {
+ &::view-transition-old(root),
+ &::view-transition-new(root) {
+ animation: none !important;
+ }
+ }
+ }
+
+ /* Disable component animations */
+ .vis-item {
+ transition: none !important;
+
+ &:hover {
+ transform: none !important;
+ }
+ }
+
+ .opt:hover {
+ transition: none !important;
+ }
+
+ /* Disable all keyframe animations */
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
}
}
