Add dark- and lightmode to styles

styleguide/assets/style/main.css

@@ -54,7 +54,7 @@
   --color-red-800: #780404;
   --color-red-900: #5C0202;
   --color-red-950: #3F0101;
-  --color-dark-foreground: var(--color-neutral-100);
+  --color-dark-foreground: var(--color-neutral-50);
   --color-dark-background: var(--color-neutral-900);
   --color-dark-shade-1: var(--color-neutral-800);
   --color-dark-shade-2: var(--color-neutral-700);
@@ -68,11 +68,11 @@
   --color-dark-accent-2: #d381f7;
   --color-dark-accent-3: #ff7975;
   --color-light-foreground: var(--color-neutral-900);
-  --color-light-background: var(--color-neutral-100);
+  --color-light-background: var(--color-neutral-50);
-  --color-light-shade-1: var(--color-neutral-200);
+  --color-light-shade-1: var(--color-neutral-100);
-  --color-light-shade-2: var(--color-neutral-300);
+  --color-light-shade-2: var(--color-neutral-200);
-  --color-light-shade-3: var(--color-neutral-400);
+  --color-light-shade-3: var(--color-neutral-300);
-  --color-light-shade-4: var(--color-neutral-500);
+  --color-light-shade-4: var(--color-neutral-400);
   --color-light-primary: var(--color-argon-600);
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);
@@ -84,6 +84,99 @@
   --swatch-redius: 0.5rem;
 }
 
+.dark {
+  --color-foreground: var(--color-dark-foreground);
+  --color-background: var(--color-dark-background);
+  --color-shade-1: var(--color-dark-shade-1);
+  --color-shade-2: var(--color-dark-shade-2);
+  --color-shade-3: var(--color-dark-shade-3);
+  --color-shade-4: var(--color-dark-shade-4);
+  --color-primary: var(--color-dark-primary);
+  --color-secondary: var(--color-dark-secondary);
+  --color-error: var(--color-dark-error);
+  --color-success: var(--color-dark-success);
+  --color-accent-1: var(--color-dark-accent-1);
+  --color-accent-2: var(--color-dark-accent-2);
+  --color-accent-3: var(--color-dark-accent-3);
+}
+
+.light {
+  --color-foreground: var(--color-light-foreground);
+  --color-background: var(--color-light-background);
+  --color-shade-1: var(--color-light-shade-1);
+  --color-shade-2: var(--color-light-shade-2);
+  --color-shade-3: var(--color-light-shade-3);
+  --color-shade-4: var(--color-light-shade-4);
+  --color-primary: var(--color-light-primary);
+  --color-secondary: var(--color-light-secondary);
+  --color-error: var(--color-light-error);
+  --color-success: var(--color-light-success);
+  --color-accent-1: var(--color-light-accent-1);
+  --color-accent-2: var(--color-light-accent-2);
+  --color-accent-3: var(--color-light-accent-3);
+}
+
+html, html.light {
+  --color-foreground: var(--color-light-foreground);
+  --color-background: var(--color-light-background);
+  --color-shade-1: var(--color-light-shade-1);
+  --color-shade-2: var(--color-light-shade-2);
+  --color-shade-3: var(--color-light-shade-3);
+  --color-shade-4: var(--color-light-shade-4);
+  --color-primary: var(--color-light-primary);
+  --color-secondary: var(--color-light-secondary);
+  --color-error: var(--color-light-error);
+  --color-success: var(--color-light-success);
+  --color-accent-1: var(--color-light-accent-1);
+  --color-accent-2: var(--color-light-accent-2);
+  --color-accent-3: var(--color-light-accent-3);
+}
+
+html.dark {
+  --color-foreground: var(--color-dark-foreground);
+  --color-background: var(--color-dark-background);
+  --color-shade-1: var(--color-dark-shade-1);
+  --color-shade-2: var(--color-dark-shade-2);
+  --color-shade-3: var(--color-dark-shade-3);
+  --color-shade-4: var(--color-dark-shade-4);
+  --color-primary: var(--color-dark-primary);
+  --color-secondary: var(--color-dark-secondary);
+  --color-error: var(--color-dark-error);
+  --color-success: var(--color-dark-success);
+  --color-accent-1: var(--color-dark-accent-1);
+  --color-accent-2: var(--color-dark-accent-2);
+  --color-accent-3: var(--color-dark-accent-3);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --color-foreground: var(--color-dark-foreground);
+    --color-background: var(--color-dark-background);
+    --color-shade-1: var(--color-dark-shade-1);
+    --color-shade-2: var(--color-dark-shade-2);
+    --color-shade-3: var(--color-dark-shade-3);
+    --color-shade-4: var(--color-dark-shade-4);
+    --color-primary: var(--color-dark-primary);
+    --color-secondary: var(--color-dark-secondary);
+    --color-error: var(--color-dark-error);
+    --color-success: var(--color-dark-success);
+    --color-accent-1: var(--color-dark-accent-1);
+    --color-accent-2: var(--color-dark-accent-2);
+    --color-accent-3: var(--color-dark-accent-3);
+  }
+}
+body {
+  margin: 0;
+  padding: 1rem;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+.swatch-grid {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  padding: 1rem;
+}
 .swatch-grid section {
   display: flex;
   flex-wrap: wrap;

styleguide/assets/style/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA6CF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"main.css"}

styleguide/assets/style/main.scss

@@ -55,7 +55,7 @@
   --color-red-900: #5C0202;
   --color-red-950: #3F0101;
 
-  --color-dark-foreground: var(--color-neutral-100);
+  --color-dark-foreground: var(--color-neutral-50);
   --color-dark-background: var(--color-neutral-900);
   --color-dark-shade-1: var(--color-neutral-800);
   --color-dark-shade-2: var(--color-neutral-700);
@@ -70,11 +70,11 @@
   --color-dark-accent-3: #ff7975;
 
   --color-light-foreground: var(--color-neutral-900);
-  --color-light-background: var(--color-neutral-100);
+  --color-light-background: var(--color-neutral-50);
-  --color-light-shade-1: var(--color-neutral-200);
+  --color-light-shade-1: var(--color-neutral-100);
-  --color-light-shade-2: var(--color-neutral-300);
+  --color-light-shade-2: var(--color-neutral-200);
-  --color-light-shade-3: var(--color-neutral-400);
+  --color-light-shade-3: var(--color-neutral-300);
-  --color-light-shade-4: var(--color-neutral-500);
+  --color-light-shade-4: var(--color-neutral-400);
   --color-light-primary: var(--color-argon-600);
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);
@@ -87,8 +87,76 @@
   --swatch-redius: 0.5rem;
 }
 
