From 232748983c5a6ae9b5ca0e43e84eeab0ae4d20ce 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:21:48 +0700 Subject: [PATCH] fix: Extract hardcoded color from syntax.scss Syntax highlighting is hardcoded to support dark mode so I extract them into variables to enable customization. --- assets/css/color/blue.scss | 25 +++++-- assets/css/color/green.scss | 25 +++++-- assets/css/color/orange.scss | 25 +++++-- assets/css/color/pink.scss | 25 +++++-- assets/css/color/red.scss | 25 +++++-- assets/css/syntax.scss | 141 ++++++++++++++++++----------------- 6 files changed, 166 insertions(+), 100 deletions(-) diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss index 1988a58..0ca2e39 100644 --- 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); } diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss index b7f8ce1..52ecb54 100644 --- 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); } diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss index f5f0d7e..2023d7a 100644 --- 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); } diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss index 73a0eac..3514769 100644 --- 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); } diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss index 30b0b15..7a730ad 100644 --- 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); } diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 0018971..445ab15 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -17,7 +17,7 @@ code.language-scss, .token.number, .token.inserted, .token.important { - color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; + color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; } .token.tag-id, @@ -34,7 +34,7 @@ code.language-scss, .token.class-name, .token.constant, .token.symbol { - color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; + color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; } .token.property, @@ -44,111 +44,112 @@ code.language-scss, code.language-javascript, code.language-html, .command-line-prompt > span:before { - color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; + color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; } .token.selector, .token.tag, .token.punctuation { - color: white; + color: white; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: rgba(255, 255, 255, .3) !important; + color: var(--syntax-comment-color) !important; } .token.namespace { - opacity: .7 !important; + opacity: 0.7 !important; } pre[data-line] { - position: relative; + position: relative; } pre[class*="language-"] { - margin: 0; - padding: 0; - overflow: auto; + margin: 0; + padding: 0; + overflow: auto; } .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%); - pointer-events: none; - line-height: inherit; - white-space: pre; + --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%); + pointer-events: none; + line-height: inherit; + white-space: pre; } .line-highlight:before, .line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - /* top: .4em; */ - left: .6em; - min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%, .4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: .3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; + content: attr(data-start); + position: absolute; + /* top: .4em; */ + left: 0.6em; + min-width: 1em; + padding: 0 0.5em; + background-color: var(--syntax-line-highlight-background-color); + color: var(--syntax-line-highlight-color); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: 0.3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px var(--syntax-line-highlight-box-shadow); } .line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: .4em; + content: attr(data-end); + top: auto; + bottom: 0.4em; } .line-numbers .line-highlight:before, .line-numbers .line-highlight:after { - content: none; + content: none; } .code-toolbar { - --code-margin: 40px; - position: relative; - margin: var(--code-margin) 0; - padding: 20px; - border: 1px solid rgba(255, 255, 255, .1); + --code-margin: 40px; + position: relative; + margin: var(--code-margin) 0; + padding: 20px; + border: 1px solid var(--syntax-code-border-color); - + .code-toolbar, - + .highlight, - + .highlight .code-toolbar { - border-top: 0; - margin-top: calc(-1 * var(--code-margin)); - } - - pre, code { - border: none; - } - - code { - display: block; - color: inherit; - } - - > .toolbar { - button { - font-size: .8em !important; - background: hsla(0,0%,87.8%,.2) !important; - color: #bbb !important; - box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important; - border-radius: 0 !important; - margin: 6px !important; - padding: 10px !important; - user-select:none + + .code-toolbar, + + .highlight, + + .highlight .code-toolbar { + border-top: 0; + margin-top: calc(-1 * var(--code-margin)); + } + + pre, + code { + border: none; + } + + code { + display: block; + color: inherit; + } + + > .toolbar { + button { + font-size: 0.8em !important; + background: var(--syntax-code-copy-button-background) !important; + color: var(--syntax-code-copy-button-color) !important; + box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important; + border-radius: 0 !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; + } } - } }