freshrss: add solarized theme

options/custom/containers/freshrss/default.nix

@@ -34,6 +34,10 @@ in {
         in [
           "${config.custom.containers.directory}/freshrss/data:/var/www/FreshRSS/data"
 
+          # Themes
+          # https://github.com/FreshRSS/FreshRSS/tree/edge/p/themes/base-theme
+          "${./themes/Solarized}:/var/www/FreshRSS/p/themes/Solarized"
+
           # Extensions
           # https://github.com/FreshRSS/Extensions
           #!! Causes docker permission changes to fail on container start due to immutable source

options/custom/containers/freshrss/themes/Solarized/README.md

@@ -0,0 +1,13 @@
+# Solarized
+
+Dark/light theme built on top of [Alternative-Dark by Ghost](https://github.com/FreshRSS/FreshRSS/tree/edge/p/themes/Alternative-Dark)
+
+Colors developed by [Ethan Schoonover](https://ethanschoonover.com/solarized/)
+
+### Accent color can be modified via a custom CSS variable
+
+```css
+:root {
+  --accent-color: #d33682;
+}
+```

options/custom/containers/freshrss/themes/Solarized/metadata.json

@@ -0,0 +1,8 @@
+{
+  "name": "Solarized",
+  "author": "Myned",
+  "description": "Solarized theme, colors developed by Ethan Schoonover",
+  "version": 0.1,
+  "files": ["_frss.css", "../Alternative-Dark/adark.css", "solarized.css"],
+  "theme-color": "#d33682"
+}

options/custom/containers/freshrss/themes/Solarized/solarized.css

@@ -0,0 +1,142 @@
+:root {
+  /* https://ethanschoonover.com/solarized */
+  --base03: #002b36;
+  --base02: #073642;
+  --base01: #586e75;
+  --base00: #657b83;
+  --base0: #839496;
+  --base1: #93a1a1;
+  --base2: #eee8d5;
+  --base3: #fdf6e3;
+  --red: #dc322f;
+  --orange: #cb4b16;
+  --yellow: #b58900;
+  --green: #859900;
+  --cyan: #2aa198;
+  --blue: #268bd2;
+  --violet: #6c71c4;
+  --magenta: #d33682;
+
+  --accent-color: var(--magenta);
+  --border-radius: 25px;
+
+  --alert-error-border-color: var(--red);
+  --alert-success-border-color: var(--green);
+  --alert-warn-border-color: var(--yellow);
+  --background-color-active: color-mix(in srgb, var(--background-color-light), white 15%);
+  --background-color-dark-transparent: var(--background-color-dark);
+  --background-color-dark: var(--base03);
+  --background-color-hover: #ffffff10;
+  --background-color-light: var(--base02);
+  --background-color-middle: var(--base01);
+  --background-color-slider-shadow: rgba(0, 0, 0, 0.5);
+  --border-color-dark: var(--base03);
+  --border-color-favorite: var(--yellow);
+  --border-color-middle: var(--base02);
+  --border-color-unread: var(--orange);
+  --contrast-attention-background-color-hover: #ffffff10;
+  --contrast-attention-background-color: var(--accent-color);
+  --contrast-attention-font-color: var(--accent-color);
+  --contrast-background-color-active: var(--accent-color);
+  --contrast-background-color-hover: #ffffff10;
+  --contrast-background-color: var(--base03);
+  --contrast-background-font-color: var(--base1);
+  --contrast-border-color-hover: var(--base1);
+  --empty-feed-color: var(--base03);
+  --font-color-contrast: var(--base03);
+  --font-color-dark: var(--base02);
+  --font-color-error: var(--red);
+  --font-color-light: var(--base1);
+  --font-color-middle: var(--base0);
+  --frss-box-shadow-color-transparent: red;
+  --notification-bad-background-color: var(--red);
+  --notification-bad-border-color: var(--base03);
+  --notification-bad-font-color: var(--base03);
+  --notification-border-color: var(--base03);
+  --notification-good-background-color: var(--green);
+  --notification-good-border-color: var(--green);
+}
+
+html,
+body {
+  /* Use system font */
+  font-family: sans-serif;
+}
+
+.btn {
+  /* Set button radius */
+  border-radius: var(--border-radius);
+
+  /* Fix vertical misalignment */
+  font-size: unset;
+  line-height: unset;
+
+  padding: 4px 12px;
+}
+
+.form-group.form-actions {
+  /* Disable blur filter */
+  backdrop-filter: none;
+
+  background: var(--background-color-dark);
+}
+
+.icon {
+  /* Apply #93a1a1 color filter to svg icons */
+  filter: brightness(0%) saturate(100%) invert(69%) sepia(10%) saturate(261%) hue-rotate(132deg) brightness(92%)
+    contrast(85%);
+}
+
+.tree-folder-title:hover button.dropdown-toggle .icon {
+  /* Fix bypassing color filter */
+  filter: brightness(2);
+}
+
+.group input:first-child,
+.stick input:first-child,
+.group .btn:first-child,
+.stick .btn:first-child,
+.group .dropdown:first-child .btn,
+.stick .dropdown:first-child .btn {
+  /* Leftmost element in group */
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+
+.group input:last-child,
+.stick input:last-child,
+.group .btn:last-child,
+.stick .btn:last-child,
+.group .dropdown:last-child .btn,
+.stick .dropdown:last-child .btn {
+  /* Rightmost element in group */
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.group .btn:only-child,
+.stick .btn:only-child,
+.group .dropdown:only-child .btn,
+.stick .dropdown:only-child .btn {
+  /* Set radius for single-button group */
+  border-radius: var(--border-radius);
+}
+
+.flux .item .title,
+.tree-folder-title .title {
+  /* Fix overlay with transparent background */
+  background: unset !important;
+}
+
+.tree-folder.active .tree-folder-title {
+  /* Set active category background */
+  background: var(--background-color-active);
+}
+
+.tree-folder-items:hover {
+  /* Fix entire section being highlighted */
+  background: unset;
+}
+
+.tree-folder-items .item:hover {
+  /* Set background color on feed hover */
+  background: var(--background-color-hover);
+}