Merge branch 'main' of github.com:mmz-srf/srf-weather-widget into main

mmz-srf · Oct 2, 2023 · 450c98a · 450c98a
2 parents 9b4beb0 + 1582f97
commit 450c98a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/client/src/lib/RainBar.svelte b/client/src/lib/RainBar.svelte
@@ -1,11 +1,15 @@
 <script>
   export let rainInMM;
+
+  $: isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 </script>
 
 <div class="h-[30px] w-full flex flex-col-reverse items-center relative mt-2">
   <div
-    class="absolute h-full w-full"
-    style={`background: linear-gradient(180deg, rgba(11, 95, 161, 1), rgba(11, 95, 161, 1) 1px, transparent 1%, transparent); background-size: 100% 5px;`}
+    class="absolute w-full h-full"
+    style={isDarkMode
+      ? `background: linear-gradient(180deg, rgba(0, 64, 114, 1), rgba(0, 64, 114, 1) 1px, transparent 1%, transparent); background-size: 100% 5px;`
+      : `background: linear-gradient(180deg, rgba(11, 95, 161, 1), rgba(11, 95, 161, 1) 1px, transparent 1%, transparent); background-size: 100% 5px;`}
   />
   <div
     class="bg-sky-500 w-1/2 max-h-8 absolute bottom-[4px]"

diff --git a/client/src/lib/WeatherOverview.svelte b/client/src/lib/WeatherOverview.svelte
@@ -45,10 +45,10 @@
 </script>
 
 <div
-  class="flex flex-col w-full max-w-sm tracking-widest text-white shadow-lg shadow-gray-400 rounded-xl bg-widget-dark"
+  class="flex flex-col w-full max-w-sm tracking-widest text-white shadow-lg shadow-gray-400 rounded-xl dark:bg-widget-dark bg-widget-light"
 >
   <div
-    class="flex flex-row items-center justify-between w-full max-w-sm tracking-widest text-white rounded-xl bg-widget-dark"
+    class="flex flex-row items-center justify-between w-full max-w-sm tracking-widest text-white rounded-xl"
   >
     <div class="flex flex-col my-4 ml-6 space-y-1">
       <h2 class="text-sm">
@@ -73,7 +73,7 @@
   </div>
   {#if ["L", "M"].includes(size.toUpperCase())}
     <div
-      class="flex flex-row mb-2 ml-6 mr-1 space-x-6 overflow-scroll text-xs font-bold scrollbar-hide scroll-shadow"
+      class="flex flex-row mb-4 ml-5 mr-1 space-x-6 overflow-scroll text-xs font-bold scrollbar-hide scroll-shadow"
     >
       {#each forecastItems as item, index}
         <ForecastItem
@@ -101,18 +101,37 @@
     scrollbar-width: none; /* Firefox */
   }
 
-  .scroll-shadow {
-    background-image: linear-gradient(
-        to right,
-        rgba(8, 81, 139, 1),
-        rgba(8, 81, 139, 1)
-      ),
-      linear-gradient(to right, rgba(8, 81, 139, 1), rgba(8, 81, 139, 1)),
-      linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
-      linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
-    background-position: left center, right center, left center, right center;
-    background-repeat: no-repeat;
-    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
-    background-attachment: local, local, scroll, scroll;
+  @media screen and (prefers-color-scheme: dark) {
+    .scroll-shadow {
+      background-image: linear-gradient(
+          to right,
+          rgba(8, 81, 139, 1),
+          rgba(8, 81, 139, 1)
+        ),
+        linear-gradient(to right, rgba(8, 81, 139, 1), rgba(8, 81, 139, 1)),
+        linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
+        linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+      background-position: left center, right center, left center, right center;
+      background-repeat: no-repeat;
+      background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+      background-attachment: local, local, scroll, scroll;
+    }
+  }
+
+  @media screen and (prefers-color-scheme: light) {
+    .scroll-shadow {
+      background-image: linear-gradient(
+          to right,
+          rgba(10, 103, 176, 1),
+          rgba(10, 103, 176, 1)
+        ),
+        linear-gradient(to right, rgba(10, 103, 176, 1), rgba(10, 103, 176, 1)),
+        linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
+        linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+      background-position: left center, right center, left center, right center;
+      background-repeat: no-repeat;
+      background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+      background-attachment: local, local, scroll, scroll;
+    }
   }
 </style>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -5,6 +5,7 @@ export default {
       colors: {
         widget: {
           dark: "#08518B",
+          light: "#0A67B0",
         },
       },
     },