feat: Use primary color specified in config

Sorry, not sorry iPhone users, get a phone on which you are able to use something different than Safari, or get a newer one :)

config.toml

@@ -23,9 +23,11 @@ highlight_themes_css = [
 smart_punctuation = true
 
 [extra]
-# Sets browser theme color,
+# Sets theme and browser theme color,
 # see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
 primary_color = "#ff7800"
+# Same as primary_color, but with 20% opacity
+primary_color_alpha = "rgba(255, 120, 0, 0.2)"
 # If the favicon is GIF or not
 animated_favicon = false
 # Tera date format (not used in comments!),

content/_index.md

@@ -78,71 +78,14 @@ If for some reason overridden class are not respected, try using `!important`. Y
 
 ### Primary color
 
-Duckquill respects chosen primary color everywhere, you can use any HEX color code you want
+Duckquill respects chosen primary color everywhere, simply change the primary color in `config.toml`:
-
-First, change the primary color in `config.toml`:
 
 ```toml
 [extra]
 primary_color = "COLOR_CODE"
+primary_color_alpha = "COLOR_CODE"
 ```
 
-Then, add `custom.css` to additional stylesheets.
-
-```toml
-[extra]
-stylesheets = [
-  "custom.css"
-]
-```
-
-Then, paste the following code inside `sass/custom.scss` (inside your site, not the theme):
-
-```scss
-@use "sass:color";
-
-$primary-color: COLOR_CODE;
-$primary-color-alpha: color.scale($primary-color, $alpha: -80%);
-
-$bg-color-l: color.scale($primary-color, $lightness: 80%);
-$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);
-
-$crt-bg: radial-gradient(
-  color.scale($primary-color, $lightness: -80%),
-  color.scale($primary-color, $lightness: -90%)
-);
-
-$nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
-$nav-bg-d: color.scale(
-  $bg-color-d,
-  $alpha: -20%,
-  $lightness: 5%,
-  $saturation: -50%
-);
-
-$glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
-  0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
-  0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
-
-:root {
-  --bg-color: #{$bg-color-l};
-  --crt-bg: #{$crt-bg};
-  --glow: #{$glow};
-  --nav-bg: #{$nav-bg-l};
-  --primary-color-alpha: #{$primary-color-alpha};
-  --primary-color: #{$primary-color};
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #{$bg-color-d};
-    --nav-bg: #{$nav-bg-d};
-  }
-}
-```
-
-Set any color in `$primary-color` and reload, the primary color should be used now. This is a hack that is needed until Zola will be able to use `config.toml` options inside Sass files.
-
 ## Test pages
 
 - [Demo page](https://daudix.codeberg.page/duckquill/demo)

sass/_crt.scss

@@ -1,8 +1,13 @@
 .crt {
   margin: 1rem 0 1rem;
   border-radius: var(--rounded-corner);
-  box-shadow: var(--glow);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 5%, transparent),
-  background: var(--crt-bg);
+    0 2px 6px 2px color-mix(in srgb, var(--primary-color) 5%, transparent),
+    0 4px 24px 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
+  background-image: radial-gradient(
+    color-mix(in srgb, var(--primary-color) 20%, black),
+    color-mix(in srgb, var(--primary-color) 10%, black)
+  );
 
   pre {
     color: var(--primary-color);
@@ -47,6 +52,10 @@
       transform: translateY(0px);
     }
   }
+
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
 }
 
 .cursor {
@@ -63,4 +72,8 @@
       opacity: 1;
     }
   }
+
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
 }

sass/_variables.scss

@@ -1,24 +1,6 @@
-@use "sass:color";
-
-$primary-color: #ff7800;
-$primary-color-alpha: color.scale($primary-color, $alpha: -80%);
-
-$bg-color-l: color.scale($primary-color, $lightness: 80%);
-$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);
-
-$crt-bg: radial-gradient(
-  color.scale($primary-color, $lightness: -80%),
-  color.scale($primary-color, $lightness: -90%)
-);
-
-$glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
-  0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
-  0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
-
 :root {
   // COLORS
-  --bg-color: #{$bg-color-l};
+  --bg-color: var(--bg-color-l);
-  --crt-bg: #{$crt-bg};
   --fg-color: rgba(0, 0, 0, 0.8);
   --fg-muted-1: rgba(0, 0, 0, 0.05);
   --fg-muted-2: rgba(0, 0, 0, 0.1);
@@ -28,8 +10,6 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --nav-bg: rgba(242, 242, 242, 0.7);
   --orange-bg: rgba(255, 120, 0, 0.1);
   --orange-fg: rgb(255, 120, 0);
-  --primary-color-alpha: #{$primary-color-alpha};
-  --primary-color: #{$primary-color};
   --purple-bg: rgba(145, 65, 172, 0.1);
   --purple-fg: rgb(145, 65, 172);
   --red-bg: rgba(224, 27, 36, 0.1);
@@ -39,10 +19,11 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 
   // VARIABLES
   --active: 0.9;
+  --bg-color-l: color-mix(in srgb, var(--primary-color) 20%, white);
+  --bg-color-d: color-mix(in srgb, var(--primary-color) 10%, black);
   --content-width: 720px;
   --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
-  --glow: #{$glow};
   --rounded-corner-small: 8px;
   --rounded-corner: 12px;
   --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
@@ -60,7 +41,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
     color-scheme: dark;
 
     // COLORS
-    --bg-color: #{$bg-color-d};
+    --bg-color: var(--bg-color-d);
     --fg-color: rgb(255, 255, 255);
     --fg-muted-1: rgba(255, 255, 255, 0.05);
     --fg-muted-2: rgba(255, 255, 255, 0.1);

templates/includes/head.html

@@ -18,6 +18,13 @@
     {% endfor %}
   {% endif %}
 
+  <style>
+    :root {
+      --primary-color-alpha: {{ config.extra.primary_color_alpha }};
+      --primary-color: {{ config.extra.primary_color }};
+    }
+  </style>
+
   {% if config.extra.animated_favicon %}
     <link rel="icon" type="image/gif" href="{{ get_url(path='favicon.gif') }}" />
   {% else %}