Add color theme

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/colors.scss

@@ -0,0 +1,148 @@
+:root {
+  --text: #050c0e;
+  --background: #f1f8fa;
+  --primary: #51a9c3;
+  --secondary: #d88fb9;
+  --accent: #ce7f71;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #f0f8fa;
+    --background: #050d0f;
+    --primary: #3c94af;
+    --secondary: #712853;
+    --accent: #8d3e30;
+  }
+}
+
+:root {
+  --text-50: #ecf6f8;
+  --text-100: #daecf1;
+  --text-200: #b4dae4;
+  --text-300: #8fc7d6;
+  --text-400: #69b4c9;
+  --text-500: #44a1bb;
+  --text-600: #368196;
+  --text-700: #296170;
+  --text-800: #1b414b;
+  --text-900: #0e2025;
+  --text-950: #071013;
+
+  --background-50: #ecf6f8;
+  --background-100: #daecf1;
+  --background-200: #b4dae4;
+  --background-300: #8fc7d6;
+  --background-400: #69b4c9;
+  --background-500: #44a1bb;
+  --background-600: #368196;
+  --background-700: #296170;
+  --background-800: #1b414b;
+  --background-900: #0e2025;
+  --background-950: #071013;
+
+  --primary-50: #ecf6f8;
+  --primary-100: #d9ecf2;
+  --primary-200: #b3d9e5;
+  --primary-300: #8dc6d8;
+  --primary-400: #67b4cb;
+  --primary-500: #41a1be;
+  --primary-600: #348198;
+  --primary-700: #276072;
+  --primary-800: #1a404c;
+  --primary-900: #0d2026;
+  --primary-950: #071013;
+
+  --secondary-50: #f8ecf3;
+  --secondary-100: #f2d9e8;
+  --secondary-200: #e4b4d0;
+  --secondary-300: #d78eb9;
+  --secondary-400: #ca68a1;
+  --secondary-500: #bd428a;
+  --secondary-600: #97356e;
+  --secondary-700: #712853;
+  --secondary-800: #4b1b37;
+  --secondary-900: #260d1c;
+  --secondary-950: #13070e;
+
+  --accent-50: #f8eeec;
+  --accent-100: #f2ddd9;
+  --accent-200: #e5bbb3;
+  --accent-300: #d8988d;
+  --accent-400: #cb7667;
+  --accent-500: #be5441;
+  --accent-600: #984334;
+  --accent-700: #723227;
+  --accent-800: #4c221a;
+  --accent-900: #26110d;
+  --accent-950: #130807;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-50: #061113;
+    --text-100: #0d2126;
+    --text-200: #19424d;
+    --text-300: #266373;
+    --text-400: #338599;
+    --text-500: #40a6bf;
+    --text-600: #66b8cc;
+    --text-700: #8cc9d9;
+    --text-800: #b3dbe6;
+    --text-900: #d9edf2;
+    --text-950: #ecf6f9;
+
+    --background-50: #061113;
+    --background-100: #0d2126;
+    --background-200: #19424d;
+    --background-300: #266373;
+    --background-400: #338599;
+    --background-500: #40a6bf;
+    --background-600: #66b8cc;
+    --background-700: #8cc9d9;
+    --background-800: #b3dbe6;
+    --background-900: #d9edf2;
+    --background-950: #ecf6f9;
+
+    --primary-50: #071013;
+    --primary-100: #0d2026;
+    --primary-200: #1a404c;
+    --primary-300: #276072;
+    --primary-400: #348198;
+    --primary-500: #41a1be;
+    --primary-600: #67b4cb;
+    --primary-700: #8dc6d8;
+    --primary-800: #b3d9e5;
+    --primary-900: #d9ecf2;
+    --primary-950: #ecf6f8;
+
+    --secondary-50: #13070e;
+    --secondary-100: #260d1c;
+    --secondary-200: #4b1b37;
+    --secondary-300: #712853;
+    --secondary-400: #97356e;
+    --secondary-500: #bd428a;
+    --secondary-600: #ca68a1;
+    --secondary-700: #d78eb9;
+    --secondary-800: #e4b4d0;
+    --secondary-900: #f2d9e8;
+    --secondary-950: #f8ecf3;
+
+    --accent-50: #130807;
+    --accent-100: #26110d;
+    --accent-200: #4c221a;
+    --accent-300: #723227;
+    --accent-400: #984334;
+    --accent-500: #be5441;
+    --accent-600: #cb7667;
+    --accent-700: #d8988d;
+    --accent-800: #e5bbb3;
+    --accent-900: #f2ddd9;
+    --accent-950: #f8eeec;
+  }
+}
+
+html {
+  background: var(--background);
+  color: var(--text);
+}

assets/sass/fonts.scss

@@ -0,0 +1,12 @@
+:root {
+  --line-height: 1.5;
+  --font-family:
+    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+html {
+  font-size: 100%;
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+}

assets/sass/main.scss

@@ -1,32 +1,4 @@
-:root {
-  --color-bg: #ffffff;
-  --color-fg: #111111;
-  --color-accent: #007acc;
-
-  --width-mobile: 32rem;
-  --width-content: 48rem;
-  --width-max: 60rem;
-
-  --line-height: 1.5;
-  --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: #121212;
-    --color-fg: #f5f5f5;
-    --color-accent: #4dabf7;
-  }
-}
-
-html {
-  font-size: 100%;
-  font-family: var(--font-family);
-  line-height: var(--line-height);
-
-  background: var(--color-bg);
-  color: var(--color-fg);
-}
+@import "colors";
+@import "fonts";
 
 @import "header";