diff --git a/data/Display.css b/data/Display.css
index a316534f..6d4577ad 100644
--- a/data/Display.css
+++ b/data/Display.css
@@ -1,42 +1,160 @@
-/* For better dark style support */
-@define-color BG_COLOR_ALPHA alpha(@BG_COLOR, 0.75);
-
-.colored {
-    background-color: @BG_COLOR_ALPHA;
-    color: @TEXT_COLOR;
+display-widget {
+    border-radius: 3px;
     text-shadow: 0 1px 1px alpha(white, 0.1);
     -gtk-icon-shadow: 0 1px 1px alpha(white, 0.1);
     -gtk-icon-palette: warning white;
 }
 
-widget.colored {
-    border: 1px solid mix(@BG_COLOR_ALPHA, @TEXT_COLOR, 0.3);
+display-widget > grid > label {
+    font-weight: 600;
 }
 
-.colored button {
-    background: transparent; /* Fix stacking alpha on top of each other */
+display-widget button {
     border-radius: 50%;
+    color: inherit;
     padding: 6px;
 }
 
-.colored button:focus {
-    background: alpha(@TEXT_COLOR, 0.25);
-}
-
-.colored button:checked {
-    background: alpha(@TEXT_COLOR, 0.5);
-    border-color: transparent;
+/*Clear icon palette*/
+display-widget image {
+    -gtk-icon-palette: sucess @text_color;
 }
 
-.colored.disabled {
+display-widget.disabled {
     background-color: @SLATE_100;
     color: @SLATE_700;
 }
 
-.colored.disabled button:focus {
+display-widget.disabled button:focus {
     background: alpha(@SLATE_700, 0.25);
 }
 
-.colored.disabled button:checked {
+display-widget.disabled button:checked {
     background: alpha(@SLATE_700, 0.5);
 }
+
+display-widget.color-0 {
+    background-color: alpha(@BLUEBERRY_100, 0.75);
+    border: 1px solid alpha(@BLUEBERRY_500, 0.75);
+    color: @BLUEBERRY_900;
+}
+
+display-widget.color-0 button {
+    -gtk-icon-pallete: warning @BLUEBERRY_900;
+}
+
+display-widget.color-0 button:focus {
+    background: @BLUEBERRY_300;
+}
+
+display-widget.color-0 button:checked {
+    background: alpha(@BLUEBERRY_500, 0.75);
+}
+
+display-widget.color-1 {
+    background-color: alpha(@STRAWBERRY_100, 0.75);
+    border: 1px solid alpha(@STRAWBERRY_500, 0.75);
+    color: @STRAWBERRY_900;
+}
+
+display-widget.color-1 button {
+    -gtk-icon-pallete: warning @STRAWBERRY_900;
+}
+
+display-widget.color-1 button:focus {
+    background: @STRAWBERRY_300;
+}
+
+display-widget.color-1 button:checked {
+    background: alpha(@STRAWBERRY_500, 0.75);
+}
+
+display-widget.color-2 {
+    background-color: alpha(@ORANGE_100, 0.75);
+    border: 1px solid alpha(@ORANGE_500, 0.75);
+    color: @ORANGE_900;
+}
+
+display-widget.color-2 button {
+    -gtk-icon-pallete: warning @ORANGE_900;
+}
+
+display-widget.color-2 button:focus {
+    background: @ORANGE_300;
+}
+
+display-widget.color-2 button:checked {
+    background: alpha(@ORANGE_500, 0.75);
+}
+
+display-widget.color-3 {
+    background-color: alpha(@BANANA_100, 0.75);
+    border: 1px solid alpha(@BANANA_500, 0.75);
+    color: @BANANA_900;
+}
+
+display-widget.color-3 button {
+    -gtk-icon-pallete: warning @BANANA_900;
+}
+
+display-widget.color-3 button:focus {
+    background: @BANANA_300;
+}
+
+display-widget.color-3 button:checked {
+    background: alpha(@BANANA_500, 0.75);
+}
+
+display-widget.color-4 {
+    background-color: alpha(@LIME_100, 0.75);
+    border: 1px solid alpha(@LIME_500, 0.75);
+    color: @LIME_900;
+}
+
+display-widget.color-4 button {
+    -gtk-icon-pallete: warning @LIME_900;
+}
+
+display-widget.color-4 button:focus {
+    background: @LIME_300;
+}
+
+display-widget.color-4 button:checked {
+    background: alpha(@LIME_500, 0.75);
+}
+
+display-widget.color-5 {
+    background-color: alpha(@GRAPE_100, 0.75);
+    border: 1px solid alpha(@GRAPE_500, 0.75);
+    color: @GRAPE_900;
+}
+
+display-widget.color-5 button {
+    -gtk-icon-pallete: warning @GRAPE_900;
+}
+
+display-widget.color-5 button:focus {
+    background: @GRAPE_300;
+}
+
+display-widget.color-5 button:checked {
+    background: alpha(@GRAPE_500, 0.75);
+}
+
+display-widget.color-6 {
+    background-color: alpha(@COCOA_100, 0.75);
+    border: 1px solid alpha(@COCOA_500, 0.75);
+    color: @COCOA_900;
+}
+
+display-widget.color-6 button {
+    -gtk-icon-pallete: warning @COCOA_900;
+}
+
+display-widget.color-6 button:focus {
+    background: @COCOA_300;
+}
+
+display-widget.color-6 button:checked {
+    background: alpha(@COCOA_500, 0.75);
+}
diff --git a/src/Widgets/DisplayWidget.vala b/src/Widgets/DisplayWidget.vala
index 5b8a5453..4cbda478 100644
--- a/src/Widgets/DisplayWidget.vala
+++ b/src/Widgets/DisplayWidget.vala
@@ -84,6 +84,10 @@ public class Display.DisplayWidget : Gtk.EventBox {
         );
     }
 
+    class construct {
+        set_css_name ("display-widget");
+    }
+
     construct {
         virtual_monitor.get_current_mode_size (out real_width, out real_height);
 
diff --git a/src/Widgets/DisplaysOverlay.vala b/src/Widgets/DisplaysOverlay.vala
index de207a06..8ef00e60 100644
--- a/src/Widgets/DisplaysOverlay.vala
+++ b/src/Widgets/DisplaysOverlay.vala
@@ -50,8 +50,6 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
         }
     }
 
-    private static Gtk.CssProvider display_provider;
-
     private static string[] colors = {
         "@BLUEBERRY_100",
         "@STRAWBERRY_100",
@@ -71,11 +69,6 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
         "@COCOA_900"
     };
 
-    const string COLORED_STYLE_CSS = """
-        @define-color BG_COLOR %s;
-        @define-color TEXT_COLOR %s;
-    """;
-
     private Gtk.GestureDrag drag_gesture;
 
     construct {
@@ -99,9 +92,15 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
     }
 
     static construct {
-        display_provider = new Gtk.CssProvider ();
+        var display_provider = new Gtk.CssProvider ();
         display_provider.load_from_resource ("io/elementary/switchboard/display/Display.css");
 
+        Gtk.StyleContext.add_provider_for_screen (
+            Gdk.Screen.get_default (),
+            display_provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+        );
+
         GLib.Bus.get_proxy.begin<GalaDBus> (
             GLib.BusType.SESSION,
             "org.pantheon.gala.daemon",
@@ -322,32 +321,11 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
 
         var color_number = (get_children ().length () - 2) % 7;
         var display_widget = new DisplayWidget (virtual_monitor, colors[color_number], text_colors[color_number]);
+        display_widget.get_style_context ().add_class ("color-%u".printf (color_number));
+
         add_overlay (display_widget);
         display_widgets.append (display_widget);
 
-        var provider = new Gtk.CssProvider ();
-        try {
-            var colored_css = COLORED_STYLE_CSS.printf (colors[color_number], text_colors[color_number]);
-            provider.load_from_data (colored_css, colored_css.length);
-
-            var context = display_widget.get_style_context ();
-            context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-            context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-            context.add_class ("colored");
-
-            context = display_widget.primary_image.get_style_context ();
-            context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-            context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-            context.add_class ("colored");
-
-            context = display_widget.toggle_settings.get_style_context ();
-            context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-            context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-            context.add_class ("colored");
-        } catch (GLib.Error e) {
-            critical (e.message);
-        }
-
         display_widget.show_all ();
         display_widget.set_as_primary.connect (() => set_as_primary (display_widget.virtual_monitor));