gordon/re-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Extract hardcoded color from syntax.scss

Browse Source 
Syntax highlighting is hardcoded to support dark mode so I extract them into variables to enable customization.
This commit is contained in:
Vĩnh Phước
2025-03-08 15:21:48 +07:00
parent babd08dfba
commit 232748983c
6 changed files with 166 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/color/blue.scss
View File

@@ -1,8 +1,21 @@
:root { :root {
--accent: #23B0FF; --accent: #23b0ff;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, .1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --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);
} }

19
assets/css/color/green.scss
View File

@@ -1,8 +1,21 @@
:root { :root {
--accent: #78E2A0; --accent: #78e2a0;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, .1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --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);
} }

19
assets/css/color/orange.scss
View File

@@ -1,8 +1,21 @@
:root { :root {
--accent: #FFA86A; --accent: #ffa86a;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, .1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --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);
} }

19
assets/css/color/pink.scss
View File

@@ -1,8 +1,21 @@
:root { :root {
--accent: #EE72F1; --accent: #ee72f1;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, .1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --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);
} }

19
assets/css/color/red.scss
View File

@@ -1,8 +1,21 @@
:root { :root {
--accent: #FF6266; --accent: #ff6266;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, .1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --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);
} }

33
assets/css/syntax.scss
View File

@@ -57,11 +57,11 @@ code.language-html,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: rgba(255, 255, 255, .3) !important; color: var(--syntax-comment-color) !important;
} }
.token.namespace { .token.namespace {
opacity: .7 !important; opacity: 0.7 !important;
} }
pre[data-line] { pre[data-line] {
@@ -92,23 +92,23 @@ pre[class*="language-"] {
content: attr(data-start); content: attr(data-start);
position: absolute; position: absolute;
/* top: .4em; */ /* top: .4em; */
left: .6em; left: 0.6em;
min-width: 1em; min-width: 1em;
padding: 0 .5em; padding: 0 0.5em;
background-color: hsla(24, 20%, 50%, .4); background-color: var(--syntax-line-highlight-background-color);
color: hsl(24, 20%, 95%); color: var(--syntax-line-highlight-color);
font: bold 65%/1.5 sans-serif; font: bold 65%/1.5 sans-serif;
text-align: center; text-align: center;
vertical-align: .3em; vertical-align: 0.3em;
border-radius: 999px; border-radius: 999px;
text-shadow: none; text-shadow: none;
box-shadow: 0 1px white; box-shadow: 0 1px var(--syntax-line-highlight-box-shadow);
} }
.line-highlight[data-end]:after { .line-highlight[data-end]:after {
content: attr(data-end); content: attr(data-end);
top: auto; top: auto;
bottom: .4em; bottom: 0.4em;
} }
.line-numbers .line-highlight:before, .line-numbers .line-highlight:before,
@@ -121,7 +121,7 @@ pre[class*="language-"] {
position: relative; position: relative;
margin: var(--code-margin) 0; margin: var(--code-margin) 0;
padding: 20px; padding: 20px;
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid var(--syntax-code-border-color);
+ .code-toolbar, + .code-toolbar,
+ .highlight, + .highlight,
@@ -130,7 +130,8 @@ pre[class*="language-"] {
margin-top: calc(-1 * var(--code-margin)); margin-top: calc(-1 * var(--code-margin));
} }
pre, code { pre,
code {
border: none; border: none;
} }
@@ -141,14 +142,14 @@ pre[class*="language-"] {
> .toolbar { > .toolbar {
button { button {
font-size: .8em !important; font-size: 0.8em !important;
background: hsla(0,0%,87.8%,.2) !important; background: var(--syntax-code-copy-button-background) !important;
color: #bbb !important; color: var(--syntax-code-copy-button-color) !important;
box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important; box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important;
border-radius: 0 !important; border-radius: 0 !important;
margin: 6px !important; margin: 6px !important;
padding: 10px !important; padding: 10px !important;
user-select:none user-select: none;
} }
} }
} }