fix(theme): add scss interpolation to css variables

Author: BeyondMagic

dev/js/main.js

@@ -231,8 +231,8 @@ function createLightbox (id) {
   // set nightmode when according to local storage
   if (localStorage['theme'] === 'night') {
 
-    themeTriggerIcon.classList.toggle('fa-sun')
-    themeTriggerIcon.classList.toggle('fa-moon')
+    themeTriggerIcon.classList.remove('fa-sun')
+    themeTriggerIcon.classList.add('fa-moon')
 
     document.documentElement.classList.add('nightmode')
 
@@ -244,15 +244,19 @@ function createLightbox (id) {
     document.documentElement.classList.toggle('nightmode')
     document.documentElement.classList.toggle('daymode')
 
-    themeTriggerIcon.classList.toggle('fa-sun')
-    themeTriggerIcon.classList.toggle('fa-moon')
-
     // update local storage
-    if (localStorage['theme'] === 'night') localStorage['theme'] = 'day'
-    else localStorage['theme'] = 'night'
+    if (localStorage['theme'] === 'night') {
+		localStorage['theme'] = 'day';
+		themeTriggerIcon.classList.add('fa-sun')
+		themeTriggerIcon.classList.remove('fa-moon')
+	} else {
+		localStorage['theme'] = 'night';
+		themeTriggerIcon.classList.remove('fa-sun')
+		themeTriggerIcon.classList.add('fa-moon')
+	}
 
   }
 
-  themeTrigger.addEventListener('click', () => toggleTheme())
+  themeTrigger.addEventListener('click', toggleTheme)
 
 })()

dev/scss/base/_scaffholding.scss

@@ -1,39 +1,25 @@
-@use "../utilities/variables" as v;
+@use '../utilities/variables' as *;
 
 body {
 
   margin: 0 auto;
   max-width: 1920px;
 
   background: var(--body-background);
-
 }
 
-html {
-
-  &.nightmode {
-
-    --body-background: v.$dark;
-    --body-background-lighter: v.$dark-l1;
-    --body-background-darker: v.$dark-s1;
-
-    --font-colour: v.$light;
-
-    --card-shadow: v.$inverted-shadow;
-
-  }
-
-  &.daymode {
-
-    --body-background: v.$light;
-    --body-background-lighter: v.$light-l1;
-    --body-background-darker: v.$light-s1;
-
-    --font-colour: v.$dark;
-
-    --card-shadow: v.$shadow;
-
-  }
-
-
+html.nightmode {
+  --body-background: #{$dark};
+  --body-background-lighter: #{$dark-l1};
+  --body-background-darker: #{$dark-s1};
+  --font-colour: #{$light};
+  --card-shadow: #{$inverted-shadow};
 }
+
+html.daymode {
+  --body-background: #{$light};
+  --body-background-lighter: #{$light-l1};
+  --body-background-darker: #{$light-s1};
+  --font-colour: #{$dark};
+  --card-shadow: #{$shadow};
+}

dev/scss/utilities/_variables.scss

@@ -1,9 +1,17 @@
 //  Colours
 //  =======
 
-$light-l1:  #FFFFFF;  $light:     #F3F3F3;  $light-s1:  #E1E1E1;
-$mid-l1:    #909095;  $mid:       #808085;  $mid-s1:    #606065;
-$dark-l1:   #334155;  $dark:      #1E293B;  $dark-s1:   #202025;
+$light-l1:  #FFFFFF;
+$light:     #F3F3F3;
+$light-s1:  #E1E1E1;
+
+$mid-l1:    #909095;
+$mid:       #808085;
+$mid-s1:    #606065;
+
+$dark-l1:   #334155;
+$dark:      #1E293B;
+$dark-s1:   #202025;
 
 $shadow:          0 .5rem 2rem 0 rgba(0, 0, 0, .2);
 $inverted-shadow: 0 0 2rem 0 rgba(71, 85, 105, 0.5);