diff --git a/electron/main/backend/submitter.ts b/electron/main/backend/submitter.ts
index be559f3a..cbe523ac 100644
--- a/electron/main/backend/submitter.ts
+++ b/electron/main/backend/submitter.ts
@@ -448,6 +448,7 @@ export function registerSubmitterHandlers(
width: 800,
height: 900,
frame: false,
+ transparent: true,
show: false,
autoHideMenuBar: true,
icon: path.join(process.env.VITE_PUBLIC!, "favicon.ico"),
diff --git a/electron/main/index.ts b/electron/main/index.ts
index ebf970b6..97f7451b 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -72,6 +72,13 @@ if (!app.requestSingleInstanceLock()) {
import "./backend/install-manager.js";
import "./handle-url-scheme.js";
+// 关闭 Linux 的覆盖式(overlay)滚动条,强制使用经典滚动条,
+// 否则 GTK overlay 滚动条会忽略渲染进程的 ::-webkit-scrollbar 颜色,
+// 导致暗色模式下滚动条始终是原生灰色。必须在 app ready 前设置。
+if (process.platform === "linux") {
+ app.commandLine.appendSwitch("disable-features", "OverlayScrollbar");
+}
+
const logger = pino({ name: "index.ts" });
const FLARUM_TOKEN_URL = "https://bbs.spark-app.store/api/token";
diff --git a/src/App.vue b/src/App.vue
index 83240255..3c83aaa2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,7 +73,7 @@
:category-counts="categoryCounts"
@select-category="selectSubCategory"
/>
-
+
{
return { ...tabCounts, all: allCounts.all };
}
- const counts: Record = { all: apps.value.length };
+ const counts: Record = { all: baseApps.value.length };
sourceApps.forEach((app) => {
if (!counts[app.category]) counts[app.category] = 0;
counts[app.category]++;
diff --git a/src/assets/css/appstyle.css b/src/assets/css/appstyle.css
index 00404431..f8affd3f 100644
--- a/src/assets/css/appstyle.css
+++ b/src/assets/css/appstyle.css
@@ -13,6 +13,9 @@
--color-card-light: #ffffff;
--color-card-dark: #151c2c;
+ --color-scrollbar-thumb-light: #94a3b8;
+ --color-scrollbar-thumb-dark: #15203b;
+
--shadow-glass: 0 10px 30px rgba(15,23,42,0.08);
--shadow-glassDark: 0 20px 45px rgba(0,0,0,0.45);
@@ -22,6 +25,14 @@
@variant dark (&:where(.dark, .dark *));
@layer base {
+ html {
+ color-scheme: light;
+ }
+
+ html.dark {
+ color-scheme: dark;
+ }
+
body {
font-family: var(--font-sans);
background-color: var(--color-surface-light);
@@ -38,12 +49,50 @@
#app {
min-height: 100vh;
}
+
+ /* 全局滚动条基础几何:置于 base,使 utilities 中的 .scrollbar-muted/.scrollbar-nowidth 可覆盖 */
+ *::-webkit-scrollbar {
+ width: 0.75rem;
+ height: 0.75rem;
+ }
+
+ *::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ /* 亮色滚动条:与暗色保持相同几何(透明边距),确保亮/暗滚动块大小一致 */
+ html ::-webkit-scrollbar-thumb {
+ background-color: var(--color-scrollbar-thumb-light);
+ border-radius: 9999px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+ }
+
+ html ::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ /* 暗色滚动条:挂在 html.dark 上(root),比 surface 略亮以保留可辨识反差 (#15203b),
+ 注意:必须用 html.dark 而非 .dark *,因为经典滚动条只作用于滚动容器自身,
+ .dark * 在亮色模式不命中会导致回退到原生宽度,亮/暗宽度不一致。 */
+ html.dark ::-webkit-scrollbar-thumb {
+ background-color: var(--color-scrollbar-thumb-dark);
+ border-radius: 9999px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+ }
+
+ html.dark ::-webkit-scrollbar-track {
+ background: transparent;
+ }
}
@layer utilities {
+ /* 弱化滚动条 */
.scrollbar-muted {
scrollbar-width: thin;
- scrollbar-color: #94a3b8 transparent;
+ scrollbar-color: var(--color-scrollbar-thumb-light) transparent;
}
.scrollbar-muted::-webkit-scrollbar {
@@ -55,10 +104,19 @@
}
.scrollbar-muted::-webkit-scrollbar-thumb {
- background-color: #94a3b8;
+ background-color: var(--color-scrollbar-thumb-light);
border-radius: 9999px;
}
+ html.dark .scrollbar-muted {
+ scrollbar-color: var(--color-surface-dark) transparent;
+ }
+
+ html.dark .scrollbar-muted::-webkit-scrollbar-thumb {
+ background-color: var(--color-surface-dark);
+ }
+
+ /* 完全隐藏滚动条 */
.scrollbar-nowidth {
scrollbar-width: none;
}
diff --git a/src/components/AppGrid.vue b/src/components/AppGrid.vue
index be14e4aa..d75216ad 100644
--- a/src/components/AppGrid.vue
+++ b/src/components/AppGrid.vue
@@ -205,7 +205,6 @@ const gridRows = computed(() => {
flex: 1;
box-sizing: border-box;
overflow-x: hidden;
- overflow-y: auto;
}
:deep(.vue-recycle-scroller__item-view) {
diff --git a/src/components/InstalledAppsModal.vue b/src/components/InstalledAppsModal.vue
index d4471c47..a7d28b32 100644
--- a/src/components/InstalledAppsModal.vue
+++ b/src/components/InstalledAppsModal.vue
@@ -100,7 +100,7 @@