Make --color-opacity variable "private", tweak switch style

CHANGELOG.md

@@ -9,9 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add `--color-opacity` CSS variable for setting global color opacity.
 - 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.
@@ -24,7 +24,9 @@ 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.
+- **[BREAKING]** Change the way `--bg-color` works. See [Tricks](https://duckquill.daudix.one/tricks/#background-image) page to see how to make background images work.
 - Add margin between comment author name and timestamp.
+- Add missing edge highlight to active footer navbar links.
 - Make comment timestamp more subtle.
 - Reduce the target heading transition time.
 - Reduce top margin of the target heading.

content/demo/index.md

@@ -586,16 +586,6 @@ Blah blah <q>Inline Quote</q> hmm.
   <input id="color-picker-dark" type="color" value="#ffa348" />
   <label for="color-picker-dark">Dark theme</label>
   <br />
-  <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" />
@@ -645,23 +635,9 @@ Blah blah <q>Inline Quote</q> hmm.
   #color-picker-light,
   #color-picker-dark,
   #contrast-color-light,
-  #contrast-color-dark,
+  #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">
@@ -669,25 +645,14 @@ 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");
 
   let primaryColorLight = colorPickerLight.value;
   let primaryColorDark = colorPickerDark.value;
-  let opacityLight = opacityInputLight.value;
-  let opacityDark = opacityInputDark.value;
-
-  opacityValueLight.textContent = opacityLight;
-  opacityValueDark.textContent = opacityDark;
 
   colorPickerLight.addEventListener("input", updatePrimaryColorLight);
   colorPickerDark.addEventListener("input", updatePrimaryColorDark);
   contrastCheckboxLight.addEventListener("change", updateStyles);
   contrastCheckboxDark.addEventListener("change", updateStyles);
-  opacityInputLight.addEventListener("input", updateOpacityLight);
-  opacityInputDark.addEventListener("input", updateOpacityDark);
 
   function updatePrimaryColorLight() {
     primaryColorLight = colorPickerLight.value;
@@ -699,18 +664,6 @@ Blah blah <q>Inline Quote</q> hmm.
     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;
@@ -726,16 +679,13 @@ Blah blah <q>Inline Quote</q> hmm.
     let styles = `
       :root {
         --primary-color: ${primaryColorLight};
-        --color-opacity: ${opacityLight};
       }
       [data-theme="dark"] {
         --primary-color: ${primaryColorDark};
-        --color-opacity: ${opacityDark};
       }
       @media (prefers-color-scheme: dark) {
         :root:not([data-theme="light"]) {
           --primary-color: ${primaryColorDark};
-          --color-opacity: ${opacityDark};
         }
       }
     `;

content/tricks/index.md

@@ -24,7 +24,7 @@ Duckquill is pretty easy to restyle with just a few lines of SCSS in the [approp
 
 ### Navbar
 
-You can make navbar have more classic look:
+You can make navbar have more traditional look:
 
 ![classic navabr](https://files.catbox.moe/wd9nal.png)
 
@@ -94,7 +94,7 @@ Or you can make it sticked to top but not full-width:
 
 ### Headings
 
-Default headings might not fit your taste, that's understandable. Good thing that we can ~~make them boring~~ fix them:
+Default headings might not fit your taste, that's understandable. Good thing is that we can ~~make them boring~~ fix them:
 
 ![boring headings](https://files.catbox.moe/6ok740.png)
 
@@ -137,7 +137,7 @@ h6 {
 
 ### Strikethrough
 
-The default strikethrough style is too much for you? Let's sort this out:
+The default strikethrough style is too much? Let's sort this out:
 
 ![plain strikethrough](https://files.catbox.moe/y2tbwm.png)
 
@@ -153,11 +153,15 @@ del {
 
 ### Edge Highlights
 
-Hate the skeuomorphic edge highlight on all semi-transparent elements? It's easy to get rid of them:
+Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of them:
 
 ```scss
-:root {
+@import "../themes/duckquill/sass/_variables.scss";
+
+@include theme-variables using ($theme) {
+    @else {
         --edge-highlight: 0 0 0 transparent;
+    }
 }
 ```
 
@@ -180,24 +184,26 @@ hr {
 
 ### Background Image
 
-Want to set some nice image as a background? I got you covered:
+Want to set some nice image as a background? We got you covered:
 
 ![background image](https://files.catbox.moe/kgrgqr.png)
 
 ```scss
+@import "../themes/duckquill/sass/_variables.scss";
+
+@include theme-variables using ($theme) {
+    @if $theme =="dark" {
+        --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
+    }
+
+    @else {
+        --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+    }
+}
+
 body {
     background: var(--bg-color), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }
 ```
 
-Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` to your needs:
+Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` based on your needs.
-
-```scss
-:root {
-    --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
-
-    @media (prefers-color-scheme: dark) {
-        --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
-    }
-}
-```

sass/_footer.scss

@@ -43,6 +43,7 @@
 			text-decoration: none;
 
 			&.active {
+				box-shadow: var(--edge-highlight);
 				background-color: var(--primary-color-alpha);
 				color: var(--primary-color);
 

sass/_general.scss

@@ -33,7 +33,7 @@ body {
 	display: grid; // Put footer at the bottom for short pages, such as the 404
 	grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
 	margin: 0;
-	background: var(--bg-color), var(--primary-color);
+	background-color: var(--bg-color);
 	min-height: 100vh;
 	color: var(--fg-color);
 	line-height: 1.6;

sass/_input.scss

@@ -87,12 +87,12 @@ input[type="checkbox"] {
 	}
 
 	&.switch {
-		vertical-align: -0.625rem;
+		vertical-align: -0.375rem;
 		box-shadow: var(--edge-highlight);
 		border: none;
 		border-radius: 999px;
-		width: 3rem;
+		width: 2.5rem;
-		height: 2rem;
+		height: 1.5rem;
 
 		&::before {
 			-webkit-mask-image: none;
@@ -106,8 +106,8 @@ input[type="checkbox"] {
 			box-shadow: var(--shadow);
 			border-radius: 50%;
 			background-color: white;
-			width: 1.5rem;
+			width: 1rem;
-			height: 1.5rem;
+			height: 1rem;
 		}
 
 		&:checked {

sass/_variables.scss

@@ -17,7 +17,7 @@
 @include theme-variables using ($theme) {
 	@if $theme =="dark" {
 		// COLORS
-		--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
+		--bg-color: color-mix(in srgb, var(--primary-color) 10%, black);
 		--fg-color: rgb(255 255 255);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
 		--fg-muted-2: rgb(255 255 255 / 0.1);
@@ -37,7 +37,7 @@
 
 	@else {
 		// COLORS
-		--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
+		--bg-color: color-mix(in srgb, var(--primary-color) 20%, white);
 		--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));
@@ -63,6 +63,7 @@
 		// VARIABLES
 		--active: scale(0.9);
 		--blur: saturate(180%) blur(0.75rem);
+		--color-opacity: 0.1;
 		--container-width: 720px;
 		--disabled: 0.6;
 		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);

templates/partials/head.html

@@ -42,7 +42,6 @@
 		: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 %}
@@ -68,18 +67,6 @@
 				}
 			}
 		{%- 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 %}
 	</style>
 
 	{%- set stylesheets = [ "style.css" ] %}