Change all colours to variables (gross colours atm)

scss/base/_anchor.scss

@@ -6,6 +6,10 @@ a{
     display: inline-block;
     font-weight: bold;
     text-decoration: underline;
+
+    @include color-scheme(dark) {
+        color: $color-link--dark;
+    }
 }
 
 a:hover {

scss/base/_base.scss

@@ -17,4 +17,9 @@ body {
     line-height: $line-height;
     overflow-x: hidden;
     @include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
+
+    @include color-scheme(dark) {
+        background: $color-bg--dark;
+        color: $color-text--dark;
+    }
 }

scss/base/_grid.scss

@@ -80,9 +80,13 @@ html{
     overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
     justify-content: left;
     /* Scrollbar stuff */
-    scrollbar-color: #444 transparent;
+    scrollbar-color: $color-scrollbar transparent;
     scrollbar-width: thin;
     padding-bottom: .5rem;
+
+    @include color-scheme(dark) {
+      scrollbar-color: $color-scrollbar--dark transparent;
+    }
   }
   .row--scroll [class^="col"]{
   

scss/base/_image.scss

@@ -12,6 +12,10 @@ figure img {
 
 figure figcaption {
     color: $color-text-secondary;
+
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
 }
 
 section img,

scss/base/_typography.scss

@@ -10,11 +10,18 @@ p+p, h1+p{ /* Para after para should space out */
 
 mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
     padding: 0.1rem;
-    background: #ff8c00;
+    background: $color-highlight;
+
+    @include color-scheme(dark) {
+        background: $color-highlight--dark;
+    }
 }
 
 small {
     color: $color-text-secondary;
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
 }
 
 hr{
@@ -24,4 +31,7 @@ hr{
     width: 100%;
     max-width: $width-content;
     margin: .5rem auto;
+    @include color-scheme(dark) {
+        color: $color-bg-secondary--dark;
+    }
 }

scss/component/_alert.scss

@@ -1,4 +1,5 @@
 @use '../utilities/main_utilities' as *;
+@use "sass:color";
 
 // Alerts
 .alert{
@@ -7,16 +8,33 @@
     border-right: 4px solid $color-secondary;
     padding: .1rem .8rem;
     margin-bottom:.5rem;
+
+    @include color-scheme(dark) {
+        color: $color-secondary-accent--dark;
+        border-color: $color-secondary--dark;
+    }
 }
 .alert--error{
-    background: #f05870;
+    background: desaturate($alert-color--error, 40);
-    border-color: #e90d30;
+    border-color: $alert-color--error;
+
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
 }
 .alert--warning{
-    background: #e8e85b;
+    background: desaturate($alert-color--warning, 40);
-    border-color: #ddde11;
+    border-color: $alert-color--warning;
+    
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
 }
 .alert--success{
-    background: #60c572;
+    background: desaturate($alert-color--success, 40);
-    border-color: #18ab34;
+    border-color: $alert-color--success;
+    
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
 }

scss/component/_banner.scss

@@ -2,5 +2,9 @@
 
 .banner{
     width: 100%;
-    background: #eee;
+    background: $color-banner;
+
+    @include color-scheme(dark) {
+        background: $color-banner--dark;
+    }
 }

scss/component/_button.scss

@@ -5,8 +5,9 @@
 button,
 input[type="submit"]
 {
-    background: #FEFEFE;
+    color: $color-bg;
-    border: 2px solid $color-link;
+    background: $color-link;
+    border: 2px solid $color-accent;
     border-radius: $border-radius;
     display: inline-block;
     font-size: .9rem;
@@ -15,6 +16,11 @@ input[type="submit"]
     margin-top: 0.5rem;
     padding: .6rem 1.2rem;
     text-decoration: none;
+
+    @include color-scheme(dark) {
+        background-color: $color-link--dark;
+        border-color: $color-accent--dark;
+    }
 }
 
 .button + .button,
@@ -56,6 +62,10 @@ input[type="submit"].button--blue
 {
     background-color: $color-link;
     color: $color-bg;
+
+    @include color-scheme(dark) {
+        border-color: $color-link--dark;
+    }
 }
 
 .button--disabled,
@@ -65,6 +75,12 @@ input:disabled {
     border-color: $color-bg-secondary;
     color: $color-text-secondary;
     cursor: not-allowed;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+        border-color: $color-bg-secondary--dark;
+        color: $color-text-secondary--dark;
+    }
 }
 .button--disabled:hover,
 button[disabled]:hover,

scss/component/_card.scss

@@ -9,12 +9,22 @@
     box-shadow: $box-shadow $color-shadow;
     padding: 1.25rem;
     /* flex: 0 0 $width-card; */
-    background: #FFF;
+    background: $color-card;
     
     display: block !important; /* Unset row/col default */
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+        box-shadow: $box-shadow $color-shadow--dark;
+        background: $color-card--dark;
+    }
 }
 .card:hover {
     box-shadow: $box-shadow $color-bg-secondary;
+
+    @include color-scheme(dark) {
+        box-shadow: $box-shadow $color-bg-secondary--dark;
+    }
 }
 
 .row--cards{

scss/component/_code.scss

@@ -8,6 +8,11 @@ code,samp {
     display: inline-block;
     margin: 0 0.1rem;
     padding: 0 0.5rem;
+
+    @include color-scheme(dark) {
+        background-color: $color-accent--dark;
+        color: $color-text--dark;
+    }
 }
 pre {
     margin: .5rem 0;
@@ -22,7 +27,13 @@ pre {
     overflow-x: auto;
     
     white-space: pre-wrap;
-    border: 1px solid #c1cfda;
+    border: 1px solid $color-text;
+
+    @include color-scheme(dark) {
+        background-color: $color-accent--dark;
+        color: $color-text--dark;
+        border-color: $color-text--dark;
+    }
 }
 
 section pre {

scss/component/_form.scss

@@ -10,6 +10,11 @@ form {
     padding: 1.5rem;
     text-align: $justify-normal;
     margin: 0 auto;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+        box-shadow: $color-shadow--dark;
+    }
 }
 
 form header {
@@ -54,6 +59,10 @@ textarea {
     border-radius: $border-radius;
     margin-bottom: 1rem;
     padding: 0.4rem 0.8rem;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+    }
 }
 
 input[type="text"],
@@ -65,4 +74,8 @@ textarea {
 input[readonly],
 textarea[readonly] {
     background-color: $color-bg-secondary;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+    }
 }

scss/component/_list.scss

@@ -56,6 +56,11 @@ ul li {
     left: 0;
     /* Right */
     /* transform: translate(-50%, 0); */
+
+    @include color-scheme(dark) {
+        background-color: $color-bg--dark;
+        border-color: $color-bg-secondary--dark;
+    }
 }
 
 .inline-list li ul::before {

scss/component/_modal.scss

@@ -11,4 +11,9 @@
     transform: translate(-50%, -50%);
     width: 50%;
     z-index: 999;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+        box-shadow: $color-shadow--dark;
+    }
 }

scss/component/_quote.scss

@@ -17,4 +17,8 @@ blockquote footer{
     font-size: small;
     line-height: $line-height;
     padding: 1.5rem 0;
+
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
 }

scss/component/_table.scss

@@ -14,6 +14,10 @@ table {
     text-align: left;
     border-collapse: collapse;
     overflow-wrap: normal;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+    }
 }
 
 table td,
@@ -29,6 +33,11 @@ table thead tr {
     color: $color-bg;
     margin: 0;
     padding: 0;
+
+    @include color-scheme(dark) {
+        background-color: $color-table--dark;
+        color: $color-bg--dark;
+    }
 }
 
 table thead tr {
@@ -37,7 +46,15 @@ table thead tr {
 
 tbody tr:nth-child(even) {
     background-color: $color-accent;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+    }
 }
 tbody tr:nth-child(odd) {
-    background-color: #FFF;
+    background-color: $color-bg;
+    
+    @include color-scheme(dark) {
+        background-color: $color-bg--dark;
+    }
 }

scss/component/_tag.scss

@@ -12,4 +12,9 @@
     top:-2px;
     display: inline-block;
     vertical-align: middle;
+
+    @include color-scheme(dark) {
+        background-color: $color-secondary--dark;
+        color: $color-bg--dark;
+    }
 }

scss/layout/_nav.scss

@@ -5,5 +5,9 @@
     text-decoration: none;
 }
 .nav a{
-    color: #CCC;
+    color: $color-nav;
+
+    @include color-scheme(dark) {
+        color: $color-nav--dark;
+    }
 }

