Update CSS and configuration for theme opacity and color management

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add `--disabled` CSS variable for setting opacity of disabled elements.
+- Add `--hover` CSS variable for setting zoom on hover.
+- Add `config.extra.color_opacity` and `config.extra.color_opacity_dark` config variables to set global color opacity used by `-bg` colors and `--primary-color-alpha`.
 - Add `external` class to comment timestamp.
 - Add active state to footer's "Powered by" links.
 - Add active state to footnotes' go back button.
@@ -20,13 +23,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well.
 - Add margin between comment author name and timestamp.
 - Make comment timestamp more subtle.
 - Reduce the target heading transition time.
 - Reduce top margin of the target heading.
 - Set socials icons as CSS variables and not inline styles.
+- Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
 - Tweak padding of verified instance badge.
 - Use more fitting cursors in some contexts.
+- Use relative colors for `-bg` color variants.
+
+### Removed
+
+- **[BREAKING]** Remove the `config.extra.primary_color_alpha` and `config.extra.primary_color_alpha_dark` config variables; they're now automatically generated from the primary color.
+
+### Fixed
+
+- `config.extra.fix_contrast_dark` should now work even if `config.extra.primary_color_dark` is not set.
 
 ## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)
 

config.toml

@@ -53,23 +53,29 @@ taxonomies = [{ name = "tags", feed = true }]
 
 [extra]
 # Which theme should be used by default (light/dark).
-# Strongly recommended to use this only with the manual theme switcher enabled,
-# it's important for a11y.
 #
 # default_theme = "dark"
 #
 # Sets theme and browser theme color.
 # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
 primary_color = "#ff7800"
-# Ditto but for the dark mode.
+# Ditto but for the dark theme.
 # If not set regular variant will be used.
 primary_color_dark = "#ffa348"
+# Sets the opacity used for most colors.
+#
+# color_opacity = "0.1"
+#
+# Ditto but for the dark theme.
+#
+# color_opacity_dark = "0.1"
+#
 # Whether to fix low contrast in text selection, checkboxes, etc.
 # Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
 #
 # fix_contrast = true
 #
-# Ditto but for the dark mode.
+# Ditto but for the dark theme.
 fix_contrast_dark = true
 # Use emoji as a favicon.
 # Only one emoji is being rendered, everything else is truncated.

content/demo/index.md

@@ -581,21 +581,30 @@ Blah blah <q>Inline Quote</q> hmm.
   <small>Primary color:</small>
   <br />
   <input id="color-picker-light" type="color" value="#ff7800" />
-  <label for="color-picker-light">&nbsp;Light theme</label>
+  <label for="color-picker-light">Light theme</label>
   <br />
   <input id="color-picker-dark" type="color" value="#ffa348" />
-  <label for="color-picker-dark">&nbsp;Dark theme</label>
+  <label for="color-picker-dark">Dark theme</label>
   <br />
-  <small>Fix contrast for:</small>
+  <small>Color opacity:</small>
+  <br />
+  <small id="opacity-light-value">0.1</small>
+  <input type="range" id="opacity-light" min="0.1" max="0.9" step="0.1" value="0.1">
+  <label for="opacity-light">Light theme</label>
+  <br />
+  <small id="opacity-dark-value">0.1</small>
+  <input type="range" id="opacity-dark" min="0.1" max="0.9" step="0.1" value="0.1">
+  <label for="opacity-dark">Dark theme</label>
+  <br />
+  <small>Fix contrast:</small>
   <br />
   <input id="contrast-color-light" type="checkbox" />
-  <label for="contrast-color-light">&nbsp;Light theme</label>
+  <label for="contrast-color-light">Light theme</label>
   <br />
   <input id="contrast-color-dark" type="checkbox" checked />
-  <label for="contrast-color-dark">&nbsp;Dark theme</label>
+  <label for="contrast-color-dark">Dark theme</label>
 </div>
 
-
 <style>
   #color-picker-container {
     -webkit-backdrop-filter: var(--blur);
