mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-10-29 11:42:24 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

[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
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 */