Tweak styles

src/style/mixins.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:color';
 
 $breakpoint-width: 700px !default;
 
@@ -14,12 +15,6 @@ $breakpoint-width: 700px !default;
   }
 }
 
-@mixin in-dark-mode() {
-  html[theme='dark'] {
-    @content;
-  }
-}
-
 @mixin title-fragment-link() {
   position: relative;
 
@@ -68,7 +63,8 @@ $breakpoint-width: 700px !default;
   transform: translateX(-50%) translateY(-50%);
 }
 
-@mixin blurred-background() {
+@mixin blurred-background($color: transparent) {
+  background-color: color.adjust($color, $alpha: -0.66);
   backdrop-filter: blur(var(--blur-radius));
   -webkit-backdrop-filter: blur(var(--blur-radius));
 
@@ -76,7 +72,7 @@ $breakpoint-width: 700px !default;
     (backdrop-filter: blur(var(--blur-radius))) or
       (-webkit-backdrop-filter: blur(var(--blur-radius)))
   ) {
-    background-color: var(--card-color);
+    background-color: $color;
   }
 }
 

src/style/vars.scss

@@ -1,11 +1,13 @@
 @use 'mixins' as *;
 
+$accent-color: #b7455e;
+
 :root {
   --transition-time: 200ms;
   --transition-time-long: 350ms;
   --line-width: 4px;
   --line-height: 1.125rem;
-  --accent-color: #b7455e;
+  --accent-color: $accent-color;
   --sun-color: #f7f78c;
   --very-light-text-color: #ffffff;
   --background: #ffffff;
@@ -33,12 +35,3 @@
     --normal-margin: 2rem;
   }
 }
-
-@include in-dark-mode {
-  --background: #242638;
-  --normal-text-color: #ffffff;
-  --card-color: #263551;
-  --blurred-card-color: #212f4a77;
-  --special-text-color: #ffffff;
-  --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.5);
-}