@@ -608,6 +617,7 @@ Blah blah <q>Inline Quote</q> hmm.
     transition: var(--transition);
     box-shadow: var(--edge-highlight);
     border-start-end-radius: var(--rounded-corner);
+    border-end-end-radius: var(--rounded-corner);
     background-color: var(--nav-bg);
     padding: 0.5rem;
   }
@@ -631,6 +641,27 @@ Blah blah <q>Inline Quote</q> hmm.
   :root[dir*="rtl"] #color-picker-container:hover {
     transform: none;
   }
+
+  #color-picker-light,
+  #color-picker-dark,
+  #contrast-color-light,
+  #contrast-color-dark,
+  #opacity-light-value,
+  #opacity-dark-value,
+  #opacity-light,
+  #opacity-dark {
+    margin-inline-end: 0.25rem;
+  }
+
+  #opacity-light,
+  #opacity-dark {
+    width: 8rem;
+  }
+
+  #opacity-light-value,
+  #opacity-dark-value {
+    font-variant-numeric: tabular-nums;
+  }
 </style>
 
 <script type="text/javascript">
@@ -638,34 +669,52 @@ Blah blah <q>Inline Quote</q> hmm.
   const colorPickerDark = document.querySelector("#color-picker-dark");
   const contrastCheckboxLight = document.querySelector("#contrast-color-light");
   const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
+  const opacityInputLight = document.querySelector("#opacity-light");
+  const opacityInputDark = document.querySelector("#opacity-dark");
+  const opacityValueLight = document.querySelector("#opacity-light-value");
+  const opacityValueDark = document.querySelector("#opacity-dark-value");
 
-  colorPickerLight.value = "#ff7800";
+  let primaryColorLight = colorPickerLight.value;
-  colorPickerDark.value = "#ffa348";
+  let primaryColorDark = colorPickerDark.value;
+  let opacityLight = opacityInputLight.value;
+  let opacityDark = opacityInputDark.value;
 
-  colorPickerLight.addEventListener("input", function () {
+  opacityValueLight.textContent = opacityLight;
-    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
+  opacityValueDark.textContent = opacityDark;
-  });
 
-  colorPickerDark.addEventListener("input", function () {
+  colorPickerLight.addEventListener("input", updatePrimaryColorLight);
-    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
+  colorPickerDark.addEventListener("input", updatePrimaryColorDark);
-  });
+  contrastCheckboxLight.addEventListener("change", updateStyles);
+  contrastCheckboxDark.addEventListener("change", updateStyles);
+  opacityInputLight.addEventListener("input", updateOpacityLight);
+  opacityInputDark.addEventListener("input", updateOpacityDark);
 
