Add dark theme (no way to change to it yet)

8 files changed, 32 insertions, 12 deletions

diff --git a/src/components/Basic/Bar.svelte b/src/components/Basic/Bar.svelte
index 1b4584d..5715b41 100644
--- a/src/components/Basic/Bar.svelte
+++ b/src/components/Basic/Bar.svelte
@@ -31,11 +31,7 @@
         width: 100%;
         right: calc(100% - var(--progress));
         overflow: hidden;
-        background: linear-gradient(90deg, 
-                                    rgba(255, 42,228,1) 0%,
-                                    rgba(164,255,177,1) 60%, 
-                                    rgba(214,255,241,1) 85%,
-                                    rgba(247,250,252,1) 100%); 
+        background: var(--gradient-2, green); 
         border-radius: 15px;
     }
 
diff --git a/src/components/Basic/Chip.svelte b/src/components/Basic/Chip.svelte
index b8697ae..19fa36c 100644
--- a/src/components/Basic/Chip.svelte
+++ b/src/components/Basic/Chip.svelte
@@ -3,7 +3,7 @@
         padding: 3px 5px;
         box-sizing: border-box;
         border-radius: 20px;
-        background: linear-gradient(90deg, #84fab0, #8fd3f4 51%, #84fab0) 100% / 200%;
+        background: var(--gradient-1, green);
         color: white;
     }
 </style>
diff --git a/src/components/Forecast/ForecastDrawer.svelte b/src/components/Forecast/ForecastDrawer.svelte
index 9f69f17..0fdab29 100644
--- a/src/components/Forecast/ForecastDrawer.svelte
+++ b/src/components/Forecast/ForecastDrawer.svelte
@@ -13,13 +13,9 @@
     .drawer {
         border-top-left-radius: 2rem;
         border-top-right-radius: 2rem;
-        --bg-opacity: 1;
-        background-color: #f7fafc;
-        background-color: rgba(247, 250, 252, var(--bg-opacity));
+        background-color: var(--surface, #f7fafc);
+        color: var(--on-surface, #1a202c);
         padding: 1.5rem;
-        --text-opacity: 1;
-        color: #1a202c;
-        color: rgba(26, 32, 44, var(--text-opacity));
         height: 100%;
         overflow: hidden;
         align-self: stretch;
diff --git a/src/components/Forecast/OneHourForecast/PredictionItem.svelte b/src/components/Forecast/OneHourForecast/PredictionItem.svelte
index acde3c2..cb2ea71 100644
--- a/src/components/Forecast/OneHourForecast/PredictionItem.svelte
+++ b/src/components/Forecast/OneHourForecast/PredictionItem.svelte
@@ -28,6 +28,7 @@
     .prediction-details {
       display: flex;
       border-bottom-width: 1px;
+      border-color: var(--divider, #e2e8f0);
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
       font-size: 0.75rem;
diff --git a/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte b/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
index 472fb9b..a703522 100644
--- a/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
+++ b/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
@@ -28,6 +28,7 @@
     .prediction-details {
       display: flex;
       border-bottom-width: 1px;
+      border-color: var(--divider, #e2e8f0);
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
       font-size: 0.75rem;
diff --git a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
index 81f527b..fe1bca1 100644
--- a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
+++ b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
@@ -28,6 +28,7 @@
     .prediction-details {
       display: flex;
       border-bottom-width: 1px;
+      border-color: var(--divider, #e2e8f0);
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
       font-size: 0.75rem;
diff --git a/src/template.html b/src/template.html
index f7382aa..c4c9695 100644
--- a/src/template.html
+++ b/src/template.html
@@ -8,6 +8,7 @@
 	%sapper.base%
 
 	<link rel="stylesheet" href="index.css">
+	<link rel="stylesheet" href="theme.css">
 	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
 	<link rel="icon" type="image/png" href="favicon.png">
     <script src="https://kit.fontawesome.com/9fa565d9ec.js" crossorigin="anonymous"></script>
diff --git a/static/theme.css b/static/theme.css
new file mode 100644
index 0000000..e00cd60
--- /dev/null
+++ b/static/theme.css
@@ -0,0 +1,24 @@
+body {
+    --surface: rgb(247, 250, 252);
+    --surface: #f7fafc;
+    --on-surface: #1a202c;
+
+    --divider: #e2e8f0;
+    --gradient-1: linear-gradient(90deg, #84fab0, #8fd3f4 51%, #84fab0) 100% / 200%;
+    --gradient-2: linear-gradient(90deg, rgba(255, 42,228,1) 0%,
+                                         rgba(164,255,177,1) 60%, 
+                                         rgba(214,255,241,1) 85%,
+                                         var(--surface) 100%); 
+}
+
+body.dark {
+    --surface: #161616;
+    --on-surface: #a5a5a5;
+
+    --divider: #363636;
+    --gradient-1: linear-gradient(90deg, #0c5f2b, #0a2531 51%, #1e6439) 100% / 200%;
+    --gradient-2: linear-gradient(90deg, rgb(110 0 96) 20%,
+                                         rgb(27 142 43) 60%,
+                                         rgb(42 70 61) 85%,
+                                         var(--surface) 100%);
+}