SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[feature/frontend] Respect color scheme preference for highlighted code blocks (#4201)

Browse Source 
That's it! It just conditionally imports prism light or prism dark depending on the theme.

Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4201
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>
This commit is contained in:
tobi
2025-05-30 11:06:08 +02:00
committed by kim
parent 6c1b674278
commit 2c73bb3602
17 changed files with 75 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/assets/themes/blurple-dark.css
View File

@@ -3,6 +3,9 @@
theme-description: Official dark blurple theme
*/
/* Use dark code highlights. */
@import url("../dist/_prism-dark.css");
:root {
/* Define our nice blurple palette */
--blurple1: #ebe6f8;

7
web/assets/themes/blurple-light.css
View File

@@ -3,6 +3,9 @@
theme-description: Official light blurple theme
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define our nice blurple palette */
--blurple1: #ebe6f8;
@@ -90,8 +93,8 @@ html, body {
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background-color: var(--blurple7);
color: var(--blurple2);
background-color: var(--blurple1);
color: var(--blurple7);
}
/* Block quotes */

2
web/assets/themes/brutalist-auto.css
View File

@@ -4,7 +4,7 @@
*/
/* Default to brutalist theme */
@import url("brutalist.css");
@import url("brutalist-dark.css");
@import url("brutalist.css") screen and (prefers-color-scheme: light);
@import url("brutalist-dark.css") screen and (prefers-color-scheme: dark);

13
web/assets/themes/brutalist-dark.css
View File

@@ -3,6 +3,9 @@
theme-description: (Pseudo-)monochrome brutality (dark version)
*/
/* Use dark code highlights. */
@import url("../dist/_prism-dark.css");
:root {
/* Define our color palette, two whole colors, wow! */
--almost-black: #06170e;
@@ -34,6 +37,7 @@
/* Used around statuses + other items */
--double-border: 0.5rem double var(--almost-white);
--dashed-border: 0.1rem dashed var(--almost-white);
--thick-dashed-border: 0.2rem dashed var(--almost-white);
--single-border: 0.2rem solid var(--almost-white);
/* Override some border stuff */
@@ -98,7 +102,6 @@ html, body {
.status .text .content pre,
.status .text .content code {
background: var(--almost-black);
color: var(--almost-white);
}
/* Block quotes */
@@ -136,14 +139,14 @@ html, body {
/* Make show more/less buttons more legible */
.button {
background-color: var(--almost-white);
color: var(--almost-black);
border: var(--dashed-border);
background-color: var(--almost-black);
color: var(--almost-white);
border: var(--single-border);
}
.button:hover {
background-color: var(--almost-black);
color: var(--almost-white);
border: var(--dashed-border);
border: var(--thick-dashed-border);
}
/*

19
web/assets/themes/brutalist.css
View File

@@ -3,6 +3,9 @@
theme-description: (Pseudo-)monochrome brutality
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define our color palette, two whole colors, wow! */
--almost-black: #06170e;
@@ -34,6 +37,7 @@
/* Used around statuses + other items */
--double-border: 0.5rem double var(--almost-black);
--dashed-border: 0.1rem dashed var(--almost-black);
--thick-dashed-border: 0.2rem dashed var(--almost-black);
--single-border: 0.2rem solid var(--almost-black);
/* Override some border stuff */
@@ -92,14 +96,13 @@ html, body {
/* Code snippets */
.status .text .content pre,
.status .text .content code {
background: var(--almost-black);
color: var(--almost-white);
background: var(--almost-white);
}
/* Block quotes */
.status .text .content blockquote {
background-color: var(--almost-black);
color: var(--almost-white);
background-color: var(--almost-white);
color: var(--almost-black);
}
/* Polls */
@@ -131,14 +134,14 @@ html, body {
/* Make show more/less buttons more legible */
.button {
background-color: var(--almost-black);
color: var(--almost-white);
border: var(--dashed-border);
background-color: var(--almost-white);
color: var(--almost-black);
border: var(--single-border);
}
.button:hover {
background-color: var(--almost-white);
color: var(--almost-black);
border: var(--dashed-border);
border: var(--thick-dashed-border);
}
/*

3
web/assets/themes/hacker-dark.css
View File

@@ -3,6 +3,9 @@
theme-description: Dark gray and green monospace theme
*/
/* Use dark code highlights. */
@import url("../dist/_prism-dark.css");
:root {
/* Define our cool hacker color palette, I'm in. */
--dark-gray: #1b1b1b;

7
web/assets/themes/hacker-light.css
View File

@@ -3,6 +3,9 @@
theme-description: Light gray and green monospace theme
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define our cool hacker color palette, I'm in. */
--dark-gray: #1b1b1b;
@@ -125,8 +128,8 @@ button, .button,
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background: var(--dark-gray);
color: var(--whiteish);
background: var(--whiteish);
color: var(--dark-gray);
}
/* Block quotes */

3
web/assets/themes/programmer-socks-dark.css
View File

@@ -3,6 +3,9 @@
theme-description: Dark gray and pink theme
*/
/* Use dark code highlights. */
@import url("../dist/_prism-dark.css");
:root {
/* Define our cool hacker color palette, I'm in. */
--dark-gray: #1b1b1b;

7
web/assets/themes/programmer-socks-light.css
View File

@@ -3,6 +3,9 @@
theme-description: Light gray and pink theme
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define our cool hacker color palette, I'm in. */
--dark-gray: #1b1b1b;
@@ -125,8 +128,8 @@ button, .button,
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background: var(--dark-gray);
color: var(--whiteish);
background: var(--whiteish);
color: var(--dark-gray);
}
/* Block quotes */

7
web/assets/themes/soft.css
View File

@@ -3,6 +3,9 @@
theme-description: Pastel pink and blue with dark magenta trim
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define our palette */
--soft-pink: rgb(255, 199, 234);
@@ -134,8 +137,8 @@ html, body {
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background-color: var(--gray1);
color: white;
background-color: white;
color: var(--gray1);
}
/* Block quotes */

3
web/assets/themes/solarized-dark.css
View File

@@ -27,6 +27,9 @@
THE SOFTWARE.
*/
/* Use dark code highlights. */
@import url("../dist/_prism-dark.css");
:root {
/* Define solarized palette */
--base03: #002b36; /* Background. */

7
web/assets/themes/solarized-light.css
View File

@@ -27,6 +27,9 @@
THE SOFTWARE.
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define solarized palette */
--base3: #fdf6e3; /* Background. */
@@ -135,8 +138,8 @@ html, body {
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background-color: black;
color: #93a1a1;
background-color: #93a1a1;
color: black;
}
/* Block quotes */

7
web/assets/themes/sunset-light.css
View File

@@ -3,6 +3,9 @@
theme-description: Official light orange/yellow theme.
*/
/* Use light code highlights. */
@import url("../dist/_prism-light.css");
:root {
/* Define our palette */
--eggshell: #fff6eb;
@@ -96,8 +99,8 @@ html, body {
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background-color: var(--eggplant4);
color: var(--white1);
background-color: var(--white1);
color: var(--eggplant4);
}
/* Block quotes */

2
web/source/css/_prism.css → web/source/css/_prism-dark.css
View File

@@ -1,4 +1,4 @@
/* PrismJS 1.29.0
/* PrismJS 1.30.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+csharp+cpp+docker+elixir+erlang+go+go-module+ini+java+json+kotlin+lua+makefile+markup-templating+nginx+nix+perl+php+promql+python+r+jsx+tsx+ruby+rust+scala+sql+swift+typescript&plugins=show-invisibles+show-language+toolbar+copy-to-clipboard */
code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
.token.cr,.token.lf,.token.space,.token.tab:not(:empty){position:relative}.token.cr:before,.token.lf:before,.token.space:before,.token.tab:not(:empty):before{color:grey;opacity:.6;position:absolute}.token.tab:not(:empty):before{content:'\21E5'}.token.cr:before{content:'\240D'}.token.crlf:before{content:'\240D\240A'}.token.lf:before{content:'\240A'}.token.space:before{content:'\00B7'}

5
web/source/css/_prism-light.css Normal file
View File

@@ -0,0 +1,5 @@
/* PrismJS 1.30.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+c+csharp+cpp+docker+elixir+erlang+go+go-module+ini+java+json+kotlin+lua+makefile+markup-templating+nginx+nix+perl+php+promql+python+r+jsx+tsx+ruby+rust+scala+sql+swift+typescript&plugins=show-invisibles+show-language+toolbar+copy-to-clipboard */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
.token.cr,.token.lf,.token.space,.token.tab:not(:empty){position:relative}.token.cr:before,.token.lf:before,.token.space:before,.token.tab:not(:empty):before{color:grey;opacity:.6;position:absolute}.token.tab:not(:empty):before{content:'\21E5'}.token.cr:before{content:'\240D'}.token.crlf:before{content:'\240D\240A'}.token.lf:before{content:'\240A'}.token.space:before{content:'\00B7'}
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}

5
web/source/css/base.css
View File

@@ -22,7 +22,10 @@
****************************************/
@import "modern-normalize/modern-normalize.css";
@import "./_prism.css";
/* Default to dark prism, choose light if prefers-color-scheme light */
@import url("_prism-dark.css");
@import url("_prism-light.css") screen and (prefers-color-scheme: light);
@import "./_fonts.css";
/*************************************

6
web/source/frontend/prism.js
View File

File diff suppressed because one or more lines are too long