[feature/frontend] Add solarized light + dark themes (#3325)

3 files changed, 294 insertions, 0 deletions

diff --git a/web/assets/fonts/noto-sans-mono-v30-latin-regular.woff2 b/web/assets/fonts/noto-sans-mono-v30-latin-regular.woff2
new file mode 100644
index 000000000..94fa9347f
--- /dev/null
+++ b/web/assets/fonts/noto-sans-mono-v30-latin-regular.woff2
diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css
new file mode 100644
index 000000000..f642e0374
--- /dev/null
+++ b/web/assets/themes/solarized-dark.css
@@ -0,0 +1,147 @@
+/*
+  theme-title: Solarized (dark)
+  theme-description: Solarized sloth (dark)
+*/
+
+/*
+  Solarized colors + design - https://github.com/altercation/solarized
+
+  Copyright (c) 2011 Ethan Schoonover
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+:root {
+  /* Define solarized palette */
+  --base3:     #002b36;
+  --base2:     #073642;
+  --base1:     #586e75;
+  --base0:     #657b83;
+  --base00:    #839496;
+  --base01:    #93a1a1;
+  --base02:    #eee8d5;
+  --base03:    #fdf6e3;
+  --yellow:    #b58900;
+  --orange:    #cb4b16;
+  --red:       #dc322f;
+  --magenta:   #d33682;
+  --violet:    #6c71c4;
+  --blue:      #268bd2;
+  --cyan:      #2aa198;
+  --green:     #859900;
+
+  /* Override orange trim */
+  --orange2: var(--red);
+
+  /* Restyle basic colors to use Solarized */
+  --white1: var(--base3);
+  --white2: var(--base2);
+  --blue1: var(--cyan);
+  --blue2: var(--base03);
+  --blue3: var(--base02);
+
+  /* Basic page styling (background + foreground) */
+  --bg: var(--white1);
+  --bg-accent: var(--white2);
+  --fg: var(--base02);
+  --fg-reduced: var(--base01);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--white2);
+
+  /* Solarize buttons */
+  --button-bg: var(--blue2);
+  --button-fg: var(--white1);
+
+  /* Solarize 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.1rem solid var(--base1);
+
+  --plyr-video-control-color: var(--fg-reduced);
+  --plyr-video-control-color-hover: var(--fg);
+}
+
+@font-face {
+  font-family: "Noto Sans Mono";
+  font-weight: normal;
+  font-style: normal;
+  src: url(/assets/fonts/noto-sans-mono-v30-latin-regular.woff2) format('woff2');
+}
+
+/* Scroll bar */
+html, body {
+  font-family: 'Noto Sans Mono', monospace;
+  scrollbar-color: var(--orange2) var(--white1) ;
+}
+
+/* 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);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--blue2);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: transparent;
+}
+
+/* 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: black;
+  color: var(--base03);
+}
+
+/* Block quotes */
+blockquote {
+  background-color: var(--bg-accent);
+  color: var(--fg);
+}
+
+button,
+.button,
+.status .text-spoiler > summary .button {
+  font-family: 'Noto Sans Mono', monospace;
+}
+
+/* Ensure role badge readable */
+.profile .profile-header .basic-info .namerole .role.admin {
+  color: var(--base03);
+}
diff --git a/web/assets/themes/solarized-light.css b/web/assets/themes/solarized-light.css
new file mode 100644
index 000000000..8801c4438
--- /dev/null
+++ b/web/assets/themes/solarized-light.css
@@ -0,0 +1,147 @@
+/*
+  theme-title: Solarized (light)
+  theme-description: Solarized sloth (light)
+*/
+
+/*
+  Solarized colors + design - https://github.com/altercation/solarized
+
+  Copyright (c) 2011 Ethan Schoonover
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+:root {
+  /* Define solarized palette */
+  --base03:    #002b36;
+  --base02:    #073642;
+  --base01:    #586e75;
+  --base00:    #657b83;
+  --base0:     #839496;
+  --base1:     #93a1a1;
+  --base2:     #eee8d5;
+  --base3:     #fdf6e3;
+  --yellow:    #b58900;
+  --orange:    #cb4b16;
+  --red:       #dc322f;
+  --magenta:   #d33682;
+  --violet:    #6c71c4;
+  --blue:      #268bd2;
+  --cyan:      #2aa198;
+  --green:     #859900;
+
+  /* Override orange trim */
+  --orange2: var(--orange);
+
+  /* Restyle basic colors to use Solarized */
+  --white1: var(--base3);
+  --white2: var(--base2);
+  --blue1: var(--cyan);
+  --blue2: var(--base03);
+  --blue3: var(--base02);
+
+  /* Basic page styling (background + foreground) */
+  --bg: var(--white1);
+  --bg-accent: var(--white2);
+  --fg: var(--base02);
+  --fg-reduced: var(--base01);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--white2);
+
+  /* Solarize buttons */
+  --button-bg: var(--blue2);
+  --button-fg: var(--white1);
+
+  /* Solarize 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.1rem solid var(--base1);
+
+  --plyr-video-control-color: var(--fg-reduced);
+  --plyr-video-control-color-hover: var(--fg);
+}
+
+@font-face {
+  font-family: "Noto Sans Mono";
+  font-weight: normal;
+  font-style: normal;
+  src: url(/assets/fonts/noto-sans-mono-v30-latin-regular.woff2) format('woff2');
+}
+
+/* Scroll bar */
+html, body {
+  font-family: 'Noto Sans Mono', monospace;
+  scrollbar-color: var(--orange2) var(--white1) ;
+}
+
+/* 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);
+}
+.status .media .media-wrapper details .unknown-attachment .placeholder {
+  color: var(--blue2);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: transparent;
+}
+
+/* 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: black;
+  color: var(--base3);
+}
+
+/* Block quotes */
+blockquote {
+  background-color: var(--bg-accent);
+  color: var(--fg);
+}
+
+button,
+.button,
+.status .text-spoiler > summary .button {
+  font-family: 'Noto Sans Mono', monospace;
+}
+
+/* Ensure role badge readable */
+.profile .profile-header .basic-info .namerole .role.admin {
+  color: var(--base03);
+}