GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-06-29 19:21:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add theme and dark mode

Browse Source
This commit is contained in:
shiyu
2025-09-08 15:20:49 +08:00
parent f40ff4d751
commit d41b72d0ce
22 changed files with 525 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/styles/settings-tabs.css Normal file
View File

@@ -0,0 +1,40 @@
.fx-settings-tabs .ant-tabs-nav-list {
padding: 8px 4px;
}
.fx-settings-tabs .ant-tabs-tab {
margin: 4px 0 !important;
border-radius: 8px;
padding: 6px 10px !important;
}
.fx-settings-tabs .ant-tabs-tab .ant-tabs-tab-btn {
color: var(--ant-color-text-secondary) !important;
}
.fx-settings-tabs .ant-tabs-tab:hover {
background: var(--ant-color-fill-tertiary) !important;
}
/* 选中态：按主题细分 */
html[data-theme='dark'] .fx-settings-tabs .ant-tabs-tab-active {
background: var(--ant-color-primary-bg) !important;
}
html[data-theme='dark'] .fx-settings-tabs .ant-tabs-tab-active .ant-tabs-tab-btn,
html[data-theme='dark'] .fx-settings-tabs .ant-tabs-tab-active .ant-tabs-tab-btn .anticon {
color: var(--ant-color-text) !important;
font-weight: 600;
}
html[data-theme='light'] .fx-settings-tabs .ant-tabs-tab-active {
background: var(--ant-color-primary) !important;
}
html[data-theme='light'] .fx-settings-tabs .ant-tabs-tab-active .ant-tabs-tab-btn,
html[data-theme='light'] .fx-settings-tabs .ant-tabs-tab-active .ant-tabs-tab-btn .anticon {
color: var(--ant-color-text-light-solid) !important;
font-weight: 600;
}
.fx-settings-tabs .ant-tabs-ink-bar {
background: var(--ant-color-primary) !important;
}

26
web/src/styles/sider-menu.css
View File

@@ -5,13 +5,24 @@
margin-block: 2px;
}
.foxel-sider-menu .ant-menu-item-selected {
font-weight: 600;
.foxel-sider-menu .ant-menu-item-selected { font-weight: 600; }
/* 亮色主题：选中项使用主色，文字用浅色文本 */
html[data-theme='light'] .foxel-sider-menu .ant-menu-item-selected {
background: var(--ant-color-primary) !important;
color: var(--ant-color-text-light-solid) !important;
}
html[data-theme='light'] .foxel-sider-menu .ant-menu-item-selected .ant-menu-item-icon {
color: var(--ant-color-text-light-solid) !important;
}
.foxel-sider-menu .ant-menu-item-selected,
.foxel-sider-menu .ant-menu-item-selected .ant-menu-item-icon {
color: #fff !important;
/* 暗色主题：选中项使用主色背景（浅），文字使用常规文本色以保持对比度 */
html[data-theme='dark'] .foxel-sider-menu .ant-menu-item-selected {
background: var(--ant-color-primary-bg) !important;
color: var(--ant-color-text) !important;
}
html[data-theme='dark'] .foxel-sider-menu .ant-menu-item-selected .ant-menu-item-icon {
color: var(--ant-color-text) !important;
}
.foxel-sider-menu .ant-menu-item-selected::after {
@@ -21,3 +32,8 @@
.foxel-sider-menu .ant-menu-item .ant-menu-item-icon {
transition: color .18s;
}
/* 悬停（未选中）背景 */
.foxel-sider-menu .ant-menu-item:not(.ant-menu-item-selected):hover {
background: var(--ant-color-fill-tertiary) !important;
}