+@mixin theme_dark() {
+  --color-foreground: var(--color-dark-foreground);
+  --color-background: var(--color-dark-background);
+  --color-shade-1: var(--color-dark-shade-1);
+  --color-shade-2: var(--color-dark-shade-2);
+  --color-shade-3: var(--color-dark-shade-3);
+  --color-shade-4: var(--color-dark-shade-4);
+  --color-primary: var(--color-dark-primary);
+  --color-secondary: var(--color-dark-secondary);
+  --color-error: var(--color-dark-error);
+  --color-success: var(--color-dark-success);
+  --color-accent-1: var(--color-dark-accent-1);
+  --color-accent-2: var(--color-dark-accent-2);
+  --color-accent-3: var(--color-dark-accent-3);
+}
+
+@mixin theme_light() {
+  --color-foreground: var(--color-light-foreground);
+  --color-background: var(--color-light-background);
+  --color-shade-1: var(--color-light-shade-1);
+  --color-shade-2: var(--color-light-shade-2);
+  --color-shade-3: var(--color-light-shade-3);
+  --color-shade-4: var(--color-light-shade-4);
+  --color-primary: var(--color-light-primary);
+  --color-secondary: var(--color-light-secondary);
+  --color-error: var(--color-light-error);
+  --color-success: var(--color-light-success);
+  --color-accent-1: var(--color-light-accent-1);
+  --color-accent-2: var(--color-light-accent-2);
+  --color-accent-3: var(--color-light-accent-3);
+}
+
+.dark {
+  @include theme_dark();
+}
+
+.light {
+  @include theme_light();
+}
+
+html, html.light {
+  @include theme_light();
+}
+
+html.dark {
+  @include theme_dark();
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    @include theme_dark();
+  }
+}
+
+
+// Styling of components begins here
+
+
+body {
+  margin: 0;
+  padding: 1rem;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
 
 .swatch-grid {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  padding: 1rem;
   section {
     display: flex;
     flex-wrap: wrap;