From 1d17b9a8efe2a819158618556a56d46d34303079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C4=A9nh=20Ph=C6=B0=E1=BB=9Bc?= Date: Sat, 8 Mar 2025 15:32:53 +0700 Subject: [PATCH] feat: Add new light theme called paper --- assets/css/color/blue.scss | 1 + assets/css/color/green.scss | 1 + assets/css/color/orange.scss | 1 + assets/css/color/paper.scss | 22 ++++++++++++++++++++++ assets/css/color/pink.scss | 1 + assets/css/color/red.scss | 1 + assets/css/syntax.scss | 3 +-- static/img/theme-colors/paper.png | Bin 0 -> 208 bytes 8 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 assets/css/color/paper.scss create mode 100644 static/img/theme-colors/paper.png diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 0ca2e39..57c56e7 100644 --- a/assets/css/color/blue.scss +++ b/assets/css/color/blue.scss @@ -11,6 +11,7 @@ --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-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --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; diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index 52ecb54..d7db043 100644 --- a/assets/css/color/green.scss +++ b/assets/css/color/green.scss @@ -11,6 +11,7 @@ --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-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --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; diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index 2023d7a..475f606 100644 --- a/assets/css/color/orange.scss +++ b/assets/css/color/orange.scss @@ -11,6 +11,7 @@ --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-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --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; diff --git a/assets/css/color/paper.scss b/assets/css/color/paper.scss new file mode 100644 index 0000000..243f91e --- /dev/null +++ b/assets/css/color/paper.scss @@ -0,0 +1,22 @@ +:root { + --accent: #1d1e28; + --accent-contrast-color: white; + --article-link-color: var(inherit); + --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%); + --border-color: rgba(0, 0, 0, 0.1); + --color: black; + + // Use in code syntax highlighting + --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%); + --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000); + --syntax-value-color: color-mix(in srgb, var(--accent), black); + --syntax-comment-color: rgba(0, 0, 0, 0.3); + --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%); + --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4); + --syntax-line-highlight-color: hsl(336, 20%, 95%); + --syntax-line-highlight-box-shadow: black; + --syntax-code-border-color: rgba(0, 0, 0, 0.1); + --syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2); + --syntax-code-copy-button-color: #444; + --syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2); +} diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index 3514769..f86a24d 100644 --- a/assets/css/color/pink.scss +++ b/assets/css/color/pink.scss @@ -11,6 +11,7 @@ --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-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --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; diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index 7a730ad..a63db95 100644 --- a/assets/css/color/red.scss +++ b/assets/css/color/red.scss @@ -11,6 +11,7 @@ --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-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --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; diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 445ab15..8279dbf 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -75,13 +75,12 @@ pre[class*="language-"] { } .line-highlight { - --line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); position: absolute; left: 0; right: 0; padding: 0; margin: 0; - background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%); + background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%); pointer-events: none; line-height: inherit; white-space: pre; diff --git a/static/img/theme-colors/paper.png b/static/img/theme-colors/paper.png new file mode 100644 index 0000000000000000000000000000000000000000..974d719ee0ff5e72b63f8e05ea4ca9e7c0145130 GIT binary patch literal 208 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nET>7Fi*AsNnZFJ0t3pdfNIK=w%8 z?*C1@oD~#Q|JIA2c^Pxx?lJrQH;Vn5YM&%dc&G@jbl5*lMC`m;(`C>0PLIToIZ76D fOJ;OXStxGrHP`Tu8xAP~oyg$n>gTe~DWM4f6B|&y literal 0 HcmV?d00001