dark and light mode proper

public/styles/css/classes.css

@@ -11,7 +11,7 @@
     border-radius: 3px;
 
     opacity: 0.9;
-    background: linear-gradient(to bottom right, var(--background-950), var(--background-900));
+    background: var(--content-gradient);
 
     -webkit-box-shadow: 0 0 8px var(--accent);
     -moz-box-shadow: 0 0 8px var(--accent);

public/styles/css/color-scheme.css

@@ -1,69 +1,145 @@
-:root {
+@media (prefers-color-scheme: light) {
-    --text: #f2ede7;
+    :root {
-    --background: #0d0a06;
+        --text: #17120c;
-    --primary: #d7bfa2;
+        --background: var(--background-200);
-    --secondary: #76552e;
+        --primary: #5d4528;
-    --accent: #ffa941;
+        --secondary: #d1b189;
+        --accent: var(--accent-400);
 
-    --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
+        --content-gradient: linear-gradient(to bottom right, var(--background-700), var(--background-500));
+        --accent-gradient: linear-gradient(to bottom right, var(--accent-900), var(--accent-500) 30%, var(--text) 60%);
 
-    --text-50: #f6f3ee;
+        --text-50: #f6f3ee;
-    --text-100: #ede6de;
+        --text-100: #ede6de;
-    --text-200: #dbcebd;
+        --text-200: #dccebc;
-    --text-300: #c9b59c;
+        --text-300: #cab59b;
-    --text-400: #b89c7a;
+        --text-400: #b99c79;
-    --text-500: #a68359;
+        --text-500: #a78358;
-    --text-600: #856947;
+        --text-600: #866946;
-    --text-700: #634f36;
+        --text-700: #644f35;
-    --text-800: #423524;
+        --text-800: #433523;
-    --text-900: #211a12;
+        --text-900: #211a12;
-    --text-950: #110d09;
+        --text-950: #110d09;
 
-    --background-50: #f7f3ee;
+        --background-50: #f7f2ed;
-    --background-100: #efe7dc;
+        --background-100: #f0e6db;
-    --background-200: #dfcfb9;
+        --background-200: #e0ccb8;
-    --background-300: #cfb696;
+        --background-300: #d1b394;
-    --background-400: #bf9e73;
+        --background-400: #c29970;
-    --background-500: #af8650;
+        --background-500: #b3804d;
-    --background-600: #8c6b40;
+        --background-600: #8f663d;
-    --background-700: #695030;
+        --background-700: #6b4d2e;
-    --background-800: #463620;
+        --background-800: #47331f;
-    --background-900: #231b10;
+        --background-900: #241a0f;
-    --background-950: #110d08;
+        --background-950: #120d08;
 
-    --primary-50: #f7f3ed;
+        --primary-50: #f7f3ed;
-    --primary-100: #f0e7db;
+        --primary-100: #f0e7db;
-    --primary-200: #e0ceb8;
+        --primary-200: #e0ceb8;
-    --primary-300: #d1b694;
+        --primary-300: #d1b694;
-    --primary-400: #c29d70;
+        --primary-400: #c29d70;
-    --primary-500: #b3854d;
+        --primary-500: #b3854d;
-    --primary-600: #8f6a3d;
+        --primary-600: #8f6a3d;
-    --primary-700: #6b502e;
+        --primary-700: #6b502e;
-    --primary-800: #47351f;
+        --primary-800: #47351f;
-    --primary-900: #241b0f;
+        --primary-900: #241b0f;
-    --primary-950: #120d08;
+        --primary-950: #120d08;
 
-    --secondary-50: #f8f3ed;
+        --secondary-50: #f8f3ed;
-    --secondary-100: #f1e7da;
+        --secondary-100: #f1e7da;
-    --secondary-200: #e2ceb6;
+        --secondary-200: #e2ceb6;
-    --secondary-300: #d4b691;
+        --secondary-300: #d4b691;
-    --secondary-400: #c69d6c;
+        --secondary-400: #c69d6c;
-    --secondary-500: #b88547;
+        --secondary-500: #b88547;
-    --secondary-600: #936a39;
+        --secondary-600: #936a39;
-    --secondary-700: #6e502b;
+        --secondary-700: #6e502b;
-    --secondary-800: #49351d;
+        --secondary-800: #49351d;
-    --secondary-900: #251b0e;
+        --secondary-900: #251b0e;
-    --secondary-950: #120d07;
+        --secondary-950: #120d07;
 
-    --accent-50: #fff4e5;
+        --accent-50: #fff4e5;
-    --accent-100: #ffe8cc;
+        --accent-100: #ffe8cc;
-    --accent-200: #ffd199;
+        --accent-200: #ffd199;
-    --accent-300: #ffba66;
+        --accent-300: #ffba66;
-    --accent-400: #ffa333;
+        --accent-400: #ffa333;
-    --accent-500: #ff8c00;
+        --accent-500: #ff8c00;
-    --accent-600: #cc7000;
+        --accent-600: #cc7000;
-    --accent-700: #995400;
+        --accent-700: #995400;
-    --accent-800: #663800;
+        --accent-800: #663800;
-    --accent-900: #331c00;
+        --accent-900: #331c00;
-    --accent-950: #1a0e00;
+        --accent-950: #1a0e00;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text: #f2ede7;
+        --background: #0d0a06;
+        --primary: #d7bfa2;
+        --secondary: #76552e;
+        --accent: #ffa941;
+
+        --content-gradient: linear-gradient(to bottom right, var(--background-950), var(--background-900));
+        --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
+
+        --text-50: #f6f3ee;
+        --text-100: #ede6de;
+        --text-200: #dbcebd;
+        --text-300: #c9b59c;
+        --text-400: #b89c7a;
+        --text-500: #a68359;
+        --text-600: #856947;
+        --text-700: #634f36;
+        --text-800: #423524;
+        --text-900: #211a12;
+        --text-950: #110d09;
+
+        --background-50: #f7f3ee;
+        --background-100: #efe7dc;
+        --background-200: #dfcfb9;
+        --background-300: #cfb696;
+        --background-400: #bf9e73;
+        --background-500: #af8650;
+        --background-600: #8c6b40;
+        --background-700: #695030;
+        --background-800: #463620;
+        --background-900: #231b10;
+        --background-950: #110d08;
+
+        --primary-50: #f7f3ed;
+        --primary-100: #f0e7db;
+        --primary-200: #e0ceb8;
+        --primary-300: #d1b694;
+        --primary-400: #c29d70;
+        --primary-500: #b3854d;
+        --primary-600: #8f6a3d;
+        --primary-700: #6b502e;
+        --primary-800: #47351f;
+        --primary-900: #241b0f;
+        --primary-950: #120d08;
+
+        --secondary-50: #f8f3ed;
+        --secondary-100: #f1e7da;
+        --secondary-200: #e2ceb6;
+        --secondary-300: #d4b691;
+        --secondary-400: #c69d6c;
+        --secondary-500: #b88547;
+        --secondary-600: #936a39;
+        --secondary-700: #6e502b;
+        --secondary-800: #49351d;
+        --secondary-900: #251b0e;
+        --secondary-950: #120d07;
+
+        --accent-50: #fff4e5;
+        --accent-100: #ffe8cc;
+        --accent-200: #ffd199;
+        --accent-300: #ffba66;
+        --accent-400: #ffa333;
+        --accent-500: #ff8c00;
+        --accent-600: #cc7000;
+        --accent-700: #995400;
+        --accent-800: #663800;
+        --accent-900: #331c00;
+        --accent-950: #1a0e00;
+    }
 }

public/styles/css/main.css

@@ -1,3 +1,4 @@
+
 @import "color-scheme.css";
 @import "classes.css";
 

src/layouts/Layout.astro

@@ -12,6 +12,5 @@ import Footer from "../components/Footer.astro";
     <slot />
     <Footer />
     <script type="text/javascript" src="/scripts/sga.js"></script>
-    <script type="text/javascript" src="/scripts/test.js"></script>
   </body>
 </html>