-  contrastCheckboxLight.addEventListener("change", function () {
+  function updatePrimaryColorLight() {
-    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
+    primaryColorLight = colorPickerLight.value;
-  });
+    updateStyles();
-
-  contrastCheckboxDark.addEventListener("change", function () {
-    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
-  });
-
-  function hexToRGBA(hex, alpha) {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }
 
-  function updateStyles(primaryColorLight, primaryColorDark, contrastColorLight, contrastColorDark) {
+  function updatePrimaryColorDark() {
+    primaryColorDark = colorPickerDark.value;
+    updateStyles();
+  }
+
+  function updateOpacityLight() {
+    opacityLight = opacityInputLight.value;
+    opacityValueLight.textContent = opacityLight;
+    updateStyles();
+  }
+
+  function updateOpacityDark() {
+    opacityDark = opacityInputDark.value;
+    opacityValueDark.textContent = opacityDark;
+    updateStyles();
+  }
+
+  function updateStyles() {
+    const contrastColorLight = contrastCheckboxLight.checked;
+    const contrastColorDark = contrastCheckboxDark.checked;
+
     let styleElement = document.getElementById("dynamic-styles");
 
     if (!styleElement) {
@@ -674,73 +723,64 @@ Blah blah <q>Inline Quote</q> hmm.
       document.head.appendChild(styleElement);
     }
 
-    const primaryColorLightAlpha = hexToRGBA(primaryColorLight, 0.2);
+    let styles = `
-    const primaryColorDarkAlpha = hexToRGBA(primaryColorDark, 0.2);
+      :root {
-
+        --primary-color: ${primaryColorLight};
-    let styles = "";
+        --color-opacity: ${opacityLight};
-
+      }
-    styles += `
+      [data-theme="dark"] {
-        :root {
+        --primary-color: ${primaryColorDark};
-          --primary-color: ${primaryColorLight};
+        --color-opacity: ${opacityDark};
-          --primary-color-alpha: ${primaryColorLightAlpha};
+      }
-        }
+      @media (prefers-color-scheme: dark) {
-      `;
+        :root:not([data-theme="light"]) {
-
-    styles += `
-        [data-theme="dark"] {
           --primary-color: ${primaryColorDark};
-          --primary-color-alpha: ${primaryColorDarkAlpha};
+          --color-opacity: ${opacityDark};
         }
-    
+      }
-        @media (prefers-color-scheme: dark) {
+    `;
-          :root:not([data-theme="light"]) {
-            --primary-color: ${primaryColorDark};
-            --primary-color-alpha: ${primaryColorDarkAlpha};
-          }
-        }
-      `;
 
     if (contrastColorLight) {
       styles += `
-          :root {
+        :root {
-            --contrast-color: rgb(0 0 0 / 0.8);
+          --contrast-color: rgb(0 0 0 / 0.8);
-          }
+        }
-        `;
+      `;
     } else {
       styles += `
-          :root {
+        :root {
-            --contrast-color: #fff;
+          --contrast-color: #fff;
-          }
+        }
-        `;
+      `;
     }
 
     if (contrastColorDark) {
       styles += `
-          [data-theme="dark"] {
+        [data-theme="dark"] {
+          --contrast-color: rgb(0 0 0 / 0.8);
+        }
+        @media (prefers-color-scheme: dark) {
+          :root:not([data-theme="light"]) {
             --contrast-color: rgb(0 0 0 / 0.8);
           }
-    
+        }
-          @media (prefers-color-scheme: dark) {
+      `;
-            :root:not([data-theme="light"]) {
-              --contrast-color: rgb(0 0 0 / 0.8);
-            }
-          }
-        `;
     } else {
       styles += `
-          [data-theme="dark"] {
+        [data-theme="dark"] {
+          --contrast-color: #fff;
+        }
+        @media (prefers-color-scheme: dark) {
+          :root:not([data-theme="light"]) {
             --contrast-color: #fff;
           }
-    
+        }
-          @media (prefers-color-scheme: dark) {
+      `;
-            :root:not([data-theme="light"]) {
-              --contrast-color: #fff;
-            }
-          }
-        `;
     }
 
     styleElement.textContent = styles;
   }
+
+  updateStyles();
 </script>
 <!-- End -->

sass/_variables.scss

@@ -26,53 +26,47 @@
 		--fg-muted-5: rgb(255 255 255 / 0.6);
 		--fg-contrast: rgb(0 0 0 / 0.8);
 		--nav-bg: rgb(25 25 25 / 0.7);
-		--blue-bg: rgb(153 193 241 / 0.1);
 		--blue-fg: rgb(153 193 241);
-		--brown-bg: rgb(205 171 143 / 0.1);
 		--brown-fg: rgb(205 171 143);
-		--green-bg: rgb(143 240 164 / 0.1);
 		--green-fg: rgb(143 240 164);
-		--purple-bg: rgb(220 138 221 / 0.1);
 		--purple-fg: rgb(220 138 221);
-		--red-bg: rgb(226 97 81 / 0.1);
 		--red-fg: rgb(246 97 81);
-		--yellow-bg: rgb(248 228 92 / 0.1);
 		--yellow-fg: rgb(248 228 92);
 		color-scheme: dark;
 	}
 
 	@else {
 		// COLORS
-		--primary-color-alpha: rgb(from var(--primary-color) r g b / 0.1);
 		--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
+		--blue-fg: rgb(53 132 228);
+		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
+		--brown-fg: rgb(99 69 44);
 		--fg-color: rgb(0 0 0 / 0.8);
+		--fg-contrast: rgb(255 255 255);
 		--fg-muted-1: rgb(0 0 0 / 0.05);
 		--fg-muted-2: rgb(0 0 0 / 0.1);
 		--fg-muted-3: rgb(0 0 0 / 0.2);
 		--fg-muted-4: rgb(0 0 0 / 0.5);
 		--fg-muted-5: rgb(0 0 0 / 0.6);
-		--fg-contrast: rgb(255 255 255);
+		--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
-		--nav-bg: rgb(242 242 242 / 0.7);
-		--blue-bg: rgb(53 132 228 / 0.1);
-		--blue-fg: rgb(53 132 228);
-		--brown-bg: rgb(99 69 44 / 0.1);
-		--brown-fg: rgb(99 69 44);
-		--green-bg: rgb(38 162 105 / 0.1);
 		--green-fg: rgb(38 162 105);
-		--purple-bg: rgb(145 65 172 / 0.1);
+		--nav-bg: rgb(242 242 242 / 0.7);
+		--primary-color-alpha: rgb(from var(--primary-color) r g b / var(--color-opacity));
+		--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
 		--purple-fg: rgb(145 65 172);
-		--red-bg: rgb(224 27 36 / 0.1);
+		--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));
 		--red-fg: rgb(224 27 36);
-		--yellow-bg: rgb(156 110 3 / 0.1);
+		--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
 		--yellow-fg: rgb(156 110 3);
 
 		// VARIABLES
-		--disabled: 0.6;
-		--hover: scale(1.1);
 		--active: scale(0.9);
 		--blur: saturate(180%) blur(0.75rem);
 		--container-width: 720px;
+		--disabled: 0.6;
 		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
+		--hover: scale(1.1);
 		--rounded-corner-small: 0.5rem;
 		--rounded-corner: 0.75rem;
 		--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);

templates/partials/head.html

@@ -42,18 +42,41 @@
 		:root {
 			--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }};
 			--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
