Initial commit

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_blue.scss

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

sass/color/background_dark.scss

@@ -0,0 +1,5 @@
+:root {
+  --background: #101010;
+
+  --color: #A9B7C6;
+}

sass/color/background_green.scss

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

sass/color/background_light.scss

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

sass/color/background_orange.scss

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

sass/color/background_pink.scss

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

sass/color/background_red.scss

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

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/blue.scss

@@ -0,0 +1,9 @@
+:root {
+  --accent: rgb(35,176,255);
+  --accent-alpha-70: rgba(35,176,255,.7);
+  --accent-alpha-20: rgba(35,176,255,.2);
+
+  --background: #1D212C;
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

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/green.scss

@@ -0,0 +1,9 @@
+:root {
+  --accent: rgb(120,226,160);
+  --accent-alpha-70: rgba(120,226,160,.7);
+  --accent-alpha-20: rgba(120,226,160,.2);
+
+  --background: #1F222A;
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

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/orange.scss

@@ -0,0 +1,9 @@
+:root {
+  --accent: rgb(255,168,106);
+  --accent-alpha-70: rgba(255,168,106,.7);
+  --accent-alpha-20: rgba(255,168,106,.2);
+
+  --background: #222129;
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

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/pink.scss

@@ -0,0 +1,9 @@
+:root {
+  --accent: rgb(238,114,241);
+  --accent-alpha-70: rgba(238,114,241,.7);
+  --accent-alpha-20: rgba(238,114,241,.2);
+
+  --background: #21202C;
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

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;
+  }
+}

sass/color/red.scss

@@ -0,0 +1,9 @@
+:root {
+  --accent: rgb(255,98,102);
+  --accent-alpha-70: rgba(255,98,102,.7);
+  --accent-alpha-20: rgba(255,98,102,.2);
+
+  --background: #221F29;
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}