Update core files

styles/globals.scss

@@ -1,11 +1,8 @@
 @import "~meyer-reset-scss";
+@import "themes.scss";
 
 html {
-  @include themed() {
-    background-color: t($background);
-  }
-
-  background: $background-color;
+  background-color: var(--background);
   font-size: 62.5%;
   height: 100%;
 }
@@ -36,27 +33,27 @@ a {
   text-decoration: none;
 
   &.wind {
-    color: $wind-text-dark;
+    color: $wind-text-10;
   }
 
   &.fire {
-    color: $fire-text-dark;
+    color: $fire-text-10;
   }
 
   &.water {
-    color: $water-text-dark;
+    color: $water-text-10;
   }
 
   &.earth {
-    color: $earth-text-dark;
+    color: $earth-text-10;
   }
 
   &.dark {
-    color: $dark-text-dark;
+    color: $dark-text-10;
   }
 
   &.light {
-    color: $light-text-dark;
+    color: $light-text-10;
   }
 }
 
@@ -70,7 +67,7 @@ h1,
 h2,
 h3,
 p {
-  color: $grey-00;
+  color: $grey-10;
 }
 
 h1 {
@@ -88,7 +85,7 @@ select {
   background-size: $unit * 1.5;
   border: none;
   border-radius: 6px;
-  color: $grey-00;
+  color: $grey-10;
   margin-bottom: $unit;
   font-size: $font-regular;
   padding: 0 ($unit * 2);
@@ -270,27 +267,27 @@ select {
       opacity: 0.7;
 
       &.wind {
-        color: $wind-bg-light;
+        color: $wind-bg-20;
       }
 
       &.fire {
-        color: $fire-bg-light;
+        color: $fire-bg-20;
       }
 
       &.water {
-        color: $water-bg-light;
+        color: $water-bg-20;
       }
 
       &.earth {
-        color: $earth-bg-light;
+        color: $earth-bg-20;
       }
 
       &.dark {
-        color: $dark-bg-light;
+        color: $dark-bg-10;
       }
 
       &.light {
-        color: $light-bg-light;
+        color: $light-bg-20;
       }
     }
   }
@@ -329,27 +326,27 @@ img.profile {
   background: $grey-90;
 
   &.fire {
-    background: $fire-bg-light;
+    background: $fire-bg-20;
   }
 
   &.water {
-    background: $water-bg-light;
+    background: $water-bg-20;
   }
 
   &.wind {
-    background: $wind-bg-light;
+    background: $wind-bg-20;
   }
 
   &.earth {
-    background: $earth-bg-light;
+    background: $earth-bg-20;
   }
 
   &.dark {
-    background: $dark-bg-light;
+    background: $dark-bg-10;
   }
 
   &.light {
-    background: $light-bg-light;
+    background: $light-bg-20;
   }
 }
 

styles/themes.scss

@@ -0,0 +1,49 @@
+:root {
+  --background: #{$page--bg--light};
+  --page-hover: #{$page--hover--light};
+  --card-bg: white;
+
+  --text-primary: #{$text--primary--color--light};
+  --text-secondary: #{$text--secondary--color--light};
+
+  --icon-secondary: #{$icon--secondary--color--light};
+  --icon-secondary-hover: #{$icon--secondary--hover--light};
+  --switch-nub: #{$switch--nub--bg--light};
+
+  --wind-hover-bg: #{$wind-bg-20};
+  --wind-hover-text: #{$wind-text-20};
+  --fire-hover-bg: #{$fire-bg-20};
+  --fire-hover-text: #{$fire-text-20};
+  --water-hover-bg: #{$water-bg-20};
+  --water-hover-text: #{$water-text-20};
+  --earth-hover-bg: #{$earth-bg-20};
+  --earth-hover-text: #{$earth-text-20};
+  --dark-hover-bg: #{$dark-bg-20};
+  --dark-hover-text: #{$dark-text-20};
+  --light-hover-bg: #{$light-bg-20};
+  --light-hover-text: #{$light-text-20};
+}
+
+[data-theme="dark"] {
+  --background: #{$page--bg--dark};
+  --page-hover: #{$page--hover--dark};
+  --card-bg: #{$page--element--bg--dark};
+
+  --text-primary: #{$text--primary--color--dark};
+  --text-secondary: #{$text--secondary--color--dark};
+
+  --icon-secondary: #{$icon--secondary--color--dark};
+  --icon-secondary-hover: #{$icon--secondary--hover--dark};
+  --switch-nub: #{$switch--nub--bg--dark};
+
+  --wind-hover-bg: #{$wind-bg-00};
+  --wind-hover-text: #{$wind-text-00};
+  --fire-hover-bg: #{$fire-bg-00};
+  --fire-hover-text: #{$fire-text-00};
+  --earth-hover-bg: #{$earth-bg-00};
+  --earth-hover-text: #{$earth-text-00};
+  --dark-hover-bg: #{$dark-bg-00};
+  --dark-hover-text: #{$dark-text-00};
+  --light-hover-bg: #{$light-bg-00};
+  --light-hover-text: #{$light-text-00};
+}

styles/variables.scss

@@ -23,10 +23,29 @@ $grey-70: #c6c6c6;
 $grey-80: #e9e9e9;
 $grey-90: #f5f5f5;
 $grey-100: #fafafa;
-$background-color: $grey-90;
 
 $page--bg--light: $grey-90;
-$page--bg--dark: $grey-00;
+$page--bg--dark: $grey-10;
+
+$page--hover--light: $grey-90;
+$page--hover--dark: $grey-15;
+
+$page--element--bg--light: $grey-70;
+$page--element--bg--dark: $grey-20;
+
+$switch--nub--bg--light: $grey-80;
+$switch--nub--bg--dark: $grey-15;
+
+$text--primary--color--light: $grey-20;
+$text--primary--color--dark: $grey-90;
+
+$text--secondary--color--light: $grey-10;
+$text--secondary--color--dark: $grey-70;
+
+$icon--secondary--color--light: $grey-70;
+$icon--secondary--color--dark: $grey-40;
+$icon--secondary--hover--light: $grey-40;
+$icon--secondary--hover--dark: $grey-70;
 
 $blue: #275dc5;
 $red: #ff6161;