+			--color-opacity: {{ config.extra.color_opacity | default(value="0.1") }};
 		}
 
 		{%- if config.extra.primary_color_dark %}
 			[data-theme="dark"] {
 				--primary-color: {{ config.extra.primary_color_dark | safe }};
-				--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
 			}
 
 			@media (prefers-color-scheme: dark) {
 				:root:not([data-theme="light"]) {
 					--primary-color: {{ config.extra.primary_color_dark | safe }};
-					--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
+				}
+			}
+		{%- endif %}
+
+		{%- if config.extra.fix_contrast_dark %}
+			[data-theme="dark"] {
+				--contrast-color: rgb(0 0 0 / 0.8);
+			}
+
+			@media (prefers-color-scheme: dark) {
+				:root:not([data-theme="light"]) {
+					--contrast-color: rgb(0 0 0 / 0.8);
+				}
+			}
+		{%- endif %}
+
+		{%- if config.extra.color_opacity_dark %}
+			[data-theme="dark"] {
+				--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
+			}
+
+			@media (prefers-color-scheme: dark) {
+				:root:not([data-theme="light"]) {
+					--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
 				}
 			}
 		{%- endif %}

templates/partials/nav.html

@@ -78,7 +78,7 @@
 			{%- if config.languages | length > 0 %}
 				{%- include "partials/language_switcher.html" %}
 			{%- endif -%}
-			{%- if config.extra.nav.show_theme_switcher  %}
+			{%- if config.extra.default_theme or config.extra.nav.show_theme_switcher  %}
 				<li id="theme-switcher">
 					<details>
 						<summary class="circle" title="{{ macros_translate::translate(key='theme', default='Theme', language_strings=language_strings) }}">