From 38a6b82d1374d01aeaa90a6ca7ca46f36ead6c75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Tue, 21 Apr 2026 13:48:33 -0400 Subject: [PATCH] fix(design): warm the dark mode so parchment olive actually reads MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous dark palette set chroma near zero (C=0.003) on hue 95, which is technically "warm" but visually indistinguishable from neutral black at low luminance. Screens rendered the surface as pure black, losing the "暖橄榄底色" kami promises. Raise chroma to 0.013-0.014 and shift hue from 95 (cool yellow) toward 80 (closer to olive/gold) so the warmth is perceivable. Lift the background L from 0.156 to 0.172 so it sits one step off true black. Separate card (0.296) from border (0.340) so elevation reads without a hard drop shadow. Specifically: --kami-deep-dark/--kami-near-black 0.156 C0.003 H95 -> 0.172 C0.013 H80 --kami-dark-surface 0.283 C0.003 H95 -> 0.296 C0.014 H80 --kami-dark-warm 0.336 C0.004 H95 -> 0.350 C0.014 H80 --kami-border-dark 0.283 C0.003 H95 -> 0.340 C0.014 H80 --kami-warm-silver 0.739 C0.010 H95 -> 0.770 C0.015 H85 Dark surface / border / text tokens flow through the same shifts: .dark --background / --sidebar 0.172 warm .dark --card / --popover / --secondary / --muted / --sidebar-accent 0.296 warm .dark --border / --input / --sidebar-border 0.340 warm (visible) .dark --muted-foreground / --secondary-foreground / --sidebar-foreground 0.770 warm (readable timestamps/role labels) .dark --accent 0.320 warm ink hint (selection glows ink) Light mode --foreground / --card-foreground / --popover-foreground / --warning-foreground inherit the new warmer near-black so body text on parchment also carries the olive signature. Typecheck and build:verify clean. --- src/renderer/styles.css | 64 ++++++++++++++++++++--------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/renderer/styles.css b/src/renderer/styles.css index 3d62ff80..7f125960 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -64,20 +64,20 @@ --kami-parchment: oklch(0.959 0.008 95); --kami-ivory: oklch(0.977 0.006 95); --kami-warm-sand: oklch(0.915 0.013 95); - --kami-deep-dark: oklch(0.156 0.003 95); - --kami-dark-surface: oklch(0.283 0.003 95); + --kami-deep-dark: oklch(0.172 0.013 80); + --kami-dark-surface: oklch(0.296 0.014 80); --kami-ink: oklch(0.306 0.083 258); --kami-ink-light: oklch(0.462 0.096 255); - --kami-near-black: oklch(0.156 0.003 95); - --kami-dark-warm: oklch(0.336 0.004 95); + --kami-near-black: oklch(0.172 0.013 80); + --kami-dark-warm: oklch(0.350 0.014 80); --kami-charcoal: oklch(0.403 0.006 95); --kami-olive: oklch(0.466 0.006 95); --kami-stone: oklch(0.608 0.007 95); - --kami-warm-silver: oklch(0.739 0.010 95); + --kami-warm-silver: oklch(0.770 0.015 85); --kami-border-cream: oklch(0.913 0.014 95); --kami-border-warm: oklch(0.888 0.014 95); --kami-border-soft: oklch(0.904 0.013 95); - --kami-border-dark: oklch(0.283 0.003 95); + --kami-border-dark: oklch(0.340 0.014 80); --kami-ring-warm: oklch(0.832 0.011 95); --kami-ring-deep: oklch(0.783 0.012 95); --kami-tag-tint-lightest: oklch(0.949 0.011 245); @@ -90,11 +90,11 @@ color-scheme: light; --radius: 0.5rem; --background: oklch(0.959 0.008 95); - --foreground: oklch(0.156 0.003 95); + --foreground: oklch(0.172 0.013 80); --card: oklch(0.977 0.006 95); - --card-foreground: oklch(0.156 0.003 95); + --card-foreground: oklch(0.172 0.013 80); --popover: oklch(0.977 0.006 95); - --popover-foreground: oklch(0.156 0.003 95); + --popover-foreground: oklch(0.172 0.013 80); --primary: oklch(0.306 0.083 258); --primary-foreground: oklch(0.977 0.006 95); --secondary: oklch(0.915 0.013 95); @@ -110,7 +110,7 @@ --success-foreground: oklch(0.977 0.006 95); --success-muted: oklch(0.93 0.030 145); --warning: oklch(0.72 0.100 75); - --warning-foreground: oklch(0.156 0.003 95); + --warning-foreground: oklch(0.172 0.013 80); --warning-muted: oklch(0.95 0.025 85); --caution: oklch(0.62 0.130 50); --caution-foreground: oklch(0.977 0.006 95); @@ -134,19 +134,19 @@ } .dark { - --background: oklch(0.156 0.003 95); + --background: oklch(0.172 0.013 80); --foreground: oklch(0.959 0.008 95); - --card: oklch(0.283 0.003 95); + --card: oklch(0.296 0.014 80); --card-foreground: oklch(0.959 0.008 95); - --popover: oklch(0.283 0.003 95); + --popover: oklch(0.296 0.014 80); --popover-foreground: oklch(0.959 0.008 95); --primary: oklch(0.462 0.096 255); --primary-foreground: oklch(0.959 0.008 95); - --secondary: oklch(0.283 0.003 95); - --secondary-foreground: oklch(0.739 0.010 95); - --muted: oklch(0.283 0.003 95); - --muted-foreground: oklch(0.739 0.010 95); - --accent: oklch(0.28 0.03 250); + --secondary: oklch(0.296 0.014 80); + --secondary-foreground: oklch(0.770 0.015 85); + --muted: oklch(0.296 0.014 80); + --muted-foreground: oklch(0.770 0.015 85); + --accent: oklch(0.320 0.035 245); --accent-foreground: oklch(0.959 0.008 95); --destructive: oklch(0.60 0.17 25); --destructive-foreground: oklch(0.959 0.008 95); @@ -155,26 +155,26 @@ --success-foreground: oklch(0.959 0.008 95); --success-muted: oklch(0.28 0.050 145); --warning: oklch(0.82 0.100 75); - --warning-foreground: oklch(0.156 0.003 95); + --warning-foreground: oklch(0.172 0.013 80); --warning-muted: oklch(0.28 0.050 85); --caution: oklch(0.72 0.130 50); --caution-foreground: oklch(0.959 0.008 95); --caution-muted: oklch(0.28 0.050 60); - --border: oklch(0.283 0.003 95); - --input: oklch(0.283 0.003 95); + --border: oklch(0.340 0.014 80); + --input: oklch(0.340 0.014 80); --ring: oklch(0.832 0.011 95); --chart-1: oklch(0.755 0.038 252); --chart-2: oklch(0.625 0.060 253); --chart-3: oklch(0.505 0.075 254); --chart-4: oklch(0.462 0.096 255); --chart-5: oklch(0.395 0.082 256); - --sidebar: oklch(0.156 0.003 95); - --sidebar-foreground: oklch(0.739 0.010 95); + --sidebar: oklch(0.172 0.013 80); + --sidebar-foreground: oklch(0.770 0.015 85); --sidebar-primary: oklch(0.462 0.096 255); --sidebar-primary-foreground: oklch(0.959 0.008 95); - --sidebar-accent: oklch(0.283 0.003 95); + --sidebar-accent: oklch(0.296 0.014 80); --sidebar-accent-foreground: oklch(0.959 0.008 95); - --sidebar-border: oklch(0.283 0.003 95); + --sidebar-border: oklch(0.340 0.014 80); --sidebar-ring: oklch(0.832 0.011 95); } @@ -453,7 +453,7 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before { padding: 0; border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); border-radius: calc(var(--radius) - 3px); - background: oklch(0.283 0.003 95); + background: oklch(0.296 0.014 80); color: oklch(0.959 0.008 95); overflow-x: auto; } @@ -461,7 +461,7 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before { /* Dark-surface code theme for CodeMirror code blocks inside the MDXEditor. Overrides the default cm6-theme-basic-light. Uses kami warm-charcoal palette. */ .paperclip-mdxeditor .cm-editor { - background-color: oklch(0.283 0.003 95) !important; + background-color: oklch(0.296 0.014 80) !important; color: oklch(0.959 0.008 95) !important; font-size: 1em; } @@ -473,7 +473,7 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before { } .paperclip-mdxeditor .cm-activeLineGutter { - background-color: oklch(0.283 0.003 95) !important; + background-color: oklch(0.296 0.014 80) !important; } .paperclip-mdxeditor .cm-activeLine { @@ -516,7 +516,7 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before { .paperclip-mdxeditor-content [class*="_codeBlockToolbar_"] select { background-color: oklch(0.228 0.003 95); color: oklch(0.959 0.008 95); - border-color: oklch(0.336 0.004 95); + border-color: oklch(0.350 0.014 80); } .paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:hover [class*="_codeMirrorToolbar_"], @@ -530,16 +530,16 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before { Dark-surface code blocks with compact sizing. Override prose CSS variables so prose-invert can't revert to defaults. */ .paperclip-markdown { - --tw-prose-pre-bg: oklch(0.283 0.003 95); + --tw-prose-pre-bg: oklch(0.296 0.014 80); --tw-prose-pre-code: oklch(0.959 0.008 95); - --tw-prose-invert-pre-bg: oklch(0.283 0.003 95); + --tw-prose-invert-pre-bg: oklch(0.296 0.014 80); --tw-prose-invert-pre-code: oklch(0.959 0.008 95); } .paperclip-markdown pre { border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent) !important; border-radius: calc(var(--radius) - 3px) !important; - background-color: oklch(0.283 0.003 95) !important; + background-color: oklch(0.296 0.014 80) !important; color: oklch(0.959 0.008 95) !important; padding: 0.5rem 0.65rem !important; margin: 0.4rem 0 !important;