make darkmode dependent on system color scheme

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}

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%;

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: {

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/*"],