hxuanyu/obs-overlay-widget
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加深色模式支持，优化左侧和右侧面板样式

Browse Source
This commit is contained in:
hxuanyu 2025-06-29 23:40:54 +08:00
parent a9423b1e2e
commit fb35a8ca39
2 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/style.css
View File

@ -108,3 +108,26 @@ button:focus-visible {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
} }
@media (prefers-color-scheme: dark) {
:root {
color: rgba(255, 255, 255, 0.87);
background-color: transparent;
}
/* 确保预览模式下在深色主题也是透明的 */
body.preview-mode,
html.preview-mode,
body.preview-mode #app {
background-color: transparent !important;
background: transparent !important;
}
a:hover {
color: #8cc8ff;
}
button {
background-color: #2a2a2a;
color: rgba(255, 255, 255, 0.87);
}
}

37
src/views/ConfigView.vue
View File

@ -149,6 +149,14 @@ watch([selectedWidget, currentWidgetConfig], () => {
padding-bottom: 30px; padding-bottom: 30px;
} }
/* 深色模式下的左侧面板 */
@media (prefers-color-scheme: dark) {
.left-panel {
background-color: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
}
}
.config-container { .config-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -158,10 +166,10 @@ watch([selectedWidget, currentWidgetConfig], () => {
.right-panel { .right-panel {
flex: 1; flex: 1;
background-color: transparent; background-color: transparent;
background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), background-image: linear-gradient(45deg, rgba(221, 221, 221, 0.6) 25%, transparent 25%),
linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, rgba(221, 221, 221, 0.6) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(45deg, transparent 75%, rgba(221, 221, 221, 0.6) 75%),
linear-gradient(-45deg, transparent 75%, #ddd 75%); linear-gradient(-45deg, transparent 75%, rgba(221, 221, 221, 0.6) 75%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
display: flex; display: flex;
@ -170,6 +178,16 @@ watch([selectedWidget, currentWidgetConfig], () => {
overflow: hidden; overflow: hidden;
} }
/* 深色模式下的透明背景 */
@media (prefers-color-scheme: dark) {
.right-panel {
background-image: linear-gradient(45deg, rgba(102, 102, 102, 0.4) 25%, transparent 25%),
linear-gradient(-45deg, rgba(102, 102, 102, 0.4) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(102, 102, 102, 0.4) 75%),
linear-gradient(-45deg, transparent 75%, rgba(102, 102, 102, 0.4) 75%);
}
}
.widget-selector { .widget-selector {
width: 100%; width: 100%;
} }
@ -194,6 +212,17 @@ watch([selectedWidget, currentWidgetConfig], () => {
color: #606266; color: #606266;
} }
/* 深色模式下的URL生成器样式 */
@media (prefers-color-scheme: dark) {
.url-generator {
border-bottom: 1px solid #444444;
}
.url-generator h3 {
color: #cccccc;
}
}
.url-input-group { .url-input-group {
display: flex; display: flex;
align-items: center; align-items: center;