fxz/RuoYi-Vue3-Mirror
1
0
Fork 0
mirror of https://gitcode.com/yangzongzhuan/RuoYi-Vue3.git synced 2026-05-22 19:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

暗黑模式切换效果优化

Browse Source
This commit is contained in:
RuoYi
2026-01-04 14:41:59 +08:00
parent 686fd011a9
commit c6f3d8b455
4 changed files with 100 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/svg/size.svg
+1 -1
View File
@@ -1 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z"/></svg>
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path fill="#5a5e66" d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 211 B

After

Width:  |  Height:  |  Size: 226 B

src/assets/styles/transition.scss
+31
View File
@@ -47,3 +47,34 @@
.breadcrumb-leave-active {
position: absolute;
}
/* 黑暗模式下过渡效果 */
::view-transition-new(root), ::view-transition-old(root) {
animation: none !important;
backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dark::view-transition-old(root) {
z-index: 2147483646;
background: var(--bg-color-dark);
}
.dark::view-transition-new(root) {
z-index: 1;
background: var(--bg-color);
}
::view-transition-old(root) {
z-index: 1;
background: var(--bg-color);
}
::view-transition-new(root) {
z-index: 2147483646;
background: var(--bg-color-dark);
}
src/assets/styles/variables.module.scss
+30
View File
@@ -89,6 +89,9 @@ html.dark {
--el-text-color-regular: #d0d0d0;
--el-border-color: #434343;
--el-border-color-light: #434343;
/* primary */
--primary-bg: #18212b;
/* 侧边栏 */
--sidebar-bg: #141414;
@@ -173,6 +176,33 @@ html.dark {
}
}
/* 按钮样式覆盖 */
.el-button--primary.is-plain {
background-color: var(--primary-bg);
border: 1px solid var(--el-color-primary-light-2);
color: var(--el-color-primary-light-2);
&:hover {
background-color: var(--el-button-hover-bg-color);
border-color: var(--el-button-hover-border-color);
color: var(--el-button-hover-text-color);
}
&.is-disabled {
background-color: var(--link-active-bg-color);
border-color: var(--el-color-primary-light-3);
color: var(--el-color-primary-light-3);
opacity: 0.5;
}
}
/* primary tag 样式覆盖 */
.el-tag--primary {
background-color: var(--primary-bg);
border: 1px solid var(--el-border-color-light);
color: var(--el-color-primary);
}
/* 表格样式覆盖 */
.el-table {
--el-table-header-bg-color: var(--el-bg-color-overlay) !important;