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

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>

web/assets/themes/blurple-dark.css

@@ -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;

web/assets/themes/blurple-light.css

@@ -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);
+	background-color: var(--blurple1);
-  color: var(--blurple2);
+  color: var(--blurple7);
 }
 
 /* Block quotes */

web/assets/themes/brutalist-auto.css

@@ -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);

web/assets/themes/brutalist-dark.css

@@ -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);
+  background-color: var(--almost-black);
-  color: var(--almost-black);
+  color: var(--almost-white);
-  border: var(--dashed-border);
+  border: var(--single-border);
 }
 .button:hover {
   background-color: var(--almost-black);
   color: var(--almost-white);
-  border: var(--dashed-border);
+  border: var(--thick-dashed-border);
 }
 
 /*

web/assets/themes/brutalist.css

@@ -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);
+  background: var(--almost-white);
-  color: var(--almost-white);
 }
 
 /* Block quotes */
 .status .text .content blockquote {
-  background-color: var(--almost-black);
+  background-color: var(--almost-white);
-  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);
+  background-color: var(--almost-white);
-  color: var(--almost-white);
+  color: var(--almost-black);
-  border: var(--dashed-border);
+  border: var(--single-border);
 }
 .button:hover {
   background-color: var(--almost-white);
   color: var(--almost-black);
-  border: var(--dashed-border);
+  border: var(--thick-dashed-border);
 }
 
 /*

web/assets/themes/hacker-dark.css

@@ -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;

web/assets/themes/hacker-light.css

@@ -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);
+  background: var(--whiteish);
-  color: var(--whiteish);
+  color: var(--dark-gray);
 }
 
 /* Block quotes */

web/assets/themes/programmer-socks-dark.css

@@ -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;

web/assets/themes/programmer-socks-light.css

@@ -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);
+  background: var(--whiteish);
-  color: var(--whiteish);
+  color: var(--dark-gray);
 }
 
 /* Block quotes */

web/assets/themes/soft.css

@@ -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);
+	background-color: white;
-  color: white;
+  color: var(--gray1);
 }
 
 /* Block quotes */

web/assets/themes/solarized-dark.css

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

web/assets/themes/solarized-light.css

@@ -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;
+  background-color: #93a1a1;
-  color: #93a1a1;
+  color: black;
 }
 
 /* Block quotes */

web/assets/themes/sunset-light.css

@@ -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);
+  background-color: var(--white1);
-  color: var(--white1);
+  color: var(--eggplant4);
 }
 
 /* Block quotes */

web/source/css/_prism-dark.css

@@ -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'}

web/source/css/_prism-light.css

@@ -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}

web/source/css/base.css

@@ -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";
 
 /*************************************