diff --git a/data/css.gresource.xml b/data/css.gresource.xml
index 5e8969c3a..cf2599932 100644
--- a/data/css.gresource.xml
+++ b/data/css.gresource.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/monitor">
-    <file alias="monitor-light.css" compressed="true">monitor-light.css</file>
-    <file alias="monitor-dark.css" compressed="true">monitor-dark.css</file>
+    <file compressed="true">application.css</file>
   </gresource>
-</gresources>
\ No newline at end of file
+</gresources>
diff --git a/data/meson.build b/data/meson.build
index d3175bd30..988c555b6 100644
--- a/data/meson.build
+++ b/data/meson.build
@@ -59,18 +59,10 @@ sass_command = [
     '@OUTPUT@'
 ]
 
-stylesheet_light = custom_target(
-    'theme-monitor-light',
-    input : './stylesheet/monitor-light.scss',
-    output : 'monitor-light.css',
-    command : sass_command,
-    build_by_default: true
-)
-
-stylesheet_dark = custom_target(
-    'theme-monitor-dark',
-    input : './stylesheet/monitor-dark.scss',
-    output : 'monitor-dark.css',
+stylesheet = custom_target(
+    'theme-monitor',
+    input : './stylesheet/_index.scss',
+    output : 'application.css',
     command : sass_command,
     build_by_default: true
 )
@@ -80,6 +72,5 @@ css_gresource = gnome.compile_resources(
     'css.gresource.xml',
     source_dir: 'stylesheet',
     c_name: 'as2',
-    dependencies: [stylesheet_dark, stylesheet_light],
-
+    dependencies: [stylesheet]
 )
diff --git a/data/stylesheet/_index.scss b/data/stylesheet/_index.scss
index ab6fc664a..3ff63e869 100644
--- a/data/stylesheet/_index.scss
+++ b/data/stylesheet/_index.scss
@@ -1,9 +1,32 @@
-@import "_palette";
+// TODO: Remove when migrating to Granite 9
+:root {
+    --BANANA-100: #fff394;
+    --BANANA-300: #ffe16b;
+    --BANANA-700: #d48e15;
+    --BANANA-900: #ad5f00;
 
-// Text, images, and other foreground elements
-$fg-color: $BLACK_500;
+    --BLUEBERRY-100: #8cd5ff;
+    --BLUEBERRY-300: #64baff;
+    --BLUEBERRY-500: #3689e6;
+
+    --GRAPE-500: #a56de2;
+
+    --LIME-300: #9bdb4d;
+
+    --ORANGE-100: #ffc27d;
+    --ORANGE-300: #ffa154;
+    --ORANGE-700: #cc3b02;
+    --ORANGE-900: #a62100;
+
+    --SILVER-100: #fafafa;
+    --SILVER-300: #d4d4d4;
+    --SILVER-500: #abacae;
+    --SILVER-700: #7e8087;
+    --SILVER-900: #555761;
+
+    --STRAWBERRY-300: #ed5353;
+}
 
-$text_color: $fg_color;
 
 roundy-label,
 roundy-label:hover,
@@ -18,31 +41,30 @@ roundy-label:hover:selected {
         font-weight: 700;
         border-radius: 10px;
         padding: 0 6px;
+        background-color: var(--SILVER-300);
 
-        @if $color-scheme == "light" {
-            background-color: $SILVER_300;
-        } @else if $color-scheme == "dark" {
-            background-color: $SILVER_900;
+        @media (prefers-color-scheme: dark) {
+            background-color: var(--SILVER-900);
         }
     }
 
     &.green .value {
-        background-color: rgba($LIME_300, 0.6);
+        background-color: color-mix(in srgb, var(--LIME-300) 60%, transparent);
     }
 
     &.blue .value {
-        background-color: rgba($BLUEBERRY_300, 0.6);
+        background-color: color-mix(in srgb, var(--BLUEBERRY-300) 60%, transparent);
     }
 
     &.username {
         &-other .value {
-            background-color: $BANANA_300;
+            background-color: var(--BANANA-300);
             color: #381F00;
         }
 
         &-root .value {
-            background-color: $STRAWBERRY_300;
-            color: $SILVER_100;
+            background-color: var(--STRAWBERRY-300);
+            color: var(--SILVER-100);
         }
     }
 }
@@ -51,41 +73,30 @@ roundy-label:hover:selected {
     padding: 0;
     font-weight: bold;
     font-size: 9px;
+    color: grey;
 
-    @if $color-scheme == "light" {
-        color: grey;
-    } @else if $color-scheme == "dark" {
-        color: $SILVER_500;
-    }
-}
-
-.label-vertical {
-    &-val {
-        color: $text_color;
-        font-size: 30px;
-        font-weight: 200;
-        border-width: 0;
+    @media (prefers-color-scheme: dark) {
+        color: var(--SILVER-500);
     }
 }
 
 .grape_500 {
-    background-color: rgba($GRAPE_500, 0.6);
+    background-color: color-mix(in srgb, var(--GRAPE-500) 60%, transparent);
 }
 
 .blueberry_100 {
-    background-color: rgba($BLUEBERRY_100, 0.6);
+    background-color: color-mix(in srgb, var(--BLUEBERRY-100) 60%, transparent);
 }
 
 .usage-label-container {
     border-radius: 3px;
     margin: 6px;
+    background-color: color-mix(in srgb, var(--SILVER-100) 50%, transparent);
+    border: 1px solid var(--SILVER-300);
 
-    @if $color-scheme == "light" {
-        background-color: rgba($SILVER_100, 0.5);
-        border: 1px solid $SILVER_300;
-    } @else if $color-scheme == "dark" {
-        background-color: rgba($SILVER_900, 0.5);
-        border: 1px solid $SILVER_900;
+    @media (prefers-color-scheme: dark) {
+        background-color: color-mix(in srgb, var(--SILVER-900) 50%, transparent);
+        border: 1px solid var(--SILVER-900);
     }
 }
 
@@ -95,7 +106,7 @@ roundy-label:hover:selected {
 .state_badge:selected:focus,
 .state_badge:hover:selected {
     background-image: none;
-    background-color: $BLUEBERRY_500;
+    background-color: var(--BLUEBERRY-500);
     box-shadow: none;
     color: white;
     font-weight: 700;
@@ -110,53 +121,48 @@ roundy-label:hover:selected {
     padding-right: 4px;
     padding-left: 2px;
     font-size: 10px;
+    border: 1px solid var(--SILVER-300);
+    background-color: var(--SILVER-100);
 
-    @if $color-scheme == "light" {
-        border: 1px solid $SILVER_300;
-        background-color: $SILVER_100;
-    } @else if $color-scheme == "dark" {
-        border: 1px solid $SILVER_700;
-        background-color: $SILVER_900;
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid var(--SILVER-700);
+        background-color: var(--SILVER-900);
     }
 
 
     &-mild-warning {
-        @if $color-scheme == "light" {
-            background-color: rgba($BANANA_100, 0.7);
-            color: $BANANA_900;
-            border: 1px solid rgba($BANANA_300, 0.7);
-        } @else if $color-scheme == "dark" {
-            background-color: rgba($BANANA_900, 0.7);
-            color: $BANANA_300;
-            border: 1px solid rgba($BANANA_700, 0.7);
+        background-color: color-mix(in srgb, var(--BANANA-100) 70%, transparent);
+        color: var(--BANANA-900);
+        border: 1px solid color-mix(in srgb, var(--BANANA-300) 70%, transparent);
+
+        @media (prefers-color-scheme: dark) {
+            background-color: color-mix(in srgb, var(--BANANA-900) 70%, transparent);
+            color: var(--BANANA-300);
+            border: 1px solid color-mix(in srgb, var(--BANANA-700) 70%, transparent);
         }
     }
 
     &-strong-warning {
-        @if $color-scheme == "light" {
-            background-color: rgba($ORANGE_100, 0.7);
-            color: $ORANGE_900;
-            border: 1px solid rgba($ORANGE_300, 0.7);
-        } @else if $color-scheme == "dark" {
-            background-color: rgba($ORANGE_900, 0.7);
-            color: $ORANGE_300;
-            border: 1px solid rgba($ORANGE_700, 0.7);
+        background-color: color-mix(in srgb, var(--ORANGE-100) 70%, transparent);
+        color: var(--ORANGE-900);
+        border: 1px solid color-mix(in srgb, var(--ORANGE-300) 70%, transparent);
+
+        @media (prefers-color-scheme: dark) {
+            background-color: color-mix(in srgb, var(--ORANGE-900) 70%, transparent);
+            color: var(--ORANGE-300);
+            border: 1px solid color-mix(in srgb, var(--ORANGE-700) 70%, transparent);
         }
     }
 
     &-critical-warning {
-        background-color: $STRAWBERRY_100;
-        color: $STRAWBERRY_700;
-        border: 1px solid $STRAWBERRY_300;
-
-        @if $color-scheme == "light" {
-            background-color: rgba($STRAWBERRY_100, 0.7);
-            color: $STRAWBERRY_700;
-            border: 1px solid rgba($STRAWBERRY_300, 0.7);
-        } @else if $color-scheme == "dark" {
-            background-color: rgba($STRAWBERRY_900, 0.7);
-            color: $STRAWBERRY_100;
-            border: 1px solid rgba($STRAWBERRY_700, 0.7);
+        background-color: color-mix(in srgb, var(--STRAWBERRY-100) 70%, transparent);
+        color: var(--STRAWBERRY-700);
+        border: 1px solid color-mix(in srgb, var(--STRAWBERRY-300) 70%, transparent);
+
+        @media (prefers-color-scheme: dark) {
+            background-color: color-mix(in srgb, var(--STRAWBERRY-900) 70%, transparent);
+            color: var(--STRAWBERRY-100);
+            border: 1px solid color-mix(in srgb, var(--STRAWBERRY-700) 70%, transparent);
         }
     }
 }
@@ -171,7 +177,9 @@ roundy-label:hover:selected {
 .command_wrapper {
     background-color: #fdf6e3;
     border-radius: 3px;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.20);
+    box-shadow:
+        0 1px 1px color-mix(in srgb, black 12%, transparent),
+        0 1px 2px color-mix(in srgb, black 20%, transparent);
     padding: 5px;
 }
 
@@ -185,39 +193,37 @@ roundy-label:hover:selected {
 
 .graph {
     border-radius: 6px;
+    border: 1px var(--SILVER-300) solid;
 
-    @if $color-scheme == "light" {
-        border: 1px $SILVER_300 solid;
-    } @else if $color-scheme == "dark" {
-        border: 1px $SILVER_900 solid;
+    @media (prefers-color-scheme: dark) {
+        border: 1px var(--SILVER-900) solid;
     }
 }
 
 .open_files_list_box_wrapper {
-    @if $color-scheme == "light" {
-        border: 1px $SILVER_300 solid;
-    } @else if $color-scheme == "dark" {
-        border: 1px $SILVER_900 solid;
+    border: 1px var(--SILVER-300) solid;
+
+    @media (prefers-color-scheme: dark) {
+        border: 1px var(--SILVER-900) solid;
     }
 }
 
 .open_files_list_box {
     &_row {
-        @if $color-scheme == "light" {
-            border-bottom: 1px $SILVER_100 solid;
-        } @else if $color-scheme == "dark" {
-            border-bottom: 1px $SILVER_900 solid;
+        border-bottom: 1px var(--SILVER-100) solid;
+
+        @media (prefers-color-scheme: dark) {
+            border-bottom: 1px var(--SILVER-900) solid;
         }
 
         label {
             font-family: monospace;
-            /* background-color: $SILVER_300; */
             padding: 6px 2px 2px;
             border-radius: 4px;
         }
 
         image {
-            color: $SILVER_700;
+            color: var(--SILVER-700);
             margin: 6px;
         }
     }
@@ -228,5 +234,5 @@ roundy-label:hover:selected {
 }
 
 .text-secondary {
-    color: $SILVER_700;
-}
\ No newline at end of file
+    color: var(--SILVER-700);
+}
diff --git a/data/stylesheet/_palette.scss b/data/stylesheet/_palette.scss
deleted file mode 100644
index 532c2fdf2..000000000
--- a/data/stylesheet/_palette.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-//@TODO: Could be removed, if Granite will provide palette
-
-// Internal Palette
-$STRAWBERRY_100: #ff8c82;
-$STRAWBERRY_300: #ed5353;
-$STRAWBERRY_500: #c6262e;
-$STRAWBERRY_700: #a10705;
-$STRAWBERRY_900: #7a0000;
-
-$ORANGE_100: #ffc27d;
-$ORANGE_300: #ffa154;
-$ORANGE_500: #f37329;
-$ORANGE_700: #cc3b02;
-$ORANGE_900: #a62100;
-
-$BANANA_100: #fff394;
-$BANANA_300: #ffe16b;
-$BANANA_500: #f9c440;
-$BANANA_700: #d48e15;
-$BANANA_900: #ad5f00;
-
-$LIME_100: #d1ff82;
-$LIME_300: #9bdb4d;
-$LIME_500: #68b723;
-$LIME_700: #3a9104;
-$LIME_900: #206b00;
-
-$MINT_100: #89ffdd;
-$MINT_300: #43d6b5;
-$MINT_500: #28bca3;
-$MINT_700: #0e9a83;
-$MINT_900: #007367;
-
-$BLUEBERRY_100: #8cd5ff;
-$BLUEBERRY_300: #64baff;
-$BLUEBERRY_500: #3689e6;
-$BLUEBERRY_700: #0d52bf;
-$BLUEBERRY_900: #002e99;
-
-$BUBBLEGUM_100: #fe9ab8;
-$BUBBLEGUM_300: #f4679d;
-$BUBBLEGUM_500: #de3e80;
-$BUBBLEGUM_700: #bc245d;
-$BUBBLEGUM_900: #910e38;
-
-$GRAPE_100: #e4c6fa;
-$GRAPE_300: #cd9ef7;
-$GRAPE_500: #a56de2;
-$GRAPE_700: #7239b3;
-$GRAPE_900: #452981;
-
-$COCOA_100: #a3907c;
-$COCOA_300: #8a715e;
-$COCOA_500: #715344;
-$COCOA_700: #57392d;
-$COCOA_900: #3d211b;
-
-$SILVER_100: #fafafa;
-$SILVER_300: #d4d4d4;
-$SILVER_500: #abacae;
-$SILVER_700: #7e8087;
-$SILVER_900: #555761;
-
-$SLATE_100: #95a3ab;
-$SLATE_300: #667885;
-$SLATE_500: #485a6c;
-$SLATE_700: #273445;
-$SLATE_900: #0e141f;
-
-$BLACK_100: #666;
-$BLACK_300: #4d4d4d;
-$BLACK_500: #333;
-$BLACK_700: #1a1a1a;
-$BLACK_900: #000;
-
-// Exported
-@define-color STRAWBERRY_100 #{$STRAWBERRY_100};
-@define-color STRAWBERRY_300 #{$STRAWBERRY_300};
-@define-color STRAWBERRY_500 #{$STRAWBERRY_500};
-@define-color STRAWBERRY_700 #{$STRAWBERRY_700};
-@define-color STRAWBERRY_900 #{$STRAWBERRY_900};
-
-@define-color ORANGE_100 #{$ORANGE_100};
-@define-color ORANGE_300 #{$ORANGE_300};
-@define-color ORANGE_500 #{$ORANGE_500};
-@define-color ORANGE_700 #{$ORANGE_700};
-@define-color ORANGE_900 #{$ORANGE_900};
-
-@define-color BANANA_100 #{$BANANA_100};
-@define-color BANANA_300 #{$BANANA_300};
-@define-color BANANA_500 #{$BANANA_500};
-@define-color BANANA_700 #{$BANANA_700};
-@define-color BANANA_900 #{$BANANA_900};
-
-@define-color LIME_100 #{$LIME_100};
-@define-color LIME_300 #{$LIME_300};
-@define-color LIME_500 #{$LIME_500};
-@define-color LIME_700 #{$LIME_700};
-@define-color LIME_900 #{$LIME_900};
-
-@define-color MINT_100 #{$MINT_100};
-@define-color MINT_300 #{$MINT_300};
-@define-color MINT_500 #{$MINT_500};
-@define-color MINT_700 #{$MINT_700};
-@define-color MINT_900 #{$MINT_900};
-
-@define-color BLUEBERRY_100 #{$BLUEBERRY_100};
-@define-color BLUEBERRY_300 #{$BLUEBERRY_300};
-@define-color BLUEBERRY_500 #{$BLUEBERRY_500};
-@define-color BLUEBERRY_700 #{$BLUEBERRY_700};
-@define-color BLUEBERRY_900 #{$BLUEBERRY_900};
-
-@define-color BUBBLEGUM_100 #{$BUBBLEGUM_100};
-@define-color BUBBLEGUM_300 #{$BUBBLEGUM_300};
-@define-color BUBBLEGUM_500 #{$BUBBLEGUM_500};
-@define-color BUBBLEGUM_700 #{$BUBBLEGUM_700};
-@define-color BUBBLEGUM_900 #{$BUBBLEGUM_900};
-
-@define-color GRAPE_100 #{$GRAPE_100};
-@define-color GRAPE_300 #{$GRAPE_300};
-@define-color GRAPE_500 #{$GRAPE_500};
-@define-color GRAPE_700 #{$GRAPE_700};
-@define-color GRAPE_900 #{$GRAPE_900};
-
-@define-color COCOA_100 #{$COCOA_100};
-@define-color COCOA_300 #{$COCOA_300};
-@define-color COCOA_500 #{$COCOA_500};
-@define-color COCOA_700 #{$COCOA_700};
-@define-color COCOA_900 #{$COCOA_900};
-
-@define-color SILVER_100 #{$SILVER_100};
-@define-color SILVER_300 #{$SILVER_300};
-@define-color SILVER_500 #{$SILVER_500};
-@define-color SILVER_700 #{$SILVER_700};
-@define-color SILVER_900 #{$SILVER_900};
-
-@define-color SLATE_100 #{$SLATE_100};
-@define-color SLATE_300 #{$SLATE_300};
-@define-color SLATE_500 #{$SLATE_500};
-@define-color SLATE_700 #{$SLATE_700};
-@define-color SLATE_900 #{$SLATE_900};
-
-@define-color BLACK_100 #{$BLACK_100};
-@define-color BLACK_300 #{$BLACK_300};
-@define-color BLACK_500 #{$BLACK_500};
-@define-color BLACK_700 #{$BLACK_700};
-@define-color BLACK_900 #{"" + $BLACK_900};
diff --git a/data/stylesheet/monitor-dark.scss b/data/stylesheet/monitor-dark.scss
deleted file mode 100644
index 51e6c0240..000000000
--- a/data/stylesheet/monitor-dark.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$color-scheme: "dark";
-
-@import './index.scss';
\ No newline at end of file
diff --git a/data/stylesheet/monitor-light.scss b/data/stylesheet/monitor-light.scss
deleted file mode 100644
index a9b628ef1..000000000
--- a/data/stylesheet/monitor-light.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$color-scheme: "light";
-
-@import './index.scss';
\ No newline at end of file
diff --git a/data/stylesheet/monitor-retrofit.scss b/data/stylesheet/monitor-retrofit.scss
deleted file mode 100644
index 831a382f2..000000000
--- a/data/stylesheet/monitor-retrofit.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "../../subprojects/stylesheet/src/gtk-3.0/palette";
-
-@define-color selected_bg_color @BLUEBERRY_500;
\ No newline at end of file
diff --git a/meson.build b/meson.build
index b7f25bb03..9e29ed18f 100644
--- a/meson.build
+++ b/meson.build
@@ -29,7 +29,7 @@ add_project_arguments(vala_flags, language: 'vala')
 app_dependencies = [
     dependency('granite-7', version: '>=7.7.0'),
     dependency('glib-2.0'),
-    dependency('gtk4'),
+    dependency('gtk4', version: '>=4.20'),
     dependency('gee-0.8'),
     dependency('gio-2.0'),
     dependency('gobject-2.0'),
diff --git a/src/Services/Appearance.vala b/src/Services/Appearance.vala
index b079c050e..ccdd264fe 100644
--- a/src/Services/Appearance.vala
+++ b/src/Services/Appearance.vala
@@ -8,6 +8,8 @@ public class Monitor.Appearance : Object {
 
     public static void set_prefered_style () {
         provider = new Gtk.CssProvider ();
+        provider.load_from_resource ("/io/elementary/monitor/application.css");
+
         Gtk.StyleContext.add_provider_for_display (Gdk.Display.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         var granite_settings = Granite.Settings.get_default ();
@@ -21,9 +23,9 @@ public class Monitor.Appearance : Object {
 
     private static void update_style_provider (Granite.Settings.ColorScheme color_scheme) {
         if (color_scheme == DARK) {
-            provider.load_from_resource ("/io/elementary/monitor/monitor-dark.css");
+            provider.prefers_color_scheme = DARK;
         } else {
-            provider.load_from_resource ("/io/elementary/monitor/monitor-light.css");
+            provider.prefers_color_scheme = DEFAULT;
         }
     }
 }