[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>
This commit is contained in:
tobi 2025-05-30 11:06:08 +02:00 committed by kim
commit 2c73bb3602
17 changed files with 75 additions and 31 deletions

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);
}
/*