From 1f1dc65a97399c6da9c85522db701257543cd380 Mon Sep 17 00:00:00 2001
From: HorizonCode <horizoncode88@gmail.com>
Date: Wed, 10 Jan 2024 14:50:58 +0100
Subject: [PATCH] make darkmode dependent on system color scheme

---
 src/App.svelte      |  5 +++--
 src/app.pcss        | 37 ++++++++++++++++++++-----------------
 tailwind.config.cjs |  2 +-
 tsconfig.json       |  2 +-
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 8834864..0051df4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -23,6 +23,7 @@
 
   let patch = true;
   let loading = false;
+  let currentStatus = "Preparing launch...";
   let rand = 0;
 </script>
 
@@ -34,7 +35,6 @@
     >
   </div>
   <div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
-    <DarkMode class="dark:border-gray-700"></DarkMode>
     <Avatar
       class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
       src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
@@ -102,6 +102,7 @@
     <Button
       color="light"
       size="xl"
+      class="active:!bg-gray-900"
       on:click={() => {
         rand = Math.random() * 100;
         loading = true;
@@ -112,7 +113,7 @@
     </Checkbox>
     {#if loading}
       <div class="w-full flex flex-col justify-center items-center gap-2">
-        <p class="m-0 p-0 dark:text-gray-100">Waiting...</p>
+        <p class="m-0 p-0 dark:text-gray-100">{currentStatus}</p>
         <Progressbar
           animate={true}
           progress={rand}
diff --git a/src/app.pcss b/src/app.pcss
index 561d0cf..9f37220 100644
--- a/src/app.pcss
+++ b/src/app.pcss
@@ -12,19 +12,10 @@ html .cet-titlebar {
   color: #202020 !important;
 }
 
-html.dark .cet-titlebar {
-  background-color: #202020 !important;
-  color: #ececec !important;
-}
-
 html .cet-titlebar .cet-control-icon svg {
   fill: #000;
 }
 
-html.dark .cet-titlebar .cet-control-icon svg {
-  fill: #fff;
-}
-
 .cet-titlebar .cet-icon {
   display: none;
 }
@@ -42,15 +33,27 @@ html.dark .cet-titlebar .cet-control-icon svg {
   animation: progress-loading 5s ease-in-out infinite;
 }
 
-html.dark .indeterminate {
-  background-image: repeating-linear-gradient(
-    90deg,
-    rgb(217 5 89) -1%,
-    rgb(217 5 89) 10%,
-    #535353 10%,
-    #535353 90%
-  );
+@media (prefers-color-scheme: dark) {
+  .indeterminate {
+    background-image: repeating-linear-gradient(
+      90deg,
+      rgb(217 5 89) -1%,
+      rgb(217 5 89) 10%,
+      #535353 10%,
+      #535353 90%
+    );
+  }
+
+  html .cet-titlebar .cet-control-icon svg {
+    fill: #fff;
+  }
+
+  html .cet-titlebar {
+    background-color: #202020 !important;
+    color: #ececec !important;
+  }
 }
+
 @keyframes progress-loading {
   50% {
     background-position-x: -115%;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7b0c67a..c788d9f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,7 +4,7 @@ const config = {
     "./src/**/*.{html,js,svelte,ts}",
     "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
   ],
-  darkMode: "class",
+  darkMode: "media",
   theme: {
     extend: {
       colors: {
diff --git a/tsconfig.json b/tsconfig.json
index 25c2d9f..5263aed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
+  "extends": "./node_modules/@tsconfig/svelte/tsconfig.json",
 
   "include": ["src/**/*"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],