Merge pull request #14 from SpeechlessPanda/dark-mode-v0.1.3-repair

fix: complete dark mode readability repair

Author: SpeechlessPanda

README.md

@@ -14,7 +14,7 @@ GitHub 登录配置：[docs/guides/github-oauth-app-setup.md](docs/guides/github
 
 ## 当前版本与交接状态
 
-1. 当前版本：v1.3.0。
+1. 当前版本：v0.1.3。
 2. 当前支持框架：Hexo、Hugo。
 3. 当前支持主题（10 个）：
    - Hexo：Landscape、Next、Butterfly、Fluid、Volantis。

e2e/electron/editorial-workbench.spec.mjs

@@ -422,6 +422,10 @@ test("editorial workbench journey keeps workspace context across core entry poin
     expect(darkPalette.panelBackground).not.toBe(lightPalette.panelBackground);
     expect(darkPalette.panelBorder).not.toBe(lightPalette.panelBorder);
     await expect(page.locator(".shell-topbar-title")).toHaveCSS("color", darkTextPalette.inkColor);
+    await expect(page.locator('[data-sidebar-entry="account"] .sidebar-entry-label')).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(page.locator('[data-summary-item="workspace"] strong')).toHaveCSS(
       "color",
       darkTextPalette.inkColor,
@@ -433,6 +437,10 @@ test("editorial workbench journey keeps workspace context across core entry poin
 
     await navigateToTab("博客创建");
     await expect(workspaceSurface).toBeVisible();
+    await expect(workspaceSurface.locator(".page-kicker")).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(workspaceSurface.locator(".workspace-section-heading h2").first()).toHaveCSS(
       "color",
       darkTextPalette.inkColor,
@@ -445,6 +453,10 @@ test("editorial workbench journey keeps workspace context across core entry poin
       "color",
       darkTextPalette.inkColor,
     );
+    await expect(workspaceSurface.locator(".page-signal .section-eyebrow").first()).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await workspaceThemePreviewTrigger.click();
     await expect(workspaceThemePreviewOverlay).toBeVisible();
     await expect(workspaceThemePreviewOverlay.locator(".theme-preview-dialog-copy h3")).toHaveCSS(
@@ -465,6 +477,10 @@ test("editorial workbench journey keeps workspace context across core entry poin
     await expect(themeSurface).toBeVisible();
     await expect(themeSurface.locator(".page-title")).toHaveCSS("color", darkTextPalette.inkColor);
     await expect(themeStudioHelper).toHaveCSS("color", darkTextPalette.mutedColor);
+    await expect(themeSurface.locator(".theme-studio-heading .section-eyebrow").first()).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(themeSurface.locator(".theme-studio-heading h2").first()).toHaveCSS(
       "color",
       darkTextPalette.inkColor,
@@ -484,6 +500,10 @@ test("editorial workbench journey keeps workspace context across core entry poin
 
     await navigateToTab("发布与备份");
     await expect(publishSurface).toBeVisible();
+    await expect(publishWorkbenchSurface.locator(".section-eyebrow").first()).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(publishWorkbenchSurface.locator(".workflow-section-heading h2").first()).toHaveCSS(
       "color",
       darkTextPalette.inkColor,
@@ -497,9 +517,17 @@ test("editorial workbench journey keeps workspace context across core entry poin
 
     await navigateToTab("导入恢复");
     await expect(importGithubWorkbench).toBeVisible();
+    await expect(importSurface.locator(".page-kicker")).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(importPageLead).toHaveCSS("color", darkTextPalette.mutedColor);
     await expect(importResultNote).toHaveCSS("color", darkTextPalette.mutedColor);
     await expect(importPageLink).toHaveCSS("color", darkTextPalette.highlightColor);
+    await expect(importSurface.locator("label").first()).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(importDeployRepoSelect).toHaveValue(
       "https://github.com/editorial-e2e/editorial-e2e.github.io.git",
     );
@@ -513,6 +541,10 @@ test("editorial workbench journey keeps workspace context across core entry poin
     await expect(importDestinationInput).toHaveValue("");
 
     await navigateToTab("教程中心");
+    await expect(page.locator("#tutorial-home .page-kicker")).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
     await expect(page.locator("#tutorial-home .tutorial-directory-card h3").first()).toHaveCSS(
       "color",
       darkTextPalette.inkColor,
@@ -538,6 +570,20 @@ test("editorial workbench journey keeps workspace context across core entry poin
       darkTextPalette.mutedColor,
     );
 
+    await openShellPopupFromEntry({
+      entry: shellAccountEntry,
+      activeBlock: shellAccountBlock,
+    });
+    await expect(shellAccountBlock.locator(".status-label").first()).toHaveCSS(
+      "color",
+      darkTextPalette.highlightColor,
+    );
+    await expect(shellRefreshAuthButton).toBeFocused();
+    await expect(shellUpdatesBlock).toBeVisible();
+    await expect(shellEnvironmentBlock).toBeVisible();
+    await shellPopupDismiss.click();
+    await expect(shellSidebarPopupOverlay).toBeHidden();
+
     await openShellPopupFromEntry({
       entry: shellAppearanceEntry,
       activeBlock: shellAppearanceBlock,
@@ -553,16 +599,6 @@ test("editorial workbench journey keeps workspace context across core entry poin
     const restoredLightPalette = await expectRepresentativeSurfacesToMatchAppearance("light");
     expect(restoredLightPalette).toEqual(lightPalette);
 
-    await openShellPopupFromEntry({
-      entry: shellAccountEntry,
-      activeBlock: shellAccountBlock,
-    });
-    await expect(shellRefreshAuthButton).toBeFocused();
-    await expect(shellUpdatesBlock).toBeVisible();
-    await expect(shellEnvironmentBlock).toBeVisible();
-    await shellPopupDismiss.click();
-    await expect(shellSidebarPopupOverlay).toBeHidden();
-
     await navigateToTab("博客创建");
     await expect(workspaceSurface).toBeVisible();
     await setScrollTop(0);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "blog-for-everyone",
-    "version": "1.3.0",
+    "version": "0.1.3",
     "description": "Beginner-friendly blog builder platform for Hexo and Hugo",
     "main": "src/main/main.js",
     "author": "BlogForEveryone",

scripts/e2e-real-workspace-verify.js

@@ -210,6 +210,7 @@ async function main() {
         rows
     };
 
+    fs.mkdirSync(path.dirname(REPORT_PATH), { recursive: true });
     fs.writeFileSync(REPORT_PATH, `${JSON.stringify(report, null, 2)}\n`, 'utf8');
     console.log(JSON.stringify(report, null, 2));
 

src/renderer/src/App.facade.test.mjs

@@ -191,3 +191,33 @@ test("App shell styles route dark editorial titles and primary text through the
     "expected dark popup theme tokens to match the approved warmer shell palette",
   );
 });
+
+test("App shell styles keep dark metadata labels and mixed card surfaces readable across the workflow shell", async () => {
+  const stylesSource = await readFile(stylesPath, "utf8");
+
+  assert.match(
+    stylesSource,
+    /\.layout--editorial\[data-shell-appearance="dark"\] \.page-kicker,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.section-eyebrow,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.status-label,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] label,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.sidebar-entry-label[\s\S]*color:\s*var\(--shell-highlight\);/,
+    "expected dark workflow labels, eyebrows, and field labels to use a brighter shell highlight token",
+  );
+  assert.match(
+    stylesSource,
+    /\.layout--editorial\[data-shell-appearance="dark"\] \.context-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.info-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-directory-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-flow-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-action-panel,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.theme-studio-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.theme-asset-preview-card[\s\S]*background:[\s\S]*var\(--shell-panel-alt\);[\s\S]*(border-color:\s*var\(--shell-line\);|border:\s*1px solid var\(--shell-line\);)[\s\S]*color:\s*var\(--shell-ink\);/,
+    "expected mixed workflow cards to switch fully onto dark shell surfaces instead of keeping light-card backgrounds in dark mode",
+  );
+  assert.match(
+    stylesSource,
+    /\.shell-popup-theme\[data-shell-appearance="dark"\] \.status-label[\s\S]*color:\s*var\(--shell-highlight\);/,
+    "expected popup section labels to use the brighter shell highlight token in dark mode",
+  );
+  assert.match(
+    stylesSource,
+    /\.shell-popup-theme\[data-shell-appearance="dark"\] \.shell-popup-block[\s\S]*background:[\s\S]*var\(--shell-panel-alt\);[\s\S]*(border-color:\s*var\(--shell-line\);|border:\s*1px solid var\(--shell-line\);)[\s\S]*color:\s*var\(--shell-ink\);/,
+    "expected popup blocks to use dark shell card surfaces instead of inheriting lighter mixed backgrounds",
+  );
+  assert.match(
+    stylesSource,
+    /\.layout--editorial\[data-shell-appearance="dark"\] \.shell-topbar \.page-kicker,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.shell-summary \.status-label,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.shell-popup-panel \.status-label,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.sidebar-entry-label[\s\S]*color:\s*var\(--shell-highlight\);/,
+    "expected shell-specific metadata labels to keep the brighter highlight token instead of falling back to muted dark-shell copy",
+  );
+});

src/renderer/src/styles.css

@@ -2712,6 +2712,14 @@ a:hover {
   color: var(--shell-muted);
 }
 
+.layout--editorial[data-shell-appearance="dark"] .page-kicker,
+.layout--editorial[data-shell-appearance="dark"] .section-eyebrow,
+.layout--editorial[data-shell-appearance="dark"] .status-label,
+.layout--editorial[data-shell-appearance="dark"] label,
+.layout--editorial[data-shell-appearance="dark"] .sidebar-entry-label {
+  color: var(--shell-highlight);
+}
+
 .layout--editorial[data-shell-appearance="dark"] .modal-panel {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
@@ -2769,6 +2777,23 @@ a:hover {
   text-decoration-color: rgba(245, 234, 223, 0.72);
 }
 
+.layout--editorial[data-shell-appearance="dark"] .context-card,
+.layout--editorial[data-shell-appearance="dark"] .info-card,
+.layout--editorial[data-shell-appearance="dark"] .tutorial-directory-card,
+.layout--editorial[data-shell-appearance="dark"] .tutorial-flow-card,
+.layout--editorial[data-shell-appearance="dark"] .tutorial-action-panel,
+.layout--editorial[data-shell-appearance="dark"] .theme-studio-card,
+.layout--editorial[data-shell-appearance="dark"] .theme-asset-preview-card {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
+    var(--shell-panel-alt);
+  border: 1px solid var(--shell-line);
+  color: var(--shell-ink);
+  box-shadow:
+    0 18px 34px rgba(var(--shell-shadow-rgb), 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
 .layout--editorial .workflow-inline-panel {
   background: var(--shell-panel-alt);
   border: 1px dashed var(--shell-line);
@@ -2844,6 +2869,13 @@ a:hover {
   color: var(--shell-muted);
 }
 
+.layout--editorial[data-shell-appearance="dark"] .shell-topbar .page-kicker,
+.layout--editorial[data-shell-appearance="dark"] .shell-summary .status-label,
+.layout--editorial[data-shell-appearance="dark"] .shell-popup-panel .status-label,
+.layout--editorial[data-shell-appearance="dark"] .sidebar-entry-label {
+  color: var(--shell-highlight);
+}
+
 .layout--editorial .sidebar-nav {
   display: grid;
   gap: 16px;
@@ -2999,6 +3031,21 @@ a:hover {
   --shell-selected-line: rgba(255, 255, 255, 0.22);
 }
 
+.shell-popup-theme[data-shell-appearance="dark"] .status-label {
+  color: var(--shell-highlight);
+}
+
+.shell-popup-theme[data-shell-appearance="dark"] .shell-popup-block {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
+    var(--shell-panel-alt);
+  border-color: var(--shell-line);
+  color: var(--shell-ink);
+  box-shadow:
+    0 18px 34px rgba(var(--shell-shadow-rgb), 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
 .shell-popup-overlay {
   position: fixed;
   inset: 0;

src/renderer/src/views/ThemeConfigView.redesign.test.mjs

@@ -169,4 +169,9 @@ test("ThemeConfigView keeps dark editorial studio titles and primary asset text
     /\.layout--editorial\[data-shell-appearance="dark"\] \.theme-studio-note \.section-helper,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.theme-studio-status-card \.status-detail,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.theme-asset-preview-card span[\s\S]*color:\s*var\(--shell-muted\);/,
     "expected theme studio supporting copy to use the shell muted token in dark mode",
   );
+  assert.match(
+    stylesSource,
+    /\.layout--editorial\[data-shell-appearance="dark"\] \.theme-studio-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.theme-asset-preview-card[\s\S]*background:[\s\S]*var\(--shell-panel-alt\);[\s\S]*border-color:\s*var\(--shell-line\);[\s\S]*color:\s*var\(--shell-ink\);/,
+    "expected theme studio cards and asset preview cards to stop using light card surfaces in dark mode",
+  );
 });

src/renderer/src/views/TutorialCenterView.redesign.test.mjs

@@ -131,4 +131,9 @@ test("TutorialCenterView keeps dark-mode tutorial titles and body copy on readab
     /\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-directory-card \.section-helper,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-flow-card \.checklist,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-action-panel \.section-helper,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-lesson-card \.section-helper,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-lesson-card \.checklist,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-callout \.section-helper[\s\S]*color:\s*var\(--shell-muted\);/,
     "expected tutorial body copy and checklist text to use the shell muted token in dark mode",
   );
+  assert.match(
+    stylesSource,
+    /\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-directory-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-flow-card,[\s\S]*\.layout--editorial\[data-shell-appearance="dark"\] \.tutorial-action-panel[\s\S]*background:[\s\S]*var\(--shell-panel-alt\);[\s\S]*border-color:\s*var\(--shell-line\);[\s\S]*color:\s*var\(--shell-ink\);/,
+    "expected tutorial directory and workflow cards to use dark shell card surfaces instead of retaining light card styling",
+  );
 });