4 files changed, 5 insertions, 6 deletions
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;