diff --git a/wgui/src/globals.rs b/wgui/src/globals.rs
index cdcbe59..6e8ccb4 100644
--- a/wgui/src/globals.rs
+++ b/wgui/src/globals.rs
@@ -34,11 +34,11 @@ impl Default for Defaults {
 			dark_mode: true,
 			text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
 			button_color: drawing::Color::new(1.0, 1.0, 1.0, 0.05),
-			accent_color: drawing::Color::new(0.0, 0.54, 1.0, 1.0),
-			danger_color: drawing::Color::new(0.8, 0.0, 0.0, 1.0),
-			faded_color: drawing::Color::new(0.4, 0.5, 0.6, 1.0),
-			bg_color: drawing::Color::new(0.0039, 0.0078, 0.0235, 0.8352),
-			translucent_alpha: 0.25,
+			accent_color: drawing::Color::new(0.13, 0.68, 1.0, 1.0),
+			danger_color: drawing::Color::new(0.9, 0.0, 0.0, 1.0),
+			faded_color: drawing::Color::new(0.67, 0.74, 0.80, 1.0),
+			bg_color: drawing::Color::new(0.0, 0.07, 0.1, 0.75),
+			translucent_alpha: 0.5,
 			animation_mult: 1.0,
 			rounding_mult: 1.0,
 		}
diff --git a/wgui/src/parser/mod.rs b/wgui/src/parser/mod.rs
index 2d1220c..77684ba 100644
--- a/wgui/src/parser/mod.rs
+++ b/wgui/src/parser/mod.rs
@@ -390,10 +390,10 @@ impl ParserContext<'_> {
 					&$field.with_alpha($alpha).to_hex(),
 				);
 				$self.insert_var(concat!("color_", $name, "_50"), &$field.mult_rgb(0.50).to_hex());
+				$self.insert_var(concat!("color_", $name, "_40"), &$field.mult_rgb(0.40).to_hex());
+				$self.insert_var(concat!("color_", $name, "_30"), &$field.mult_rgb(0.30).to_hex());
 				$self.insert_var(concat!("color_", $name, "_20"), &$field.mult_rgb(0.20).to_hex());
 				$self.insert_var(concat!("color_", $name, "_10"), &$field.mult_rgb(0.10).to_hex());
-				$self.insert_var(concat!("color_", $name, "_5"), &$field.mult_rgb(0.05).to_hex());
-				$self.insert_var(concat!("color_", $name, "_1"), &$field.mult_rgb(0.01).to_hex());
 			};
 		}
 
diff --git a/wgui/src/renderer_vk/shaders/image.frag b/wgui/src/renderer_vk/shaders/image.frag
index 02767d4..00aa316 100644
--- a/wgui/src/renderer_vk/shaders/image.frag
+++ b/wgui/src/renderer_vk/shaders/image.frag
@@ -13,6 +13,7 @@ layout(location = 0) out vec4 out_color;
 
 #define UNIFORM_PARAMS_SET 0
 #include "uniform.glsl"
+#include "srgb.glsl"
 
 layout(set = 2, binding = 0) uniform sampler2D image;
 
@@ -52,4 +53,5 @@ void main() {
     // rounding cutout alpha
     out_color.a *= 1.0 - smoothstep(-pixel_size, 0.0, sdf);
   }
+  out_color.rgb = to_srgb(out_color.rgb);
 }
diff --git a/wgui/src/renderer_vk/shaders/rect.frag b/wgui/src/renderer_vk/shaders/rect.frag
index ae2613f..852e0f1 100644
--- a/wgui/src/renderer_vk/shaders/rect.frag
+++ b/wgui/src/renderer_vk/shaders/rect.frag
@@ -14,6 +14,7 @@ layout(location = 0) out vec4 out_color;
 
 #define UNIFORM_PARAMS_SET 0
 #include "uniform.glsl"
+#include "srgb.glsl"
 
 void main() {
   float rect_aspect = in_rect_size.x / in_rect_size.y;
@@ -51,4 +52,5 @@ void main() {
     // rounding cutout alpha
     out_color.a *= 1.0 - smoothstep(-pixel_size, 0.0, sdf);
   }
+  out_color.rgb = to_srgb(out_color.rgb);
 }
