A bunch of breaking changes for no reason except for "I didn't like it"

I mean, this release has breaking changes anyway, why not break all the
stuff I wanted to break?

content/_index.md

@@ -25,8 +25,8 @@ Some of the features Duckquill has to offer:
 - Lightweight by default, powerful when needed; no JavaScript is used by default.
 - Privacy respecting analytics using [GoatCounter](https://www.goatcounter.com), with support for self-hosting.
 - Estimated read time of the post; put away those with short attention spans.
-- Everything is tinted with the user-defined primary color for a pleasant look.
 - Light/dark/system theme switcher (for some reason everyone likes these).
+- Everything is tinted with the user-defined accent color for a pleasant look.
 - GitHub-style alerts. Yes, they're pretty, but don't overuse them. 
 - Post banners; they're even used in the social media cards!
 - YouTube/Vimeo shortcodes for easy video embedding.
@@ -159,20 +159,20 @@ styles = [
 ]
 ```
 
-### Primary Color
+### Accent Color
 
-Duckquill respects chosen primary color everywhere. To use your own, simply change the primary color in `config.toml`:
+Duckquill respects chosen accent color everywhere. To use your own, simply change it in `config.toml`:
 
 ```toml
 [extra]
-primary_color = "#3584e4"
+accent_color = "#3584e4"
 ```
 
 Additionally, you can set a separate color for dark mode:
 
 ```toml
 [extra]
-primary_color_dark = "#ff7800"
+accent_color_dark = "#ff7800"
 ```
 
 ### Favicon

content/demo/index.md

@@ -645,7 +645,7 @@ URL anchor `#solid` can be used for this as well.
 
 <!-- For the demo purposes only -->
 <div id="color-picker-container">
-  <small>Primary color:</small>
+  <small>Accent color:</small>
   <br />
   <input id="color-picker-light" type="color" value="#ff7800" />
   <label for="color-picker-light">Light theme</label>
@@ -713,21 +713,21 @@ URL anchor `#solid` can be used for this as well.
   const contrastCheckboxLight = document.querySelector("#contrast-color-light");
   const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
 
-  let primaryColorLight = colorPickerLight.value;
-  let primaryColorDark = colorPickerDark.value;
+  let accentColorLight = colorPickerLight.value;
+  let accentColorDark = colorPickerDark.value;
 
-  colorPickerLight.addEventListener("input", updatePrimaryColorLight);
-  colorPickerDark.addEventListener("input", updatePrimaryColorDark);
+  colorPickerLight.addEventListener("input", updateAccentColorLight);
+  colorPickerDark.addEventListener("input", updateAccentColorDark);
   contrastCheckboxLight.addEventListener("change", updateStyles);
   contrastCheckboxDark.addEventListener("change", updateStyles);
 
-  function updatePrimaryColorLight() {
-    primaryColorLight = colorPickerLight.value;
+  function updateAccentColorLight() {
+    accentColorLight = colorPickerLight.value;
     updateStyles();
   }
 
-  function updatePrimaryColorDark() {
-    primaryColorDark = colorPickerDark.value;
+  function updateAccentColorDark() {
+    accentColorDark = colorPickerDark.value;
     updateStyles();
   }
 
@@ -745,14 +745,14 @@ URL anchor `#solid` can be used for this as well.
 
     let styles = `
       :root {
-        --primary-color: ${primaryColorLight};
+        --accent-color: ${accentColorLight};
       }
       [data-theme="dark"] {
-        --primary-color: ${primaryColorDark};
+        --accent-color: ${accentColorDark};
       }
       @media (prefers-color-scheme: dark) {
         :root:not([data-theme="light"]) {
-          --primary-color: ${primaryColorDark};
+          --accent-color: ${accentColorDark};
         }
       }
     `;