From 455fbb78b70574ae625253f5f2b2f1ad1954026e Mon Sep 17 00:00:00 2001
From: Qz <quadratz@proton.me>
Date: Wed, 29 May 2024 23:24:18 +0700
Subject: [PATCH] Fix syntax highlighting light theme in API ref (#1067)

---
 site/api/components/Class/Constructors.tsx |  4 +++-
 site/api/components/Class/Method.tsx       | 16 +++++++++++++---
 site/api/components/CodeBlock.tsx          |  9 +++++----
 site/api/components/PropertyName.tsx       |  4 ++--
 site/api/components/styles.tsx             | 18 +++++++++++++-----
 5 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/site/api/components/Class/Constructors.tsx b/site/api/components/Class/Constructors.tsx
index 4aec91a20..d74a2935c 100644
--- a/site/api/components/Class/Constructors.tsx
+++ b/site/api/components/Class/Constructors.tsx
@@ -24,7 +24,9 @@ export function Constructors({
             {v.accessibility
               ? <StyleKw>{v.accessibility}{" "}</StyleKw>
               : undefined}
-            <span style="color: rgb(98, 232, 132);">{v.name}</span>(
+            <span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">
+              {v.name}
+            </span>(
             <Params getLink={getLink}>{v.params}</Params>);
           </CodeBlock>
           {"jsDoc" in v && <P doc>{v.jsDoc?.doc}</P>}
diff --git a/site/api/components/Class/Method.tsx b/site/api/components/Class/Method.tsx
index 29281a7e3..963614ecc 100644
--- a/site/api/components/Class/Method.tsx
+++ b/site/api/components/Class/Method.tsx
@@ -73,13 +73,23 @@ export function Def(
   return (
     <>
       {method.kind == "setter"
-        ? <span style="color: #F286C4;">set{" "}</span>
+        ? (
+          <span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
+            set{" "}
+          </span>
+        )
         : method.kind == "getter"
-        ? <span style="color: #F286C4;">get{" "}</span>
+        ? (
+          <span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
+            get{" "}
+          </span>
+        )
         : (
           ""
         )}
-      <span style="color: #62E884">{method.name}</span>
+      <span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">
+        {method.name}
+      </span>
       <TypeParams_ getLink={getLink}>
         {typeParams}
       </TypeParams_>(
diff --git a/site/api/components/CodeBlock.tsx b/site/api/components/CodeBlock.tsx
index c245920d8..14a8b6cc9 100644
--- a/site/api/components/CodeBlock.tsx
+++ b/site/api/components/CodeBlock.tsx
@@ -4,12 +4,13 @@ export function CodeBlock({ children }: { children?: ComponentChildren }) {
   return (
     <>
       {"\n\n"}
-      <div class="language-ts">
+      <div class="language-ts vp-adaptive-theme">
+        <button title="Copy Code" class="copy"></button>
+        <span class="lang">ts</span>
         {"\n\n"}
-        <pre class="shiki dracula-soft">
-            <code>{children}</code>
+        <pre class="shiki shiki-themes github-light github-dark vp-code">
+          <code style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{children}</code>
         </pre>
-        {"\n\n"}
       </div>
       {"\n\n"}
     </>
diff --git a/site/api/components/PropertyName.tsx b/site/api/components/PropertyName.tsx
index 086cf18ed..da759d7c6 100644
--- a/site/api/components/PropertyName.tsx
+++ b/site/api/components/PropertyName.tsx
@@ -9,11 +9,11 @@ export function PropertyName({
 }) {
   return (
     <>
-      <span style={klass ? "" : "color:#FFB86C;font-style:italic;"}>
+      <span style={klass ? "" : "--shiki-light:#24292E;--shiki-dark:#E1E4E8;"}>
         {name}
       </span>
       {(optional || hasType) && (
-        <span style="color:#F286C4;">
+        <span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
           {optional && <>?</>}
           {hasType && <>:</>}
         </span>
diff --git a/site/api/components/styles.tsx b/site/api/components/styles.tsx
index 3b66206e8..49c955875 100644
--- a/site/api/components/styles.tsx
+++ b/site/api/components/styles.tsx
@@ -1,25 +1,33 @@
 import { ComponentChildren } from "preact";
 
 export function StyleKw({ children }: { children?: ComponentChildren }) {
-  return <span style="color:#F286C4;">{children}</span>;
+  return (
+    <span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">{children}</span>
+  );
 }
 
 export function StyleStrLit({ children }: { children?: ComponentChildren }) {
-  return <span style="color:#E7EE98;">{children}</span>;
+  return (
+    <span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">{children}</span>
+  );
 }
 
 export function StyleTypeRef({ children }: { children?: ComponentChildren }) {
   return (
-    <span style="color:#97E1F1;font-style:italic;">
+    <span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">
       {children}
     </span>
   );
 }
 
 export function StyleCallee({ children }: { children?: ComponentChildren }) {
-  return <span style="color:#62E884">{children}</span>;
+  return (
+    <span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">{children}</span>
+  );
 }
 
 export function StyleNum({ children }: { children?: ComponentChildren }) {
-  return <span style="color:#BF9EEE">{children}</span>;
+  return (
+    <span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">{children}</span>
+  );
 }