feat: Added a light version and an automatic (light/dark) version for each theme

sass/color/background_auto.scss

@@ -0,0 +1,14 @@
+:root {
+
+  @media (prefers-color-scheme: light) {
+    --background: white;
+  
+    --color: #101010;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background: #101010;
+  
+    --color: #A9B7C6;
+  }
+}

sass/color/background_light.scss

@@ -0,0 +1,3 @@
+:root {
+  --background: #f0f0f0;
+}

sass/color/blue-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(35,176,255);
+    --accent-alpha-70: rgba(35,176,255,.7);
+    --accent-alpha-20: rgba(35,176,255,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(32,128,192);
+    --accent-alpha-70: rgba(32,128,192,.7);
+    --accent-alpha-20: rgba(32,128,192,.2);
+
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/blue-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(32,128,192);
+  --accent-alpha-70: rgba(32,128,192,.7);
+  --accent-alpha-20: rgba(32,128,192,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/green-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(120,226,160);
+    --accent-alpha-70: rgba(120,226,160,.7);
+    --accent-alpha-20: rgba(120,226,160,.2);
+  
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(24, 192, 128);
+    --accent-alpha-70: rgba(24, 192, 128,.7);
+    --accent-alpha-20: rgba(24, 192, 128,.2);
+
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125)
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/green-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(24, 192, 128);
+  --accent-alpha-70: rgba(24, 192, 128,.7);
+  --accent-alpha-20: rgba(24, 192, 128,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/orange-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(255,168,106);
+    --accent-alpha-70: rgba(255,168,106,.7);
+    --accent-alpha-20: rgba(255,168,106,.2);
+  
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(240,128,48);
+    --accent-alpha-70: rgba(240,128,48,.7);
+    --accent-alpha-20: rgba(240,128,48,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/orange-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(240,128,48);
+  --accent-alpha-70: rgba(240,128,48,.7);
+  --accent-alpha-20: rgba(240,128,48,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/pink-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(224,64,192);
+    --accent-alpha-70: rgba(224,64,192);
+    --accent-alpha-20: rgba(224,64,192,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(238,114,241);
+    --accent-alpha-70: rgba(238,114,241,.7);
+    --accent-alpha-20: rgba(238,114,241,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/pink-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(224,64,192);
+  --accent-alpha-70: rgba(224,64,192);
+  --accent-alpha-20: rgba(224,64,192,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/red-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(255,98,102);
+    --accent-alpha-70: rgba(255,98,102,.7);
+    --accent-alpha-20: rgba(255,98,102,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(240,48,64);
+    --accent-alpha-70: rgba(240,48,64,.7);
+    --accent-alpha-20: rgba(240,48,64,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/red-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(240,48,64);
+  --accent-alpha-70: rgba(240,48,64,.7);
+  --accent-alpha-20: rgba(240,48,64,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}