scss/utilities/_variables.scss

@@ -21,9 +21,9 @@ $color-bg-secondary--dark: #555;
 $color-link: #118bee;
 $color-link--dark: #0097fc;
 $color-secondary: #508ce2;
-$color-secondary--dark: #e20de9;
+$color-secondary--dark: #2c68bd;
 $color-secondary-accent: #dee9fa;
-$color-secondary-accent--dark: #e20de9;
+$color-secondary-accent--dark: #496282;
 $color-shadow: #f4f4f4;
 $color-shadow--dark: #bbbbbb20;
 $color-table: #118bee;
@@ -34,7 +34,24 @@ $color-text-secondary: #999;
 $color-text-secondary--dark: #aaa;
 
 $color-scrollbar: #cacae8;
-$color-scrollbar--dark: #cacae8;
+$color-scrollbar--dark: #EEE;
+
+$color-card: #FFF;
+$color-card--dark: #232323;
+$color-banner: #EEE;
+$color-banner--dark: #444;
+
+$color-highlight: #ff8c00;
+$color-highlight--dark: #a3600d;
+
+$color-nav: #CCC;
+$color-nav--dark: #CCC;
+
+// $alert-color:
+$alert-color--error: #e90d30;
+$alert-color--warning: #ddde11;
+$alert-color--success: #18ab34;
+
 $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 $justify-important: center;