fix: Extract hardcoded color from syntax.scss

Syntax highlighting is hardcoded to support dark mode so I extract them into variables to enable customization.
2025-03-08 15:21:48 +07:00
parent babd08dfba
commit 232748983c
6 changed files with 166 additions and 100 deletions
--- a/assets/css/color/blue.scss
+++ b/assets/css/color/blue.scss
@@ -1,8 +1,21 @@
 :root {
-  --accent: #23B0FF;
-  --accent-contrast-color: black;
-  --article-link-color: var(inherit);
-  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
-  --border-color: rgba(255, 255, 255, .1);
-  --color: white;
+    --accent: #23b0ff;
+    --accent-contrast-color: black;
+    --article-link-color: var(inherit);
+    --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --color: white;
+
+    // Use in code syntax highlighting
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-comment-color: rgba(255, 255, 255, 0.3);
+    --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
+    --syntax-line-highlight-color: hsl(24, 20%, 95%);
+    --syntax-line-highlight-box-shadow: white;
+    --syntax-code-border-color: rgba(255, 255, 255, 0.1);
+    --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
+    --syntax-code-copy-button-color: #bbb;
+    --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
 }
--- a/assets/css/color/green.scss
+++ b/assets/css/color/green.scss
@@ -1,8 +1,21 @@
 :root {
-  --accent: #78E2A0;
-  --accent-contrast-color: black;
-  --article-link-color: var(inherit);
-  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
-  --border-color: rgba(255, 255, 255, .1);
-  --color: white;
+    --accent: #78e2a0;
+    --accent-contrast-color: black;
+    --article-link-color: var(inherit);
+    --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --color: white;
+
+    // Use in code syntax highlighting
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-comment-color: rgba(255, 255, 255, 0.3);
+    --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
+    --syntax-line-highlight-color: hsl(24, 20%, 95%);
+    --syntax-line-highlight-box-shadow: white;
+    --syntax-code-border-color: rgba(255, 255, 255, 0.1);
+    --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
+    --syntax-code-copy-button-color: #bbb;
+    --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
 }
--- a/assets/css/color/orange.scss
+++ b/assets/css/color/orange.scss
@@ -1,8 +1,21 @@
 :root {
-  --accent: #FFA86A;
-  --accent-contrast-color: black;
-  --article-link-color: var(inherit);
-  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
-  --border-color: rgba(255, 255, 255, .1);
-  --color: white;
+    --accent: #ffa86a;
+    --accent-contrast-color: black;
+    --article-link-color: var(inherit);
+    --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --color: white;
+
+    // Use in code syntax highlighting
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-comment-color: rgba(255, 255, 255, 0.3);
+    --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
+    --syntax-line-highlight-color: hsl(24, 20%, 95%);
+    --syntax-line-highlight-box-shadow: white;
+    --syntax-code-border-color: rgba(255, 255, 255, 0.1);
+    --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
+    --syntax-code-copy-button-color: #bbb;
+    --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
 }
--- a/assets/css/color/pink.scss
+++ b/assets/css/color/pink.scss
@@ -1,8 +1,21 @@
 :root {
-  --accent: #EE72F1;
-  --accent-contrast-color: black;
-  --article-link-color: var(inherit);
-  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
-  --border-color: rgba(255, 255, 255, .1);
-  --color: white;
+    --accent: #ee72f1;
+    --accent-contrast-color: black;
+    --article-link-color: var(inherit);
+    --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --color: white;
+
+    // Use in code syntax highlighting
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-comment-color: rgba(255, 255, 255, 0.3);
+    --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
+    --syntax-line-highlight-color: hsl(24, 20%, 95%);
+    --syntax-line-highlight-box-shadow: white;
+    --syntax-code-border-color: rgba(255, 255, 255, 0.1);
+    --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
+    --syntax-code-copy-button-color: #bbb;
+    --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
 }
--- a/assets/css/color/red.scss
+++ b/assets/css/color/red.scss
@@ -1,8 +1,21 @@
 :root {
-  --accent: #FF6266;
-  --accent-contrast-color: black;
-  --article-link-color: var(inherit);
-  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
-  --border-color: rgba(255, 255, 255, .1);
-  --color: white;
+    --accent: #ff6266;
+    --accent-contrast-color: black;
+    --article-link-color: var(inherit);
+    --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --color: white;
+
+    // Use in code syntax highlighting
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    --syntax-comment-color: rgba(255, 255, 255, 0.3);
+    --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
+    --syntax-line-highlight-color: hsl(24, 20%, 95%);
+    --syntax-line-highlight-box-shadow: white;
+    --syntax-code-border-color: rgba(255, 255, 255, 0.1);
+    --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
+    --syntax-code-copy-button-color: #bbb;
+    --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
 }