From f29e515147d0aa02195e45ccde8da35670299742 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 23 Nov 2025 22:57:27 +0800
Subject: [PATCH] style: improve code contrast

---
 assets/css/compiled/main.css     | 17 ++++++++++-------
 assets/css/components/chroma.css |  8 ++++++--
 tailwind.config.js               |  5 ++---
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index a6bec22e..05fcf60a 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -615,7 +615,6 @@
       color: var(--tw-prose-code);
       font-weight: 600;
       font-size: 0.875em;
-      background-color: rgba(var(--color-neutral-50), 1);
       padding-top: 3px;
       padding-bottom: 3px;
       padding-left: 5px;
@@ -1610,8 +1609,8 @@
     :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       background-color: rgba(var(--color-primary-400), 1);
     }
-    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      background-color: rgba(var(--color-neutral-700), 1);
+    :where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
     }
     :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -3068,8 +3067,8 @@
       :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
         background-color: rgba(var(--color-primary-400), 1);
       }
-      :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-        background-color: rgba(var(--color-neutral-700), 1);
+      :where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
       }
       :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
         text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -3308,15 +3307,19 @@
   .prose .chroma {
     position: static;
     border-radius: var(--radius-md);
-    background-color: rgba(var(--color-neutral-50), 1);
+    background-color: oklch(98.5% 0 0);
     color: rgba(var(--color-neutral-700), 1);
     &:is(.dark *) {
-      background-color: rgba(var(--color-neutral-700), 1);
+      background-color: oklch(21% 0.006 285.885);
     }
     &:is(.dark *) {
       color: rgba(var(--color-neutral-200), 1);
     }
   }
+  .prose .highlight:not(:has(table)) .chroma, .prose .highlight > .chroma {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .chroma .lntd, .chroma .lntd pre {
     margin: calc(var(--spacing) * 0);
     --tw-border-style: none;
diff --git a/assets/css/components/chroma.css b/assets/css/components/chroma.css
index 628714b6..16156e03 100644
--- a/assets/css/components/chroma.css
+++ b/assets/css/components/chroma.css
@@ -1,8 +1,12 @@
-
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply static rounded-md text-neutral-700 bg-zinc-50 dark:bg-zinc-900 dark:text-neutral-200;
+}
+
+.prose .highlight:not(:has(table)) .chroma,
+.prose .highlight > .chroma {
+  @apply shadow;
 }
 
 /* LineTableTD */
diff --git a/tailwind.config.js b/tailwind.config.js
index 7272b13e..27c8495a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -120,7 +120,6 @@ module.exports = {
               borderRadius: "0.25rem",
             },
             code: {
-              backgroundColor: theme("colors.neutral.50 / 1"),
               paddingTop: "3px",
               paddingBottom: "3px",
               paddingLeft: "5px",
@@ -162,8 +161,8 @@ module.exports = {
             mark: {
               backgroundColor: theme("colors.primary.400 / 1"),
             },
-            code: {
-              backgroundColor: theme("colors.neutral.700 / 1"),
+            "code:not(pre code)": {
+              backgroundColor: theme("colors.zinc.900 / 0.7"),
             },
             "a.active": {
               "text-decoration-color": theme("colors.primary.400 / 1"),