diff --git a/examples/printerdemo/ui/common.60 b/examples/printerdemo/ui/common.60
index fca4c9836..d69bb7359 100644
--- a/examples/printerdemo/ui/common.60
+++ b/examples/printerdemo/ui/common.60
@@ -10,11 +10,20 @@ LICENSE END */
 
 export global DemoPalette := {
     // Color of the home/settings/ink buttons on the left side bar
-    property <color> active_page_icon_color: #122F7B;
+    property <color> active_page_icon_color: night_mode ? #6284FF : #122F7B;
     property <color> inactive_page_icon_color: #BDC0D1;
 
     property <color> main_background: #0E133F;
 
+    property <color> page_background_color: night_mode ? #122F7B : white;
+
+    property <color> text_foreground_color: night_mode ? #F4F6FF : black;
+    
+    property <color> printer_action_background_color: night_mode ? #0E133F : white;
+
     property <bool> night_mode: false;
 }
 
+export Page := Rectangle {
+    background: DemoPalette.page_background_color;
+}
\ No newline at end of file
diff --git a/examples/printerdemo/ui/home_page.60 b/examples/printerdemo/ui/home_page.60
index 560f86f76..40355eb47 100644
--- a/examples/printerdemo/ui/home_page.60
+++ b/examples/printerdemo/ui/home_page.60
@@ -8,6 +8,8 @@
     Please contact info@sixtyfps.io for more information.
 LICENSE END */
 
+import { DemoPalette, Page } from "./common.60";
+
 export struct PrinterAction := {
     name: string,
     icon: resource,
@@ -17,15 +19,17 @@ ActionButton := Rectangle {
     border-radius: 25px;
     border-width: 5px;
     border-color: #FFBF63;
+    background: DemoPalette.printer_action_background_color;
     property <resource> icon <=> img.source;
 
     img := Image {
         x: (parent.width / 2) - (self.width / 2);
         y: (parent.height / 2) - (self.height / 2);
+        colorize: DemoPalette.text_foreground_color;
     }
 }
 
-export HomePage := Rectangle {
+export HomePage := Page {
     property <[PrinterAction]> actions;
 
     property <length> header_row_height: 40px;
@@ -35,6 +39,7 @@ export HomePage := Rectangle {
         font-weight: 900;
         font-size: 22px;
         width: 50%;
+        color: DemoPalette.text_foreground_color;
     }
 
     property <length> button_spacing: root.width / 12;
@@ -53,11 +58,12 @@ export HomePage := Rectangle {
         width: 50%;
 
         border-radius: 27px;
-        background: #F4F6FF;
+        background: DemoPalette.night_mode ? DemoPalette.printer_action_background_color : #F4F6FF;
 
         VerticalLayout {
             Text {
                 text: "Printing Queue";
+                color: DemoPalette.text_foreground_color;
             }
 
             Rectangle {
diff --git a/examples/printerdemo/ui/printerdemo.60 b/examples/printerdemo/ui/printerdemo.60
index 3f14887d1..24f22a6f1 100644
--- a/examples/printerdemo/ui/printerdemo.60
+++ b/examples/printerdemo/ui/printerdemo.60
@@ -64,7 +64,7 @@ MainWindow := Window {
         main_view := Rectangle {
             height: 100%;
             border-radius: 30px;
-            background: white;
+            background: DemoPalette.page_background_color;
             minimum-width: 800px;
             minimum-height: 600px;
 
@@ -118,6 +118,7 @@ MainWindow := Window {
             }
             width: main_view.x - sidebar.x + 1px;
             height: 1.5 * self.width;
+            colorize: DemoPalette.page_background_color;
         }
 
         for page_icon[idx] in [