mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-10-28 06:22:26 -05:00
[feature/frontend] Add four new monospace themes (#4199)
This pull request adds four new themes with auto light/dark switching options too! Tested for color contrast etc in firefox with all three local test rig accounts. Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4199 Co-authored-by: tobi <tobi.smethurst@protonmail.com> Co-committed-by: tobi <tobi.smethurst@protonmail.com>
This commit is contained in:
tobi
tobi
parent
f3c4ea0106
commit
6c1b674278
11 changed files with 584 additions and 0 deletions
20
README.md
20
README.md
|
|
@ -213,6 +213,26 @@ It's also easy for admins to [add their own custom themes](https://docs.gotosoci
|
|||
<figcaption>Sunset</figcaption>
|
||||
</figure>
|
||||
<hr/>
|
||||
<figure>
|
||||
<img src="https://codeberg.org/superseriousbusiness/gotosocial/raw/branch/main/docs/overrides/public/theme-hacker-dark.png"/>
|
||||
<figcaption>Hacker dark</figcaption>
|
||||
</figure>
|
||||
<hr/>
|
||||
<figure>
|
||||
<img src="https://codeberg.org/superseriousbusiness/gotosocial/raw/branch/main/docs/overrides/public/theme-hacker-light.png"/>
|
||||
<figcaption>Hacker light</figcaption>
|
||||
</figure>
|
||||
<hr/>
|
||||
<figure>
|
||||
<img src="https://codeberg.org/superseriousbusiness/gotosocial/raw/branch/main/docs/overrides/public/theme-programmer-socks-dark.png"/>
|
||||
<figcaption>Programmer socks dark</figcaption>
|
||||
</figure>
|
||||
<hr/>
|
||||
<figure>
|
||||
<img src="https://codeberg.org/superseriousbusiness/gotosocial/raw/branch/main/docs/overrides/public/theme-programmer-socks-light.png"/>
|
||||
<figcaption>Programmer socks light</figcaption>
|
||||
</figure>
|
||||
<hr/>
|
||||
</details>
|
||||
|
||||
### Easy to run
|
||||
|
|
|
|||
BIN
docs/overrides/public/theme-hacker-dark.png
Normal file
BIN
docs/overrides/public/theme-hacker-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
BIN
docs/overrides/public/theme-hacker-light.png
Normal file
BIN
docs/overrides/public/theme-hacker-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 631 KiB |
BIN
docs/overrides/public/theme-programmer-socks-dark.png
Normal file
BIN
docs/overrides/public/theme-programmer-socks-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 KiB |
BIN
docs/overrides/public/theme-programmer-socks-light.png
Normal file
BIN
docs/overrides/public/theme-programmer-socks-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
10
web/assets/themes/hacker-auto.css
Normal file
10
web/assets/themes/hacker-auto.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
theme-title: Hacker (auto)
|
||||
theme-description: Monospace theme with green highlights (adapts to system light/dark preferences)
|
||||
*/
|
||||
|
||||
/* Default to dark theme */
|
||||
@import url("hacker-dark.css");
|
||||
|
||||
@import url("hacker-light.css") screen and (prefers-color-scheme: light);
|
||||
@import url("hacker-dark.css") screen and (prefers-color-scheme: dark);
|
||||
136
web/assets/themes/hacker-dark.css
Normal file
136
web/assets/themes/hacker-dark.css
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
theme-title: Hacker dark
|
||||
theme-description: Dark gray and green monospace theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Define our cool hacker color palette, I'm in. */
|
||||
--dark-gray: #1b1b1b;
|
||||
--medium-gray: #282828;
|
||||
--light-gray: #8a8a94;
|
||||
--whiteish: #f8f8f8;
|
||||
--terminal-darker: #398224;
|
||||
--terminal: #419629;
|
||||
--terminal-lighter: #5cc93d;
|
||||
|
||||
/* Overwrite orange trim */
|
||||
--orange2: var(--terminal);
|
||||
|
||||
/* Restyle basic colors to use terminal */
|
||||
--blue1: var(--terminal-darker);
|
||||
--blue2: var(--terminal-lighter);
|
||||
--blue3: var(--terminal-lighter);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: var(--dark-gray);
|
||||
--bg-accent: var(--medium-gray);
|
||||
--fg: var(--whiteish);
|
||||
--fg-reduced: var(--light-gray);
|
||||
|
||||
/* Profile page styling */
|
||||
--profile-bg: var(--medium-gray);
|
||||
|
||||
/* Hackerize buttons */
|
||||
--button-bg: var(--terminal-darker);
|
||||
--button-fg: var(--whiteish);
|
||||
|
||||
/* Hackerize statuses */
|
||||
--status-bg: var(--medium-gray);
|
||||
--status-focus-bg: var(--medium-gray);
|
||||
--status-info-bg: var(--dark-gray);
|
||||
--status-focus-info-bg: var(--dark-gray);
|
||||
|
||||
/* Used around statuses + other items */
|
||||
--boxshadow-border: 0.15rem solid black;
|
||||
|
||||
/* Straighten borders */
|
||||
--br: 0;
|
||||
--br-inner: 0;
|
||||
}
|
||||
|
||||
/* Scroll bar + main font */
|
||||
html, body {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
scrollbar-color: var(--terminal-lighter) var(--medium-gray);
|
||||
}
|
||||
|
||||
/* Buttons font */
|
||||
button, .button,
|
||||
.status .text-spoiler > summary .button {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
}
|
||||
|
||||
/* Column headers */
|
||||
.col-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .col-header {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile .profile-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Fiddle around with borders on about sections */
|
||||
.profile .about-user .fields,
|
||||
.profile .about-user .bio,
|
||||
.profile .about-user .accountstats {
|
||||
border-left: var(--boxshadow-border);
|
||||
border-right: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .accountstats {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
.profile .about-user .fields {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Status media */
|
||||
.status .media .media-wrapper {
|
||||
border: var(--boxshadow-border);
|
||||
background: var(--dark-gray);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Status polls */
|
||||
.status .text .poll {
|
||||
background-color: var(--dark-gray);
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.status .text .poll .poll-info {
|
||||
background-color: var(--medium-gray);
|
||||
}
|
||||
|
||||
/* Code snippets */
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background: var(--dark-gray);
|
||||
color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
background-color: var(--dark-gray);
|
||||
color: var(--whiteish);
|
||||
}
|
||||
136
web/assets/themes/hacker-light.css
Normal file
136
web/assets/themes/hacker-light.css
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
theme-title: Hacker light
|
||||
theme-description: Light gray and green monospace theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Define our cool hacker color palette, I'm in. */
|
||||
--dark-gray: #1b1b1b;
|
||||
--medium-gray: #282828;
|
||||
--light-gray: #d7d7e4;
|
||||
--whiteish: #f8f8f8;
|
||||
--terminal-darker: #327220;
|
||||
--terminal: #347922;
|
||||
--terminal-lighter: #53b638;
|
||||
|
||||
/* Overwrite orange trim */
|
||||
--orange2: var(--terminal);
|
||||
|
||||
/* Restyle basic colors to use terminal */
|
||||
--blue1: var(--terminal);
|
||||
--blue2: var(--terminal);
|
||||
--blue3: var(--terminal-darker);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: var(--whiteish);
|
||||
--bg-accent: var(--light-gray);
|
||||
--fg: var(--dark-gray);
|
||||
--fg-reduced: var(--medium-gray);
|
||||
|
||||
/* Profile page styling */
|
||||
--profile-bg: var(--whiteish);
|
||||
|
||||
/* Hackerize buttons */
|
||||
--button-bg: var(--terminal-lighter);
|
||||
--button-fg: var(--dark-gray);
|
||||
|
||||
/* Hackerize statuses */
|
||||
--status-bg: var(--whiteish);
|
||||
--status-focus-bg: var(--whiteish);
|
||||
--status-info-bg: var(--light-gray);
|
||||
--status-focus-info-bg: var(--light-gray);
|
||||
|
||||
/* Used around statuses + other items */
|
||||
--boxshadow-border: 0.15rem solid black;
|
||||
|
||||
/* Straighten borders */
|
||||
--br: 0;
|
||||
--br-inner: 0;
|
||||
}
|
||||
|
||||
/* Scroll bar + main font */
|
||||
html, body {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
scrollbar-color: var(--terminal-lighter) var(--medium-gray);
|
||||
}
|
||||
|
||||
/* Buttons font */
|
||||
button, .button,
|
||||
.status .text-spoiler > summary .button {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
}
|
||||
|
||||
/* Column headers */
|
||||
.col-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .col-header {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile .profile-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Fiddle around with borders on about sections */
|
||||
.profile .about-user .fields,
|
||||
.profile .about-user .bio,
|
||||
.profile .about-user .accountstats {
|
||||
border-left: var(--boxshadow-border);
|
||||
border-right: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .accountstats {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
.profile .about-user .fields {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Status media */
|
||||
.status .media .media-wrapper {
|
||||
border: var(--boxshadow-border);
|
||||
background: var(--light-gray);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
|
||||
/* Status polls */
|
||||
.status .text .poll {
|
||||
background-color: var(--light-gray);
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.status .text .poll .poll-info {
|
||||
background-color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Code snippets */
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background: var(--dark-gray);
|
||||
color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
background-color: var(--light-gray);
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
10
web/assets/themes/programmer-socks-auto.css
Normal file
10
web/assets/themes/programmer-socks-auto.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
theme-title: Programmer socks (auto)
|
||||
theme-description: Monospace theme with pink highlights (adapts to system light/dark preferences)
|
||||
*/
|
||||
|
||||
/* Default to dark theme */
|
||||
@import url("programmer-socks-dark.css");
|
||||
|
||||
@import url("programmer-socks-light.css") screen and (prefers-color-scheme: light);
|
||||
@import url("programmer-socks-dark.css") screen and (prefers-color-scheme: dark);
|
||||
136
web/assets/themes/programmer-socks-dark.css
Normal file
136
web/assets/themes/programmer-socks-dark.css
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
theme-title: Programmer socks dark
|
||||
theme-description: Dark gray and pink theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Define our cool hacker color palette, I'm in. */
|
||||
--dark-gray: #1b1b1b;
|
||||
--medium-gray: #282828;
|
||||
--light-gray: #948a94;
|
||||
--whiteish: #f8f8f8;
|
||||
--terminal-darker: #b434ae;
|
||||
--terminal: #cc39cc;
|
||||
--terminal-lighter: #ef46f5;
|
||||
|
||||
/* Overwrite orange trim */
|
||||
--orange2: var(--terminal);
|
||||
|
||||
/* Restyle basic colors to use terminal */
|
||||
--blue1: var(--terminal-darker);
|
||||
--blue2: var(--terminal-lighter);
|
||||
--blue3: var(--terminal-lighter);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: var(--dark-gray);
|
||||
--bg-accent: var(--medium-gray);
|
||||
--fg: var(--whiteish);
|
||||
--fg-reduced: var(--light-gray);
|
||||
|
||||
/* Profile page styling */
|
||||
--profile-bg: var(--medium-gray);
|
||||
|
||||
/* Hackerize buttons */
|
||||
--button-bg: var(--terminal-darker);
|
||||
--button-fg: var(--whiteish);
|
||||
|
||||
/* Hackerize statuses */
|
||||
--status-bg: var(--medium-gray);
|
||||
--status-focus-bg: var(--medium-gray);
|
||||
--status-info-bg: var(--dark-gray);
|
||||
--status-focus-info-bg: var(--dark-gray);
|
||||
|
||||
/* Used around statuses + other items */
|
||||
--boxshadow-border: 0.15rem solid var(--terminal-darker);
|
||||
|
||||
/* Straighten borders */
|
||||
--br: 0;
|
||||
--br-inner: 0;
|
||||
}
|
||||
|
||||
/* Scroll bar + main font */
|
||||
html, body {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
scrollbar-color: var(--terminal-lighter) var(--medium-gray);
|
||||
}
|
||||
|
||||
/* Buttons font */
|
||||
button, .button,
|
||||
.status .text-spoiler > summary .button {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
}
|
||||
|
||||
/* Column headers */
|
||||
.col-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .col-header {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile .profile-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Fiddle around with borders on about sections */
|
||||
.profile .about-user .fields,
|
||||
.profile .about-user .bio,
|
||||
.profile .about-user .accountstats {
|
||||
border-left: var(--boxshadow-border);
|
||||
border-right: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .accountstats {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
.profile .about-user .fields {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Status media */
|
||||
.status .media .media-wrapper {
|
||||
border: var(--boxshadow-border);
|
||||
background: var(--dark-gray);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Status polls */
|
||||
.status .text .poll {
|
||||
background-color: var(--dark-gray);
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.status .text .poll .poll-info {
|
||||
background-color: var(--medium-gray);
|
||||
}
|
||||
|
||||
/* Code snippets */
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background: var(--dark-gray);
|
||||
color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
background-color: var(--dark-gray);
|
||||
color: var(--whiteish);
|
||||
}
|
||||
136
web/assets/themes/programmer-socks-light.css
Normal file
136
web/assets/themes/programmer-socks-light.css
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
theme-title: Programmer socks light
|
||||
theme-description: Light gray and pink theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Define our cool hacker color palette, I'm in. */
|
||||
--dark-gray: #1b1b1b;
|
||||
--medium-gray: #282828;
|
||||
--light-gray: #e4d7e3;
|
||||
--whiteish: #f8f8f8;
|
||||
--terminal-darker: #ac30ac;
|
||||
--terminal: #c43abd;
|
||||
--terminal-lighter: #eb48e2;
|
||||
|
||||
/* Overwrite orange trim */
|
||||
--orange2: var(--terminal);
|
||||
|
||||
/* Restyle basic colors to use terminal */
|
||||
--blue1: var(--terminal);
|
||||
--blue2: var(--terminal);
|
||||
--blue3: var(--terminal-darker);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: var(--whiteish);
|
||||
--bg-accent: var(--light-gray);
|
||||
--fg: var(--dark-gray);
|
||||
--fg-reduced: var(--medium-gray);
|
||||
|
||||
/* Profile page styling */
|
||||
--profile-bg: var(--whiteish);
|
||||
|
||||
/* Hackerize buttons */
|
||||
--button-bg: var(--terminal-lighter);
|
||||
--button-fg: var(--dark-gray);
|
||||
|
||||
/* Hackerize statuses */
|
||||
--status-bg: var(--whiteish);
|
||||
--status-focus-bg: var(--whiteish);
|
||||
--status-info-bg: var(--light-gray);
|
||||
--status-focus-info-bg: var(--light-gray);
|
||||
|
||||
/* Used around statuses + other items */
|
||||
--boxshadow-border: 0.15rem solid var(--terminal-darker);
|
||||
|
||||
/* Straighten borders */
|
||||
--br: 0;
|
||||
--br-inner: 0;
|
||||
}
|
||||
|
||||
/* Scroll bar + main font */
|
||||
html, body {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
scrollbar-color: var(--terminal-lighter) var(--medium-gray);
|
||||
}
|
||||
|
||||
/* Buttons font */
|
||||
button, .button,
|
||||
.status .text-spoiler > summary .button {
|
||||
font-family: 'Noto Sans Mono', monospace;
|
||||
}
|
||||
|
||||
/* Column headers */
|
||||
.col-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .col-header {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile .profile-header {
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Fiddle around with borders on about sections */
|
||||
.profile .about-user .fields,
|
||||
.profile .about-user .bio,
|
||||
.profile .about-user .accountstats {
|
||||
border-left: var(--boxshadow-border);
|
||||
border-right: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .accountstats {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
.profile .about-user .fields {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: var(--boxshadow-border);
|
||||
}
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: var(--boxshadow-border);
|
||||
}
|
||||
|
||||
/* Status media */
|
||||
.status .media .media-wrapper {
|
||||
border: var(--boxshadow-border);
|
||||
background: var(--light-gray);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
|
||||
/* Status polls */
|
||||
.status .text .poll {
|
||||
background-color: var(--light-gray);
|
||||
border: var(--boxshadow-border);
|
||||
}
|
||||
.status .text .poll .poll-info {
|
||||
background-color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Code snippets */
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background: var(--dark-gray);
|
||||
color: var(--whiteish);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
background-color: var(--light-gray);
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue