From 5ff4f0a2b9843c45308758e26f943b8611cc21ab Mon Sep 17 00:00:00 2001
From: hugo <hugoms@me.com>
Date: Sun, 22 Feb 2026 11:44:28 +0100
Subject: [PATCH] fix: better background (more neutral)

---
 src/main/engine/templates/partials/styles.liquid |  4 ++++
 tests/engine/BlogGenerationEngine.test.ts        | 16 ++++++++++++++++
 tests/engine/PreviewServer.test.ts               |  7 ++++---
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/main/engine/templates/partials/styles.liquid b/src/main/engine/templates/partials/styles.liquid
index 2473cde..89cbbc6 100644
--- a/src/main/engine/templates/partials/styles.liquid
+++ b/src/main/engine/templates/partials/styles.liquid
@@ -1,5 +1,9 @@
 <style>
   :root { color-scheme: light dark; }
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme]) { --pico-background-color: #13171f; }
+  }
+  [data-theme='dark'] { --pico-background-color: #13171f; }
   body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 4rem; background: var(--pico-background-color, var(--background-color)); color: var(--pico-color, var(--color)); }
   main { display: grid; gap: 1rem; }
   .blog-menu { border-top: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); border-bottom: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); padding: .4rem 0; margin: -.15rem 0 .2rem; }
diff --git a/tests/engine/BlogGenerationEngine.test.ts b/tests/engine/BlogGenerationEngine.test.ts
index 4e34891..695f2d1 100644
--- a/tests/engine/BlogGenerationEngine.test.ts
+++ b/tests/engine/BlogGenerationEngine.test.ts
@@ -186,6 +186,7 @@ describe('BlogGenerationEngine', () => {
       maxPostsPerPage: number;
       language: string;
       pageTitle: string;
+      picoTheme: string;
       categorySettings: Record<string, { renderInLists: boolean; showTitle: boolean }>;
       categoryMetadata: Record<string, { renderInLists: boolean; showTitle: boolean; title: string }>;
       menu: MenuDocument;
@@ -203,6 +204,7 @@ describe('BlogGenerationEngine', () => {
       maxPostsPerPage: options?.maxPostsPerPage,
       language: options?.language,
       pageTitle: options?.pageTitle,
+      picoTheme: options?.picoTheme as any,
       categorySettings: options?.categorySettings,
       categoryMetadata: options?.categoryMetadata,
       menu: options?.menu,
@@ -371,6 +373,20 @@ describe('BlogGenerationEngine', () => {
     expect(html).toContain('14.01.2025');
   });
 
+  it('uses anthracite page background override for all pico themes in dark mode', async () => {
+    const posts = [
+      makePost({ id: '1', slug: 'first', title: 'First Post', createdAt: new Date('2025-01-15T10:00:00Z') }),
+    ];
+
+    await generate(posts, { picoTheme: 'green' });
+
+    const indexPath = path.join(tempDir, 'html', 'index.html');
+    const html = await readFile(indexPath, 'utf-8');
+    expect(html).toContain('href="/assets/pico.green.min.css"');
+    expect(html).toContain('@media only screen and (prefers-color-scheme: dark)');
+    expect(html).toContain('--pico-background-color: #13171f;');
+  });
+
   it('generates single post pages at /{year}/{month}/{day}/{slug}/index.html', async () => {
     const posts = [
       makePost({ id: '1', slug: 'hello-world', createdAt: new Date('2025-03-15T10:00:00Z') }),
diff --git a/tests/engine/PreviewServer.test.ts b/tests/engine/PreviewServer.test.ts
index c77a85e..4b40d98 100644
--- a/tests/engine/PreviewServer.test.ts
+++ b/tests/engine/PreviewServer.test.ts
@@ -547,7 +547,7 @@ describe('PreviewServer', () => {
         async getProjectMetadata() {
           return {
             maxPostsPerPage: 50,
-            picoTheme: 'slate',
+            picoTheme: 'green',
           };
         },
       } as any,
@@ -556,12 +556,13 @@ describe('PreviewServer', () => {
 
     await server.start(0);
 
-    const response = await fetch(`${server.getBaseUrl()}/__style-preview?theme=slate&mode=dark`);
+    const response = await fetch(`${server.getBaseUrl()}/__style-preview?theme=green&mode=dark`);
     expect(response.status).toBe(200);
     const html = await response.text();
 
     expect(html).toContain('<html lang="en" data-theme="dark">');
-    expect(html).toContain('href="/assets/pico.slate.min.css"');
+    expect(html).toContain('href="/assets/pico.green.min.css"');
+    expect(html).toContain('--pico-background-color: #13171f;');
   });
 
   it('limits list routes to 50 posts', async () => {