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

1 files changed, 136 insertions, 0 deletions

diff --git a/web/assets/themes/programmer-socks-light.css b/web/assets/themes/programmer-socks-light.css
new file mode 100644
index 000000000..6a3d6cbb2
--- /dev/null
+++ b/web/assets/themes/programmer-socks-light.css
@@ -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);
+}