diff --git a/wgui/src/renderer_vk/shaders/srgb.glsl b/wgui/src/renderer_vk/shaders/srgb.glsl
new file mode 100644
index 0000000..20bd24d
--- /dev/null
+++ b/wgui/src/renderer_vk/shaders/srgb.glsl
@@ -0,0 +1,6 @@
+vec3 to_srgb(in vec3 in_color) {
+    bvec3 cutoff = lessThan(in_color, vec3(0.04045));
+    vec3 higher = pow((in_color + vec3(0.055))/vec3(1.055), vec3(2.4));
+    vec3 lower = in_color/vec3(12.92);
+    return mix(higher, lower, cutoff);
+}
diff --git a/wgui/src/renderer_vk/shaders/text.frag b/wgui/src/renderer_vk/shaders/text.frag
index 9010798..b5a4f71 100644
--- a/wgui/src/renderer_vk/shaders/text.frag
+++ b/wgui/src/renderer_vk/shaders/text.frag
@@ -12,6 +12,8 @@ layout(location = 0) out vec4 out_color;
 layout(set = 0, binding = 0) uniform sampler2D color_atlas;
 layout(set = 1, binding = 0) uniform sampler2D mask_atlas;
 
+#include "srgb.glsl"
+
 void main() {
   if (in_content_type == 0u) {
     out_color = texture(color_atlas, in_uv) * in_color;
@@ -19,4 +21,5 @@ void main() {
     out_color.rgb = in_color.rgb;
     out_color.a = in_color.a * texture(mask_atlas, in_uv).r;
   }
+  out_color.rgb = to_srgb(out_color.rgb);
 }
diff --git a/wlx-overlay-s/src/assets/gui/edit.xml b/wlx-overlay-s/src/assets/gui/edit.xml
index 3a2da94..73f7512 100644
--- a/wlx-overlay-s/src/assets/gui/edit.xml
+++ b/wlx-overlay-s/src/assets/gui/edit.xml
@@ -1,7 +1,7 @@
 <layout>
   <macro name="button_style"
     margin="2" overflow="hidden" box_sizing="border_box"
-    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
+    border_color="~color_accent" border="2" round="8" color="~color_accent_50" color2="~color_accent_10" gradient="vertical"
     align_items="center" justify_content="center" />
 
   <macro name="button_style"
@@ -9,25 +9,25 @@
     border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
 
   <template name="TopButton">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_5" color2="~color_accent_1">
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
       <sprite id="${id}_sprite" width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="TopButtonDanger">
-    <Button macro="button_style" tooltip="${tooltip}" _long_release="${long_release}" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1">
+    <Button macro="button_style" tooltip="${tooltip}" _long_release="${long_release}" border_color="~color_danger_translucent" color="~color_danger_50" color2="~color_danger_10">
       <sprite width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="TopButtonFaded">
-    <Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_5" color2="~color_faded_1">
+    <Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_50" color2="~color_faded_10">
       <sprite width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="PosButton">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_5" color2="~color_accent_1">
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
       <sprite id="${id}_sprite" width="40" height="40" src="${src}" />
     </Button>
   </template>
diff --git a/wlx-overlay-s/src/assets/gui/grab-help.xml b/wlx-overlay-s/src/assets/gui/grab-help.xml
index 4d2901e..512ab1b 100644
--- a/wlx-overlay-s/src/assets/gui/grab-help.xml
+++ b/wlx-overlay-s/src/assets/gui/grab-help.xml
@@ -6,7 +6,7 @@
         padding="16"
         flex_direction="column"
         gap="8"
-        color="#000000c0" border_color="~color_accent" border="2" round="8">
+        color="~color_bg" border_color="~color_accent" border="2" round="8">
 
         <div flex_direction="row" padding="8" justify_content="space_between">
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
diff --git a/wlx-overlay-s/src/assets/gui/keyboard.xml b/wlx-overlay-s/src/assets/gui/keyboard.xml
index f012e92..d08252f 100644
--- a/wlx-overlay-s/src/assets/gui/keyboard.xml
+++ b/wlx-overlay-s/src/assets/gui/keyboard.xml
@@ -1,7 +1,7 @@
 <layout>
   <macro name="keycap_rect"
     margin="2" width="100%" overflow="hidden" box_sizing="border_box"
-    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
+    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
     align_items="center" justify_content="center" />
 
   <macro name="keycap_div"
diff --git a/wlx-overlay-s/src/assets/gui/watch.xml b/wlx-overlay-s/src/assets/gui/watch.xml
index eb75f2d..4590ab6 100644
--- a/wlx-overlay-s/src/assets/gui/watch.xml
+++ b/wlx-overlay-s/src/assets/gui/watch.xml
@@ -1,9 +1,5 @@
 <layout>
   <theme>
-    <var key="set_color" value="#cad3f5" />
-    <var key="bgcolor" value="#010206d5" />
-
-    <var key="clock0_color" value="#cad3f5" />
     <var key="clock0_size" value="46" />
     <var key="clock0_date_size" value="16" />
     <var key="clock0_dow_size" value="16" />
@@ -14,12 +10,12 @@
   </theme>
 
   <macro name="decorative_rect"
-    padding="8" color="~bgcolor"
+    padding="8" color="~color_bg"
     border="2" border_color="~color_accent" round="8" />
 
   <macro name="button_style"
     padding="8"
-    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
+    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
     align_items="center" justify_content="center" />
 
   <template name="Device">
@@ -41,7 +37,7 @@
 
   <template name="Set">
     <Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
-      <sprite width="40" height="40" color="~set_color" src_builtin="watch/set2.svg" />
+      <sprite width="40" height="40" color="~text_color" src_builtin="watch/set2.svg" />
       <div position="absolute" margin_top="9">
         <label text="${display}" size="24" color="#00050F" weight="bold" />
       </div>
@@ -74,7 +70,7 @@
           <!-- Clock, date and various timezones -->
           <div gap="8">
             <div flex_direction="column">
-              <label text="23:59" _source="clock" _display="time" color="~clock0_color" size="~clock0_size" weight="bold" />
+              <label text="23:59" _source="clock" _display="time" color="~text_color" size="~clock0_size" weight="bold" />
               <div padding="2" gap="2" flex_direction="column">
                 <label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
                 <label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
@@ -97,18 +93,18 @@
           <div flex_direction="column" gap="8">
             <div gap="8">
               <Button macro="button_style" _press="::NewMirror" tooltip="WATCH.MIRROR" tooltip_side="left">
-                <sprite width="40" height="40" color="~set_color" src="edit/mirror.svg" />
+                <sprite width="40" height="40" color="~text_color" src="edit/mirror.svg" />
               </Button>
               <Button macro="button_style" _press="::CleanupMirrors" tooltip="WATCH.CLEANUP_MIRRORS" tooltip_side="left">
-                <sprite width="40" height="40" color="~set_color" src="watch/mirror-off.svg" />
+                <sprite width="40" height="40" color="~text_color" src="watch/mirror-off.svg" />
               </Button>
             </div>
             <div gap="8">
               <Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
-                <sprite width="40" height="40" color="~set_color" src="watch/recenter.svg" />
+                <sprite width="40" height="40" color="~text_color" src="watch/recenter.svg" />
               </Button>
               <Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
-                <sprite width="40" height="40" color="~set_color" src="watch/fix-floor.svg" />
+                <sprite width="40" height="40" color="~text_color" src="watch/fix-floor.svg" />
               </Button>
             </div>
           </div>
@@ -137,11 +133,11 @@
         <!-- Bottom buttons -->
         <div flex_direction="row" gap="4">
           <Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top" >
-            <sprite color="~set_color" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
+            <sprite color="~text_color" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
           </Button>
           <div id="edit_delete" display="none">
-            <Button macro="button_style" _long_release="::EditModeDeleteSet" tooltip="WATCH.LONG_PRESS_TO_DELETE_SET" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1">
-              <sprite color="~set_color" width="40" height="40" src="edit/delete.svg" />
+            <Button macro="button_style" _long_release="::EditModeDeleteSet" tooltip="WATCH.LONG_PRESS_TO_DELETE_SET" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_40" color2="~color_danger_10">
+              <sprite color="~text_color" width="40" height="40" src="edit/delete.svg" />
             </Button>
           </div>
           <div id="sets">
@@ -150,11 +146,11 @@
           </div>
           <div id="edit_add" display="none">
             <Button macro="button_style" _press="::EditModeAddSet" tooltip="WATCH.ADD_NEW_SET" tooltip_side="top">
-              <sprite color="~set_color" width="40" height="40" src="edit/add.svg" />
+              <sprite color="~text_color" width="40" height="40" src="edit/add.svg" />
             </Button>
           </div>
           <Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="top">
-            <sprite color="~set_color" width="40" height="40" src="watch/edit.svg" />
+            <sprite color="~text_color" width="40" height="40" src="watch/edit.svg" />
           </Button>
         </div>
       </div>