added css variables

resources/css/app.scss

@@ -15,11 +15,14 @@ html {
 
 html,
 body {
-    font-family: $font-family;
-    font-size: $font-size;
-    color: $font-color;
+    font-family: $default-font-family;
+    font-size: $default-font-size;
+    background-color: var(--base-colour);
+    color: var(--base-colour-text);
+    width: 100vw;
     min-height: 100vh;
-    background-color: $background-color;
+    min-width: 100vw;
+    overflow-x: hidden;
 }
 
 // Who knows why ion-icon randomally sets this to hidden.....

resources/css/variables.scss

@@ -1,7 +1,27 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;1000&display=swap");
 
-$font-family: "Nunito", "Nunito override", "Arial", "Helvetica", sans-serif;
-$font-size: 1.1rem;
+:root {
+    --base-colour: #efefef;
+    --base-colour-text: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --base-colour: #333;
+        --base-colour-text: #efefef;
+    }
+}
+
+$default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
+    sans-serif;
+$default-font-size: 18px;
+
+$base-colour: #efefef;
+
+/* interim */
+$font-size: $default-font-size;
+
+/* old variables */
 
 $font-color: rgba(255, 255, 255, 1);
 $background-color: rgba(40, 44, 48, 1);