[feature] User-selectable preset CSS themes for accounts (#2777)

* [feature] User-selectable preset themes

* docs, more theme stuff

* lint, tests

* fix css name

* correct some little issues

* add another theme

* fix poll background

* okay last theme i swear

* make retrieval of apimodel themes more conventional

* preallocate stylesheet slices

5 files changed, 564 insertions, 0 deletions

diff --git a/web/assets/themes/blurple-dark.css b/web/assets/themes/blurple-dark.css
new file mode 100644
index 000000000..7e4a9cc9a
--- /dev/null
+++ b/web/assets/themes/blurple-dark.css
@@ -0,0 +1,92 @@
+/*
+  theme-title: Blurple (dark)
+  theme-description: Official dark blurple theme
+*/
+
+:root {
+  /* Define our nice blurple palette */
+  --blurple1: #ffffff;
+  --blurple2: #ebe6f8;
+  --blurple3: #d6cceb;
+  --blurple4: #c2b3e1;
+  --blurple5: #ad99d7;
+  --blurple6: #9980cd;
+  --blurple7: #8566c2;
+  --blurple8: #704db8;
+  --blurple9: #5c33ae;
+  --blurple10: #471aa4;
+  --blurple11: #33009a;
+  --blurple12: #170044;
+
+  /* Restyle basic colors to use blurple */
+  --blue1: var(--blurple1);
+  --blue2: var(--blurple2);
+  --blue3: var(--blurple3);
+
+  /* Basic page styling (background + foreground) */
+  --bg: var(--blurple12);
+  --bg-accent: var(--blurple11);
+  --fg: var(--blurple1);
+  --fg-reduced: var(--blurple3);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--blurple11);
+
+  /* Blurpleize buttons */
+  --button-bg: var(--blurple2);
+  --button-fg: var(--blurple11);
+
+  /* Blurpleize statuses */
+  --status-bg: var(--blurple11);
+  --status-focus-bg: var(--blurple11);
+  --status-info-bg: var(--blurple9);
+  --status-focus-info-bg: var(--blurple9);
+
+  /* Used around statuses + other items */
+  --boxshadow-border: 0.08rem solid black;
+}
+
+/* Scroll bar */
+html, body {
+  scrollbar-color: var(--blurple8) var(--blurple12);
+}
+
+/* Profile fields */
+.profile .about-user .fields .field {
+  border-bottom: 0.1rem solid var(--blurple8);
+}
+.profile .about-user .fields .field:first-child {
+  border-top: 0.1rem solid var(--blurple8);
+}
+
+/* Status media */
+.status .media .media-wrapper {
+  border: 0.08rem solid var(--blurple9);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--blue2);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: var(--blurple11);
+}
+
+/* Status polls */
+.status .text .poll {
+  background-color: var(--bg);
+}
+.status .text .poll .poll-info {
+  background-color: var(--blurple11);
+}
+
+/* Code snippets */
+pre, pre[class*="language-"],
+code, code[class*="language-"] {
+	background-color: var(--blurple12);
+  color: var(--fg-reduced);
+}
+
+/* Block quotes */
+blockquote {
+  background-color: var(--blurple12);
+  color: var(--fg-reduced);
+}
diff --git a/web/assets/themes/blurple-light.css b/web/assets/themes/blurple-light.css
new file mode 100644
index 000000000..7f5811401
--- /dev/null
+++ b/web/assets/themes/blurple-light.css
@@ -0,0 +1,94 @@
+/*
+  theme-title: Blurple (light)
+  theme-description: Official light blurple theme
+*/
+
+:root {
+  /* Define our nice blurple palette */
+  --blurple1: #ffffff;
+  --blurple2: #ebe6f8;
+  --blurple3: #d6cceb;
+  --blurple4: #c2b3e1;
+  --blurple5: #ad99d7;
+  --blurple6: #9980cd;
+  --blurple7: #8566c2;
+  --blurple8: #704db8;
+  --blurple9: #5c33ae;
+  --blurple10: #471aa4;
+  --blurple11: #33009a;
+  --blurple12: #170044;
+
+  /* Restyle basic colors to use blurple */
+  --white1: var(--blurple2);
+  --white2: var(--blurple3);
+  --blue1: var(--blurple6);
+  --blue2: var(--blurple8);
+  --blue3: var(--blurple10);
+
+  /* Basic page styling (background + foreground) */
+  --bg: linear-gradient(var(--blurple2), var(--blurple1));
+  --bg-accent: var(--white2);
+  --fg: var(--gray1);
+  --fg-reduced: var(--gray2);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--white2);
+
+  /* Blurpleize buttons */
+  --button-bg: var(--blue2);
+  --button-fg: var(--white1);
+
+  /* Blurpleize statuses */
+  --status-bg: var(--white1);
+  --status-focus-bg: var(--white1);
+  --status-info-bg: var(--white2);
+  --status-focus-info-bg: var(--white2);
+
+  /* Used around statuses + other items */
+  --boxshadow-border: 0.08rem solid var(--blurple10);
+}
+
+/* Scroll bar */
+html, body {
+  scrollbar-color: var(--blurple8) var(--blurple2);
+}
+
+/* Profile fields */
+.profile .about-user .fields .field {
+  border-bottom: 0.1rem solid var(--blurple10);
+}
+.profile .about-user .fields .field:first-child {
+  border-top: 0.1rem solid var(--blurple10);
+}
+
+/* Status media */
+.status .media .media-wrapper {
+  border: 0.08rem solid var(--blurple10);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--blue2);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: var(--blurple2);
+}
+
+/* Status polls */
+.status .text .poll {
+  background-color: var(--white2);
+}
+.status .text .poll .poll-info {
+  background-color: var(--white1);
+}
+
+/* Code snippets */
+pre, pre[class*="language-"],
+code, code[class*="language-"] {
+	background-color: var(--blurple12);
+  color: var(--blurple2);
+}
+
+/* Block quotes */
+blockquote {
+	background-color: var(--blurple1);
+  color: var(--blurple12);
+}
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
new file mode 100644
index 000000000..c6b1623ee
--- /dev/null
+++ b/web/assets/themes/midnight-trip.css
@@ -0,0 +1,159 @@
+/*
+  theme-title: Midnight Trip
+  theme-description: Woah
+*/
+
+/* Theme colors */
+:root {
+  --acid-green: rgb(63, 255, 0);
+  --acid-green-light: #79FF4D;
+  --acid-green-dark: #269900;
+  --magenta: rgb(153, 50, 204);
+  --darkred: rgb(58, 0, 15);
+  --darkblue: rgb(0, 0, 58);
+  --darkmagenta: rgb(47, 1, 65);
+
+  /* Override */
+  --orange2: var(--acid-green);
+  --gray1: rgb(20, 21, 23);
+  --blue1: var(--acid-green-dark);
+  --blue2: var(--acid-green-light);
+  --blue3: var(--acid-green);
+}
+
+body {
+  background: linear-gradient(-45deg, black, var(--darkmagenta), var(--darkblue), var(--darkred));
+  background-size: 400% 400%;
+  height: 100%;
+}
+
+@media not (prefers-reduced-motion) {
+  body {
+    animation: gradient 30s ease infinite;
+  }
+  
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+}
+
+html, body {
+  /* Funky scroll bar */
+  scrollbar-color: var(--acid-green) var(--gray1);
+}
+
+/* Instance display name */
+.page-header {
+  grid-column: 2;
+  align-self: start;
+  margin: 1rem 0 1rem 0;
+  background-color: var(--gray1);
+  border: 0.25rem solid var(--magenta);
+  border-radius: var(--br);
+}
+
+/* Header card */
+.profile .profile-header {
+  background-color: var(--gray1);
+  border: 0.25rem solid var(--magenta);
+}
+
+/* About + Pinned posts headers */
+.profile .col-header {
+  background: var(--gray1);
+  border: 0.25rem solid var(--magenta);
+}
+
+.profile .about-user .col-header {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Make about sections transparent */
+.profile .about-user .fields, .profile .about-user .bio, .profile .about-user .accountstats {
+  background: var(--gray1);
+  border-left: 0.25rem solid var(--magenta);
+  border-right: 0.25rem solid var(--magenta);
+}
+
+/* Fiddle around with borders on about sections */
+.profile .about-user .fields .field:first-child {
+  border-top: 0.25rem dashed var(--magenta);
+}
+.profile .about-user .fields .field {
+  border-bottom: 0.25rem dashed var(--magenta);
+}
+.profile .about-user .accountstats {
+  border-top: 0.25rem dashed var(--magenta);
+  border-bottom: 0.25rem solid var(--magenta);
+}
+
+/* Statuses + threads */
+
+/* Thread column header */
+.thread .col-header {
+  background: var(--gray1);
+  border: 0.25rem solid var(--magenta);
+}
+
+/* Main status body */
+.status, .status.expanded {
+  background: var(--gray1);
+  border: 0.25rem solid var(--magenta);
+}
+
+/* Code snippets */
+.status .text .content pre, .status .text .content code {
+  background: black;
+  color: var(--white2);
+}
+
+/* Block quotes */
+.status .text .content blockquote {
+  background-color: black;
+}
+
+/* Media wrapper for attachments */
+.status .media .media-wrapper {
+  background: var(--bg-nearly-opaque);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  border: 0.2rem dashed var(--magenta);
+}
+
+/* Polls */
+.status .text .poll {
+  background-color: black;
+  border: 0.25rem solid var(--magenta);
+}
+
+.status .text .poll .poll-info {
+  background-color: black;
+}
+
+/* Status info bars */
+.status .status-info, .status.expanded .status-info {
+  background: black;
+}
+
+/* Back + next links */
+.backnextlinks {
+  background: var(--gray1);
+  padding: 0.5rem;
+  border: 0.25rem solid var(--magenta);
+  border-radius: var(--br);
+}
+
+.page-footer {
+  margin-top: 2rem;
+  background-color: var(--gray1);
+  border-top: 0.25rem solid var(--magenta);
+}
diff --git a/web/assets/themes/soft.css b/web/assets/themes/soft.css
new file mode 100644
index 000000000..6507fa701
--- /dev/null
+++ b/web/assets/themes/soft.css
@@ -0,0 +1,124 @@
+/*
+  theme-title: Soft
+  theme-description: Pastel pink and blue with dark magenta trim
+*/
+
+:root {
+  /* Define our palette */
+  --soft-pink: rgb(255, 199, 234);
+  --soft-pink-translucent: rgb(255, 199, 234, 30%);
+  --soft-lilac: #D8B4F8;
+  --soft-lilac-translucent: rgb(216, 180, 248, 30%);
+  --soft-blue: #d6f1ff;
+
+  /* Override */
+  --blue1: #7f16de;
+  --blue2: #7514cc;
+  --blue3: #6b12ba;
+  --orange2: var(--blue1);
+  --br: 0.8rem;
+  --br-inner: 0.4rem; 
+
+  /* Basic page styling (background + foreground) */
+  --bg: linear-gradient(-90deg, var(--soft-blue), var(--soft-pink), white, var(--soft-pink), var(--soft-blue));
+  --bg-accent: var(--soft-pink-translucent);
+  --fg: var(--gray1);
+  --fg-reduced: var(--gray3);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--soft-pink-translucent);
+
+  /* Statuses */
+  --status-bg: var(--soft-pink-translucent);
+  --status-focus-bg: var(--soft-pink-translucent);
+  --status-info-bg: var(--soft-lilac-translucent);
+  --status-focus-info-bg: var(--soft-lilac-translucent);
+
+  /* Boot-on */
+  --button-fg: var(--white1);
+
+  /* Used around statuses + other items */
+  --boxshadow-border: 0.08rem solid var(--gray8);
+}
+
+/* Scroll bar */
+html, body {
+  scrollbar-color: var(--orange2) var(--soft-pink);
+}
+
+/* Header card */
+.profile .profile-header {
+  border: var(--boxshadow-border);
+}
+
+.profile .profile-header .basic-info .namerole .role {
+  border: var(--boxshadow-border);
+}
+
+/* About + Pinned posts headers */
+.profile .col-header {
+  border: var(--boxshadow-border);
+}
+
+.profile .about-user .col-header {
+  margin-bottom: initial;
+  border-bottom: none;
+  border-top: var(--boxshadow-border);
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+
+/* Profile fields + bio */
+.profile .about-user .fields {
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+.profile .about-user .fields .field {
+  border-bottom: 0.1rem dashed var(--blue3);
+}
+.profile .about-user .fields .field:first-child {
+  border-top: 0.1rem dashed var(--blue3);
+}
+.profile .about-user .bio {
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+.profile .about-user .accountstats {
+  background: var(--soft-lilac-translucent);
+  border-bottom: var(--boxshadow-border);
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+  border-bottom-left-radius: var(--br);
+  border-bottom-right-radius: var(--br);
+}
+
+/* Status media */
+.status .media .media-wrapper {
+  border: 0.08rem solid var(--blue3);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--blue2);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: var(--soft-pink-translucent);
+}
+
+/* Status polls */
+.status .text .poll {
+  background-color: var(--soft-lilac-translucent);
+}
+.status .text .poll .poll-info {
+  background: var(--bg);
+}
+
+/* Code snippets */
+pre, pre[class*="language-"],
+code, code[class*="language-"] {
+	background-color: var(--gray1);
+  color: white;
+}
+
+/* Block quotes */
+blockquote {
+	background-color: var(--soft-lilac-translucent);
+}
diff --git a/web/assets/themes/sunset-light.css b/web/assets/themes/sunset-light.css
new file mode 100644
index 000000000..c9612e36b
--- /dev/null
+++ b/web/assets/themes/sunset-light.css
@@ -0,0 +1,95 @@
+/*
+  theme-title: Sunset (light)
+  theme-description: Official light orange/yellow theme.
+*/
+
+:root {
+  /* Define our palette */
+  --eggshell: #fff6eb;
+  --yellow: #FFAF45;
+  --orange: #FB6D48;
+  --pink: #D74B76;
+  --eggplant1: #5c385e;
+  --eggplant2: #523254;
+  --eggplant3: #482c49;
+  --eggplant4: #29192a;
+
+  /* Restyle basic colors */
+  --white1: var(--eggshell);
+  --white2: var(--yellow);
+  --blue1: var(--eggplant1);
+  --blue2: var(--eggplant2);
+  --blue3: var(--eggplant3);
+  --orange2: var(--pink);
+
+  /* Basic page styling (background + foreground) */
+  --bg: linear-gradient(var(--eggplant1), var(--pink), var(--orange), var(--yellow), var(--eggshell));
+  --bg-accent: var(--white2);
+  --fg: var(--eggplant4);
+  --fg-reduced: var(--eggplant3);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--white2);
+
+  /* Buttons */
+  --button-bg: var(--blue2);
+  --button-fg: var(--white1);
+
+  /* Statuses */
+  --status-bg: var(--white1);
+  --status-focus-bg: var(--white1);
+  --status-info-bg: var(--white2);
+  --status-focus-info-bg: var(--white2);
+
+  /* Used around statuses + other items */
+  --boxshadow-border: 0.08rem solid var(--orange);
+}
+
+/* Scroll bar */
+html, body {
+  scrollbar-color: var(--pink) var(--eggshell);
+}
+
+.page-header a h1 {
+  color: var(--eggshell);
+}
+
+/* Profile fields */
+.profile .about-user .fields .field {
+  border-bottom: 0.1rem solid var(--orange);
+}
+.profile .about-user .fields .field:first-child {
+  border-top: 0.1rem solid var(--orange);
+}
+
+/* Status media */
+.status .media .media-wrapper {
+  border: 0.08rem solid var(--orange);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--blue2);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: var(--eggshell);
+}
+
+/* Status polls */
+.status .text .poll {
+  background-color: var(--white2);
+}
+.status .text .poll .poll-info {
+  background-color: var(--white1);
+}
+
+/* Code snippets */
+pre, pre[class*="language-"],
+code, code[class*="language-"] {
+  background-color: var(--eggplant4);
+  color: var(--white1);
+}
+
+/* Block quotes */
+blockquote {
+  background-color: var(--yellow);
+  color: var(--eggplant4);
+}