From e79dfcb71945b2163fa71c5c6f99b6722e0bc842 Mon Sep 17 00:00:00 2001
From: Aleksander <aleksander@oo8.dev>
Date: Sun, 12 Jul 2026 13:23:18 +0200
Subject: [PATCH] dash-frontend: fix light theme everywhere

---
 dash-frontend/assets/gui/dashboard.xml        | 25 +++++----
 dash-frontend/assets/gui/t_group_box.xml      | 10 ++--
 dash-frontend/assets/gui/t_loading.xml        |  4 +-
 dash-frontend/assets/gui/tab/donate.xml       |  6 +-
 dash-frontend/assets/gui/tab/settings.xml     |  8 +--
 .../assets/gui/tab/welcome_common.xml         |  4 +-
 .../assets/gui/tab/welcome_page_0.xml         |  4 +-
 .../assets/gui/tab/welcome_page_3.xml         |  4 +-
 .../assets/gui/tab/welcome_page_5.xml         |  2 +-
 .../assets/gui/view/app_launcher.xml          |  6 +-
 .../assets/gui/view/audio_settings.xml        |  9 +--
 dash-frontend/assets/gui/view/bindings.xml    |  4 +-
 .../assets/gui/view/input_profiles.xml        |  2 +-
 .../assets/gui/view/skymap_list_cell.xml      |  2 +-
 dash-frontend/src/tab/welcome.rs              | 10 +++-
 dash-frontend/src/util/wgui_simple.rs         |  2 +-
 dash-frontend/src/views/audio_settings.rs     |  7 ++-
 wgui/src/components/button.rs                 | 12 +++-
 wgui/src/components/checkbox.rs               |  3 +-
 wgui/src/components/tabs.rs                   | 19 +++++--
 wgui/src/palette.rs                           | 56 +++++++++----------
 wgui/src/parser/component_button.rs           |  5 ++
 wgui/src/parser/style.rs                      | 10 ++--
 23 files changed, 126 insertions(+), 88 deletions(-)

diff --git a/dash-frontend/assets/gui/dashboard.xml b/dash-frontend/assets/gui/dashboard.xml
index 1f25d841..5b1eebe7 100644
--- a/dash-frontend/assets/gui/dashboard.xml
+++ b/dash-frontend/assets/gui/dashboard.xml
@@ -12,12 +12,13 @@
       round="100%"
       width="~side_button_size"
       height="~side_button_size"
-      color="background_contrast"
+      color="background_contrast(transparent)"
       border_color="background_contrast"
+      hover_border_color="on_background_contrast"
       tooltip="${tooltip}"
       tooltip_side="${tooltip_side}"
     >
-      <sprite src_builtin="${src_builtin}" width="~side_sprite_size" height="~side_sprite_size" />
+      <sprite src_builtin="${src_builtin}" width="~side_sprite_size" height="~side_sprite_size" color="on_background_contrast" />
     </Button>
   </template>
 
@@ -45,7 +46,7 @@
           <SideButton id="btn_side_apps" src_builtin="dashboard/apps.svg" tooltip="APPLICATIONS" tooltip_side="right" />
           <SideButton id="btn_side_games" src_builtin="dashboard/games.svg" tooltip="GAMES" tooltip_side="right" />
           <SideButton id="btn_side_monado" src_builtin="dashboard/monado.svg" tooltip="MONADO_RUNTIME" tooltip_side="right" />
-          <rectangle height="2" color="#FFFFFF33" width="~side_sprite_size" />
+          <rectangle height="2" color="outline" width="~side_sprite_size" />
           <SideButton id="btn_side_settings" src_builtin="dashboard/settings.svg" tooltip="SETTINGS" tooltip_side="right" />
         </rectangle>
       </div>
@@ -62,13 +63,13 @@
           <!-- Title bar -->
           <div width="100%" align_items="center" justify_content="center">
             <rectangle min_width="300" height="100%" consume_mouse_events="1" round="100%" color="background_contrast" align_items="center" justify_content="center" gap="8">
-              <sprite id="sprite_titlebar_icon" width="24" height="24" />
-              <label id="label_titlebar_title" weight="bold" size="16" text="Title" />
+              <sprite id="sprite_titlebar_icon" width="24" height="24" color="on_background_contrast" />
+              <label id="label_titlebar_title" weight="bold" size="16" text="Title" color="on_background_contrast" />
             </rectangle>
           </div>
           <!-- Close button -->
           <Button position="absolute" id="btn_close" color="background_contrast" border_color="background_contrast" round="100%" width="~top_size" height="~top_size" tooltip="CLOSE_WINDOW" tooltip_side="left">
-            <sprite src_builtin="dashboard/close.svg" width="32" height="32" />
+            <sprite src_builtin="dashboard/close.svg" width="32" height="32" color="on_background_contrast" />
           </Button>
         </div>
 
@@ -130,22 +131,22 @@
 
           <!-- top shine -->
           <div position="absolute" width="100%" height="100%" justify_content="center">
-            <rectangle position="absolute" width="99%" height="2" color="#FFFFFF22" round="4" />
+            <rectangle position="absolute" width="99%" height="2" color="highlight(opacity-0.2)" round="4" />
           </div>
 
           <!-- Left bottom side -->
           <div margin_left="8">
-            <Button id="btn_audio" color="#FFFFFF00" border_color="#FFFFFF00" tooltip="AUDIO.VOLUME" tooltip_side="top">
-              <sprite src_builtin="dashboard/volume.svg" width="24" height="24" margin="8" />
+            <Button id="btn_audio" color="highlight(transparent)" border_color="highlight(transparent)" tooltip="AUDIO.VOLUME" tooltip_side="top">
+              <sprite src_builtin="dashboard/volume.svg" width="24" height="24" margin="8" color="on_background" />
             </Button>
-            <Button id="btn_recenter" color="#FFFFFF00" border_color="#FFFFFF00" tooltip="ACTIONS.RECENTER_PLAYSPACE" tooltip_side="top">
-              <sprite src_builtin="dashboard/recenter.svg" width="24" height="24" margin="8" />
+            <Button id="btn_recenter" color="highlight(transparent)" border_color="highlight(transparent)" tooltip="ACTIONS.RECENTER_PLAYSPACE" tooltip_side="top">
+              <sprite src_builtin="dashboard/recenter.svg" width="24" height="24" margin="8" color="on_background" />
             </Button>
           </div>
 
           <!-- Right bottom side -->
           <div margin_right="16">
-            <label id="label_time" size="16" weight="light" color="on_background_contrast" />
+            <label id="label_time" weight="bold" size="16" color="on_background" />
           </div>
         </rectangle>
       </div>
diff --git a/dash-frontend/assets/gui/t_group_box.xml b/dash-frontend/assets/gui/t_group_box.xml
index 36524ad1..c9638d6b 100644
--- a/dash-frontend/assets/gui/t_group_box.xml
+++ b/dash-frontend/assets/gui/t_group_box.xml
@@ -3,8 +3,8 @@
     flex_direction="column"
     align_items="baseline"
     border="2"
-    color="#00000055"
-    border_color="#FFFFFF66"
+    color="background_contrast(opacity-0.5)"
+    border_color="outline"
     padding="12"
     gap="8"
     round="8" />
@@ -12,9 +12,9 @@
   <!-- src_builtin, text, translation -->
   <template name="GroupBoxTitle">
     <div flex_direction="row" align_items="center" gap="8">
-      <sprite src_builtin="${src_builtin}" width="24" height="24" />
-      <label text="${text}" translation="${translation}" weight="bold" size="18" />
+      <sprite src_builtin="${src_builtin}" width="24" height="24" color="on_background" />
+      <label text="${text}" translation="${translation}" weight="bold" size="18" color="on_background" />
     </div>
-    <rectangle color="#FFFFFF44" width="100%" height="2" />
+    <rectangle color="outline" width="100%" height="2" />
   </template>
 </layout>
diff --git a/dash-frontend/assets/gui/t_loading.xml b/dash-frontend/assets/gui/t_loading.xml
index ca8c5786..79e5c0c2 100644
--- a/dash-frontend/assets/gui/t_loading.xml
+++ b/dash-frontend/assets/gui/t_loading.xml
@@ -2,7 +2,7 @@
   <template name="LoadingWithText">
     <div id="root" width="100%" height="100%" align_items="center" justify_content="center">
       <div flex_direction="row" gap="8" align_items="center" >
-        <sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32"/>
+        <sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32" color="on_background"/>
         <label translation="LOADING" weight="bold"/>
       </div>
     </div>
@@ -10,7 +10,7 @@
 
   <template name="LoadingWithoutText">
     <div id="root" width="100%" height="100%" align_items="center" justify_content="center">
-      <sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32"/>
+      <sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32" color="on_background"/>
     </div>
   </template>
 </layout>
diff --git a/dash-frontend/assets/gui/tab/donate.xml b/dash-frontend/assets/gui/tab/donate.xml
index e7b975d5..92faaede 100644
--- a/dash-frontend/assets/gui/tab/donate.xml
+++ b/dash-frontend/assets/gui/tab/donate.xml
@@ -5,7 +5,7 @@
   <template name="Avatar">
     <div flex_direction="column" gap="12" align_items="center">
       <image src_builtin="${icon}" width="72" height="72" round="100%" position="relative">
-        <rectangle position="absolute" margin_left="-2" margin_top="-2" width="76" height="76" color="#FFFFFF" round="100%"/>
+        <rectangle position="absolute" margin_left="-2" margin_top="-2" width="76" height="76" color="highlight" round="100%"/>
       </image>
       <label size="14" text="${nickname}"/>
     </div>
@@ -18,7 +18,7 @@
     <div margin="32" flex_direction="column" align_items="center" justify_content="center" gap="16" height="100%">
       <div gap="16" align_items="center" width="100%">
         <sprite color="#FFAAAA" src_builtin="dashboard/donate.svg" min_width="64" min_height="64"/>
-        <label wrap="1" size="20" translation="DONATE.DESCRIPTION"/>
+        <label wrap="1" size="20" translation="DONATE.DESCRIPTION" color="on_background"/>
       </div>
 
       <div flex_direction="column" gap="8" align_items="center" margin_top="16">
@@ -28,7 +28,7 @@
         <label text="opencollective.com/wayvr-org"/>
       </div>
 
-      <label weight="bold" size="24" translation="DONATE.THANK_YOU_WAYVR"/>
+      <label weight="bold" size="24" translation="DONATE.THANK_YOU_WAYVR" color="on_background"/>
 
       <div gap="32" margin_top="16">
         <Avatar icon="dashboard/avatars/galister.png" nickname="galister"/>
diff --git a/dash-frontend/assets/gui/tab/settings.xml b/dash-frontend/assets/gui/tab/settings.xml
index 7f65422c..50fc7c67 100644
--- a/dash-frontend/assets/gui/tab/settings.xml
+++ b/dash-frontend/assets/gui/tab/settings.xml
@@ -33,15 +33,15 @@
 
   <template name="ButtonText">
     <Button id="${id}" height="32" tooltip="${translation}_HELP" padding="4" gap="8">
-      <sprite src_builtin="${icon}" height="24" width="24" />
-      <label align="left" translation="${translation}" weight="bold" min_width="200" />
+      <sprite src_builtin="${icon}" height="24" width="24" color="on_background" />
+      <label align="left" translation="${translation}" weight="bold" min_width="200" color="on_background" />
     </Button>
   </template>
 
   <template name="DangerButton">
     <Button id="${id}" border_color="danger" color="danger(rgb-mult-0.5)" height="32" tooltip="${translation}_HELP" padding="4" gap="8">
-      <sprite src_builtin="${icon}" height="24" width="24" />
-      <label align="left" translation="${translation}" weight="bold" min_width="200" />
+      <sprite src_builtin="${icon}" height="24" width="24" color="on_danger" />
+      <label align="left" translation="${translation}" weight="bold" min_width="200" color="on_danger" />
     </Button>
   </template>
 
diff --git a/dash-frontend/assets/gui/tab/welcome_common.xml b/dash-frontend/assets/gui/tab/welcome_common.xml
index eb53203c..7cabbb93 100644
--- a/dash-frontend/assets/gui/tab/welcome_common.xml
+++ b/dash-frontend/assets/gui/tab/welcome_common.xml
@@ -3,13 +3,13 @@
   <template name="PageTitle">
     <div position="absolute" align_self="start" justify_self="center" width="100%" margin_top="16" gap="8" align_items="center" justify_content="center">
       <sprite width="48" height="48" src_builtin="${icon}" color="#FFFFFF"/>
-      <label size="28" weight="bold" translation="${translation}" shadow="#000000" shadow_x="3" shadow_y="3" />
+      <label size="28" weight="bold" translation="${translation}" color="#FFFFFF" shadow="#000000" shadow_x="3" shadow_y="3" />
     </div>
   </template>
 
   <!-- text -->
   <template name="TextDesc">
-    <label wrap="1" translation="${translation}" size="20" width="500" shadow="#000000" weight="bold"/>
+    <label wrap="1" translation="${translation}" size="20" width="500" color="#FFFFFF" shadow="#000000" weight="bold"/>
   </template>
 
   <template name="TextDescBig">
diff --git a/dash-frontend/assets/gui/tab/welcome_page_0.xml b/dash-frontend/assets/gui/tab/welcome_page_0.xml
index 72980a5e..d6a59d44 100644
--- a/dash-frontend/assets/gui/tab/welcome_page_0.xml
+++ b/dash-frontend/assets/gui/tab/welcome_page_0.xml
@@ -10,12 +10,12 @@
     <label size="20" translation="WELCOME.GUIDE_INTRO"/>
 
     <div gap="4" align_items="center" margin_top="8">
-      <sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg"/>
+      <sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg" color="on_background"/>
       <label wrap="1" size="14" translation="WELCOME.REPOSITION_THIS_WINDOW_BY_GRABBING"/>
     </div>
 
     <div gap="4" align_items="center">
-      <sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg"/>
+      <sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg" color="on_background"/>
       <label wrap="1" size="14" translation="WELCOME.LAST_PAGE_INFO"/>
     </div>
 
diff --git a/dash-frontend/assets/gui/tab/welcome_page_3.xml b/dash-frontend/assets/gui/tab/welcome_page_3.xml
index f8b901cc..68523d6d 100644
--- a/dash-frontend/assets/gui/tab/welcome_page_3.xml
+++ b/dash-frontend/assets/gui/tab/welcome_page_3.xml
@@ -6,12 +6,12 @@
       <div macro="video_overlay_content">
         <PageTitle icon="dashboard/click.svg" translation="WELCOME.LASER_COLORS"/>
         <div position="relative" flex_direction="row" gap="16" margin="16" align_self="end" justify_self="end" align_items="center">
-          <rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="primary" border="2" >
+          <rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="outline" border="2" >
             <label size="12" weight="bold" color="#00FFFF" translation="WELCOME.REGULAR_MODE_BLUE_LASER"/>
             <label size="12" weight="bold" color="#FFAA00" translation="WELCOME.RIGHT_CLICK_MODE_ORANGE_LASER"/>
             <label size="12" weight="bold" color="#FF88FF" translation="WELCOME.MIDDLE_CLICK_MODE_PURPLE_LASER"/>
           </rectangle>
-          <label wrap="1" size="18" width="450" weight="bold" shadow="#000000" translation="WELCOME.LASER_FUNCTIONALITY"/>
+          <label wrap="1" size="18" width="450" weight="bold" color="#ffffff" shadow="#000000" translation="WELCOME.LASER_FUNCTIONALITY"/>
         </div>
       </div>
     </Video>
diff --git a/dash-frontend/assets/gui/tab/welcome_page_5.xml b/dash-frontend/assets/gui/tab/welcome_page_5.xml
index d6b025f5..4efbc2c6 100644
--- a/dash-frontend/assets/gui/tab/welcome_page_5.xml
+++ b/dash-frontend/assets/gui/tab/welcome_page_5.xml
@@ -20,7 +20,7 @@
         
         <Button id="btn_home_screen" min_height="48" >
           <sprite src_builtin="dashboard/check.svg" width="32" height="32"  margin="8"/>
-          <label color="on_background_variant" size="20" weight="bold" translation="WELCOME.FINISH_TUTORIAL" margin_right="8" />
+          <label color="on_background" size="20" weight="bold" translation="WELCOME.FINISH_TUTORIAL" margin_right="8" />
         </Button>
       </div>
     </div>
diff --git a/dash-frontend/assets/gui/view/app_launcher.xml b/dash-frontend/assets/gui/view/app_launcher.xml
index eea7a965..cdcd59f2 100644
--- a/dash-frontend/assets/gui/view/app_launcher.xml
+++ b/dash-frontend/assets/gui/view/app_launcher.xml
@@ -53,15 +53,15 @@
         <div flex_direction="row" align_items="end" justify_content="center" gap="8" margin_top="8">
           <Button id="btn_unpin" color="#997777" padding_left="8" padding_right="8" round="8" min_height="40">
             <sprite src_builtin="dashboard/heart_minus.svg" width="32" height="32" />
-            <label translation="REMOVE_FROM_FAVOURITES" weight="bold" size="17" shadow="#00000099" />
+            <label translation="REMOVE_FROM_FAVOURITES" weight="bold" size="17" color="#FFFFFF" shadow="#00000099" />
           </Button>
           <Button id="btn_pin" color="#ce4477" border_color="#ce4477" padding_left="8" padding_right="8" round="8" min_height="40" tooltip="ADD_TO_FAVOURITES_HINT">
             <sprite src_builtin="dashboard/heart_plus.svg" width="32" height="32" />
-            <label translation="ADD_TO_FAVOURITES" weight="bold" size="17" shadow="#00000099" />
+            <label translation="ADD_TO_FAVOURITES" weight="bold" size="17" color="#FFFFFF" shadow="#00000099" />
           </Button>
           <Button id="btn_launch" color="#44ce22" border_color="#44ce22" padding_left="8" padding_right="8" round="8" min_width="200" min_height="40">
             <sprite src_builtin="dashboard/play.svg" width="32" height="32" />
-            <label translation="APP_LAUNCHER.LAUNCH" weight="bold" size="17" shadow="#00000099" />
+            <label translation="APP_LAUNCHER.LAUNCH" weight="bold" size="17" color="#FFFFFF" shadow="#00000099" />
           </Button>
         </div>
       </div>
diff --git a/dash-frontend/assets/gui/view/audio_settings.xml b/dash-frontend/assets/gui/view/audio_settings.xml
index c41ef5e3..a25a2cbd 100644
--- a/dash-frontend/assets/gui/view/audio_settings.xml
+++ b/dash-frontend/assets/gui/view/audio_settings.xml
@@ -5,8 +5,8 @@
   <template name="DeviceSlider">
     <rectangle macro="group_box">
       <div width="100%" align_items="center" justify_content="center" gap="8">
-        <sprite src_builtin="${device_icon}" width="16" height="16" />
-        <label text="${device_name}" margin_right="8" size="12" weight="bold" />
+        <sprite src_builtin="${device_icon}" width="16" height="16" color="on_background" />
+        <label text="${device_name}" margin_right="8" size="12" weight="bold" color="on_background" />
       </div>
       <div width="100%" align_items="center">
         <CheckBox id="checkbox" />
@@ -20,7 +20,7 @@
   <template name="Card">
     <rectangle macro="group_box">
       <div width="100%" align_items="center" justify_content="center">
-        <label text="${card_name}" size="12" weight="bold" />
+        <label text="${card_name}" size="12" weight="bold" color="on_background" />
       </div>
       <Button id="btn_card" text="${profile_name}" width="100%" height="32" />
     </rectangle>
@@ -29,7 +29,7 @@
   <template name="SelectAudioProfileText">
     <div align_items="center" gap="8">
       <Button width="48" height="32" id="btn_back">
-        <sprite src_builtin="dashboard/back.svg" width="24" height="24" />
+        <sprite src_builtin="dashboard/back.svg" width="24" height="24" color="on_background" />
       </Button>
       <label translation="AUDIO.SELECT_AUDIO_CARD_PROFILE" size="14" weight="bold" />
     </div>
@@ -59,6 +59,7 @@
           min_width="32"
           tooltip="AUDIO.AUTO_SWITCH_TO_VR_AUDIO"
           color="primary"
+          sprite_color="on_primary"
           tooltip_side="right" />
 
         <BottomButton id="btn_sinks" src_builtin="dashboard/volume.svg" translation="AUDIO.SPEAKERS" />
diff --git a/dash-frontend/assets/gui/view/bindings.xml b/dash-frontend/assets/gui/view/bindings.xml
index 95afd062..7e35170e 100644
--- a/dash-frontend/assets/gui/view/bindings.xml
+++ b/dash-frontend/assets/gui/view/bindings.xml
@@ -14,7 +14,7 @@
     <rectangle macro="group_box" id="${id}">
       <!-- top row -->
       <div flex_direction="row" gap="8" align_items="center">
-        <sprite src_builtin="dashboard/controller.svg" width="24" height="24"/>
+        <sprite src_builtin="dashboard/controller.svg" width="24" height="24" color="on_background"/>
         <label translation="${translation}" color="primary" weight="bold" size="14" />
       </div>
       <!-- filled-in at runtime -->
@@ -26,7 +26,7 @@
       <div flex_direction="column" gap="8" align_items="center" overflow_y="scroll" width="100%" padding="16">
         <div id="list_parent" flex_direction="column" gap="6" width="100%"></div>
       </div>
-      <rectangle color="#000000cc" flex_direction="row" gap="8" justify_content="end" padding="8">
+      <rectangle color="background_contrast" flex_direction="row" gap="8" justify_content="end" padding="8">
         <Button id="btn_cancel" sprite_src_builtin="dashboard/cancel.svg" min_width="100" height="32" translation="APP_SETTINGS.CANCEL" />
         <Button id="btn_save" sprite_src_builtin="dashboard/check.svg" min_width="100" height="32" translation="APP_SETTINGS.SAVE" />
       </rectangle>
diff --git a/dash-frontend/assets/gui/view/input_profiles.xml b/dash-frontend/assets/gui/view/input_profiles.xml
index 3f0531ce..28b022cb 100644
--- a/dash-frontend/assets/gui/view/input_profiles.xml
+++ b/dash-frontend/assets/gui/view/input_profiles.xml
@@ -2,7 +2,7 @@
   <!-- id, text -->
   <template name="InputProfileButton">
     <Button id="${id}" width="350" gap="8" justify_content="start" >
-      <sprite margin_left="8" src_builtin="dashboard/controller.svg" min_width="24" min_height="24"/>
+      <sprite margin_left="8" src_builtin="dashboard/controller.svg" min_width="24" min_height="24" color="on_background"/>
       <label text="${text}" weight="bold"/>
     </Button>
   </template>
diff --git a/dash-frontend/assets/gui/view/skymap_list_cell.xml b/dash-frontend/assets/gui/view/skymap_list_cell.xml
index 93f32e8e..ba286753 100644
--- a/dash-frontend/assets/gui/view/skymap_list_cell.xml
+++ b/dash-frontend/assets/gui/view/skymap_list_cell.xml
@@ -34,7 +34,7 @@
   -->
   <template name="ResolutionPip">
     <rectangle color="${color}" padding_left="4" padding_right="4" padding_top="2" padding_bottom="2" round="3" align_self="start">
-      <label text="${text}" weight="bold" size="12" shadow="#000000" shadow_x="2" shadow_y="2"/>
+      <label text="${text}" weight="bold" size="12" color="#FFFFFF" shadow="#000000" shadow_x="2" shadow_y="2"/>
     </rectangle>
   </template>
 </layout>
diff --git a/dash-frontend/src/tab/welcome.rs b/dash-frontend/src/tab/welcome.rs
index 0dbf8c2f..b4a3ce8f 100644
--- a/dash-frontend/src/tab/welcome.rs
+++ b/dash-frontend/src/tab/welcome.rs
@@ -2,6 +2,7 @@ use std::{marker::PhantomData, rc::Rc};
 
 use wgui::{
 	assets::AssetPath,
+	color::WguiColorName,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	layout::{Layout, WidgetID},
@@ -110,7 +111,14 @@ impl<T> TabWelcome<T> {
 		for i in 0..PAGE_COUNT {
 			let mut params = TemplateParams::new();
 			let is_selected = i == self.current_page;
-			params.insert("COLOR", if is_selected { "#FFFFFF" } else { "#FFFFFF11" });
+			params.insert(
+				"COLOR",
+				if is_selected {
+					"primary"
+				} else {
+					"on_background(opacity-0.25)"
+				},
+			);
 
 			self
 				.state
diff --git a/dash-frontend/src/util/wgui_simple.rs b/dash-frontend/src/util/wgui_simple.rs
index 3242a551..f06c3f9a 100644
--- a/dash-frontend/src/util/wgui_simple.rs
+++ b/dash-frontend/src/util/wgui_simple.rs
@@ -84,7 +84,7 @@ pub fn create_label_error(layout: &mut Layout, parent: WidgetID, content: String
 
 pub fn create_icon(layout: &mut Layout, id_parent: WidgetID, size: Vec2, path: AssetPath) -> anyhow::Result<WidgetID> {
 	let widget_sprite = WidgetSprite::create(WidgetSpriteParams {
-		color: None,
+		color: Some(WguiColorName::OnBackground.into()),
 		glyph_data: Some(CustomGlyphData::from_assets(&layout.state.globals, path)?),
 	});
 
diff --git a/dash-frontend/src/views/audio_settings.rs b/dash-frontend/src/views/audio_settings.rs
index 3c96778e..03d90543 100644
--- a/dash-frontend/src/views/audio_settings.rs
+++ b/dash-frontend/src/views/audio_settings.rs
@@ -666,12 +666,13 @@ impl View {
 		let mut com = layout.common();
 
 		let mut perform = |btn_num: u8, btn: &Rc<ComponentButton>| {
-			let color = if num == btn_num {
-				WguiColorName::Primary
+			let (color, label_color) = if num == btn_num {
+				(WguiColorName::Primary, WguiColorName::OnPrimary)
 			} else {
-				WguiColorName::BackgroundVariant
+				(WguiColorName::BackgroundVariant, WguiColorName::OnBackgroundVariant)
 			};
 			btn.set_color(&mut com, color.into());
+			btn.set_label_color(&mut com, label_color.into());
 		};
 
 		perform(0, &self.btn_sinks);
diff --git a/wgui/src/components/button.rs b/wgui/src/components/button.rs
index 1f674113..f74b4799 100644
--- a/wgui/src/components/button.rs
+++ b/wgui/src/components/button.rs
@@ -34,6 +34,7 @@ use taffy::{AlignItems, JustifyContent, prelude::length};
 pub struct Params<'a> {
 	pub text: Option<Translation>, // if unset, label will not be populated
 	pub sprite_src: Option<AssetPath<'a>>,
+	pub sprite_color: Option<WguiColor>,
 	pub color: Option<WguiColor>,
 	pub border: f32,
 	pub border_color: Option<WguiColor>,
@@ -53,6 +54,7 @@ pub struct Params<'a> {
 impl Default for Params<'_> {
 	fn default() -> Self {
 		Self {
+			sprite_color: None,
 			text: Some(Translation::from_raw_text("")),
 			sprite_src: None,
 			color: None,
@@ -171,6 +173,13 @@ impl ComponentButton {
 		state.colors.color = color;
 	}
 
+	pub fn set_label_color(&self, common: &mut CallbackDataCommon, color: WguiColor) {
+		let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(self.data.id_label) else {
+			return;
+		};
+		label.set_color(common, color, true);
+	}
+
 	pub fn get_time_since_last_pressed(&self) -> Duration {
 		self.state.borrow().last_pressed.elapsed()
 	}
@@ -498,7 +507,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
 	if let Some(sprite_path) = params.sprite_src {
 		let sprite = WidgetSprite::create(WidgetSpriteParams {
 			glyph_data: Some(CustomGlyphData::from_assets(&ess.layout.state.globals, sprite_path)?),
-			..Default::default()
+			color: Some(params.sprite_color.unwrap_or(WguiColorName::OnBackground.into())),
 		});
 
 		ess.layout.add_child(
@@ -522,6 +531,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
 				content,
 				style: TextStyle {
 					weight: Some(FontWeight::Bold),
+					color: Some(WguiColorName::OnBackground.into()),
 					..params.text_style
 				},
 			},
diff --git a/wgui/src/components/checkbox.rs b/wgui/src/components/checkbox.rs
index 24f29c0c..3b98aab3 100644
--- a/wgui/src/components/checkbox.rs
+++ b/wgui/src/components/checkbox.rs
@@ -385,7 +385,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
 		id_container,
 		WidgetRectangle::create(WidgetRectangleParams {
 			border: 2.0,
-			border_color: WguiColorName::OnPrimary.into(),
+			border_color: WguiColorName::OnBackground.into(),
 			round: round_8,
 			color: WguiColor::from(WguiColorName::OnPrimary).with_alpha(0.0),
 			..Default::default()
@@ -425,6 +425,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
 			content: params.text,
 			style: TextStyle {
 				weight: Some(FontWeight::Bold),
+				color: Some(WguiColorName::OnBackground.into()),
 				..Default::default()
 			},
 		},
diff --git a/wgui/src/components/tabs.rs b/wgui/src/components/tabs.rs
index f9b2fd43..c6660a40 100644
--- a/wgui/src/components/tabs.rs
+++ b/wgui/src/components/tabs.rs
@@ -65,14 +65,20 @@ impl ComponentTrait for ComponentTabs {
 	}
 }
 
+fn set_button_selected(common: &mut CallbackDataCommon, button: &Rc<ComponentButton>, selected: bool) {
+	if selected {
+		button.set_color(common, WguiColorName::Primary.into());
+		button.set_label_color(common, WguiColorName::OnPrimary.into());
+	} else {
+		button.set_color(common, WguiColorName::Background.into());
+		button.set_label_color(common, WguiColorName::OnBackground.into());
+	}
+}
+
 impl State {
 	fn select_entry(&mut self, common: &mut CallbackDataCommon, name: &Rc<str>) {
 		for entry in &self.mounted_entries {
-			if *entry.name == **name {
-				entry.button.set_color(common, WguiColorName::Primary.into());
-			} else {
-				entry.button.set_color(common, WguiColorName::BackgroundVariant.into());
-			}
+			set_button_selected(common, &entry.button, *entry.name == **name);
 		}
 		self.selected_entry_name = name.clone();
 
@@ -138,6 +144,9 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
 			},
 		)?;
 
+		// init colors
+		set_button_selected(&mut ess.layout.common(), &button, false);
+
 		mounted_entries.push(MountedEntry {
 			name: Rc::from(entry.name),
 			button,
diff --git a/wgui/src/palette.rs b/wgui/src/palette.rs
index 3108f79b..f79109b3 100644
--- a/wgui/src/palette.rs
+++ b/wgui/src/palette.rs
@@ -152,7 +152,7 @@ static AYU: &WguiColorPalette = &WguiColorPalette {
 		hex("#BFBDB6"), // OnBackgroundContrast
 		hex("#565B66"), // Outline
 		hex("#000000"), // Shadow
-		hex("#242936"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -174,7 +174,7 @@ static AYU_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#5C6166"), // OnBackgroundContrast
 		hex("#8A9199"), // Outline
 		hex("#F8F9FA"), // Shadow
-		hex("#FFFFFF"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -196,7 +196,7 @@ static CATTPUCCIN: &WguiColorPalette = &WguiColorPalette {
 		hex("#cdd6f4"), // OnBackgroundContrast
 		hex("#4c4f69"), // Outline
 		hex("#11111b"), // Shadow
-		hex("#45475a"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -218,7 +218,7 @@ static CATTPUCCIN_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#4C4F69"), // OnBackgroundContrast
 		hex("#A5ADCB"), // Outline
 		hex("#DCE0E8"), // Shadow
-		hex("#E6E9EF"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -240,7 +240,7 @@ static CYBERPUNK: &WguiColorPalette = &WguiColorPalette {
 		hex("#5C8AC4"), // OnBackgroundContrast
 		hex("#45A0D6"), // Outline
 		hex("#090D13"), // Shadow
-		hex("#17202C"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -262,7 +262,7 @@ static CYBERPUNK_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#1A1914"), // OnBackgroundContrast
 		hex("#7B52AB"), // Outline
 		hex("#B8D4E6"), // Shadow
-		hex("#EAF3F5"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -284,7 +284,7 @@ static DRACULA: &WguiColorPalette = &WguiColorPalette {
 		hex("#F8F8F2"), // OnBackgroundContrast
 		hex("#5A5E77"), // Outline
 		hex("#282A36"), // Shadow
-		hex("#343746"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -306,7 +306,7 @@ static DRACULA_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#282A36"), // OnBackgroundContrast
 		hex("#CACAD3"), // Outline
 		hex("#D6D8E0"), // Shadow
-		hex("#DDDDE4"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -328,7 +328,7 @@ static ELDRITCH: &WguiColorPalette = &WguiColorPalette {
 		hex("#EBFAFA"), // OnBackgroundContrast
 		hex("#3B4261"), // Outline
 		hex("#414868"), // Shadow
-		hex("#343A52"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -350,7 +350,7 @@ static ELDRITCH_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#171928"), // OnBackgroundContrast
 		hex("#B0B6C3"), // Outline
 		hex("#E0E3E8"), // Shadow
-		hex("#E8EBF2"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -372,7 +372,7 @@ static EVERFOREST: &WguiColorPalette = &WguiColorPalette {
 		hex("#D3C6AA"), // OnBackgroundContrast
 		hex("#D3C6AA"), // Outline
 		hex("#475258"), // Shadow
-		hex("#343F44"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -394,7 +394,7 @@ static EVERFOREST_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#232A2E"), // OnBackgroundContrast
 		hex("#232A2E"), // Outline
 		hex("#ECF5ED"), // Shadow
-		hex("#D3C6AA"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -416,7 +416,7 @@ static GRUVBOX: &WguiColorPalette = &WguiColorPalette {
 		hex("#FBF1C7"), // OnBackgroundContrast
 		hex("#57514E"), // Outline
 		hex("#282828"), // Shadow
-		hex("#504945"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -438,7 +438,7 @@ static GRUVBOX_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#3C3836"), // OnBackgroundContrast
 		hex("#BDAE93"), // Outline
 		hex("#D5C4A1"), // Shadow
-		hex("#DCCFA8"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -460,7 +460,7 @@ static KANAGAWA: &WguiColorPalette = &WguiColorPalette {
 		hex("#C8C093"), // OnBackgroundContrast
 		hex("#363646"), // Outline
 		hex("#1F1F28"), // Shadow
-		hex("#363646"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -482,7 +482,7 @@ static KANAGAWA_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#545464"), // OnBackgroundContrast
 		hex("#CFC49C"), // Outline
 		hex("#F2ECBC"), // Shadow
-		hex("#E7DBA0"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -504,7 +504,7 @@ static MONOCHROME: &WguiColorPalette = &WguiColorPalette {
 		hex("#828282"), // OnBackgroundContrast
 		hex("#3C3C3C"), // Outline
 		hex("#000000"), // Shadow
-		hex("#242424"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -526,7 +526,7 @@ static MONOCHROME_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#555555"), // OnBackgroundContrast
 		hex("#C3C3C3"), // Outline
 		hex("#FAFAFA"), // Shadow
-		hex("#F2F2F2"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -548,7 +548,7 @@ static NORD: &WguiColorPalette = &WguiColorPalette {
 		hex("#ECEFF4"), // OnBackgroundContrast
 		hex("#505A70"), // Outline
 		hex("#2E3440"), // Shadow
-		hex("#434C5E"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -570,7 +570,7 @@ static NORD_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#2E3440"), // OnBackgroundContrast
 		hex("#C5CEDD"), // Outline
 		hex("#D8DEE9"), // Shadow
-		hex("#F5F7FA"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -592,7 +592,7 @@ static OSAKA_JADE: &WguiColorPalette = &WguiColorPalette {
 		hex("#A6B5B1"), // OnBackgroundContrast
 		hex("#1B6352"), // Outline
 		hex("#040A09"), // Shadow
-		hex("#16382F"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -614,7 +614,7 @@ static OSAKA_JADE_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#263731"), // OnBackgroundContrast
 		hex("#5C7A6A"), // Outline
 		hex("#8A9E90"), // Shadow
-		hex("#C2D2C6"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -636,7 +636,7 @@ static ROSEPINE: &WguiColorPalette = &WguiColorPalette {
 		hex("#E0DEF4"), // OnBackgroundContrast
 		hex("#403D52"), // Outline
 		hex("#191724"), // Shadow
-		hex("#403D52"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -658,7 +658,7 @@ static ROSEPINE_LIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#575279"), // OnBackgroundContrast
 		hex("#DFDAD9"), // Outline
 		hex("#FAF4ED"), // Shadow
-		hex("#FFFFFF"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -680,7 +680,7 @@ static SOLARIZED_NIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#839496"), // OnBackgroundContrast
 		hex("#0C5C70"), // Outline
 		hex("#002B36"), // Shadow
-		hex("#0A4050"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -702,7 +702,7 @@ static SOLARIZED_DAY: &WguiColorPalette = &WguiColorPalette {
 		hex("#657B83"), // OnBackgroundContrast
 		hex("#DFD4B1"), // Outline
 		hex("#EEE8D5"), // Shadow
-		hex("#FFFDF5"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
 
@@ -724,7 +724,7 @@ static TOKYO_NIGHT: &WguiColorPalette = &WguiColorPalette {
 		hex("#C0CAF5"), // OnBackgroundContrast
 		hex("#565F89"), // Outline
 		hex("#15161E"), // Shadow
-		hex("#2F3549"), // Highlight
+		hex("#ffffff"), // Highlight
 	],
 };
 
@@ -746,6 +746,6 @@ static TOKYO_DAY: &WguiColorPalette = &WguiColorPalette {
 		hex("#3760BF"), // OnBackgroundContrast
 		hex("#B4B5B9"), // Outline
 		hex("#A8AECB"), // Shadow
-		hex("#F0F1F5"), // Highlight
+		hex("#000000"), // Highlight
 	],
 };
diff --git a/wgui/src/parser/component_button.rs b/wgui/src/parser/component_button.rs
index 4833a2ed..10f8ea9e 100644
--- a/wgui/src/parser/component_button.rs
+++ b/wgui/src/parser/component_button.rs
@@ -22,6 +22,7 @@ pub fn parse_component_button<'a>(
 	tag_name: &str,
 ) -> anyhow::Result<WidgetID> {
 	let mut color: Option<WguiColor> = None;
+	let mut sprite_color: Option<WguiColor> = None;
 	let mut border = 2.0;
 	let mut border_color: Option<WguiColor> = None;
 	let mut hover_color: Option<WguiColor> = None;
@@ -63,6 +64,9 @@ pub fn parse_component_button<'a>(
 			"color" => {
 				parse_color_opt(ctx, tag_name, key, value, &mut color);
 			}
+			"sprite_color" => {
+				parse_color_opt(ctx, tag_name, key, value, &mut sprite_color);
+			}
 			"border" => {
 				ctx.parse_check_f32(tag_name, key, value, &mut border);
 			}
@@ -98,6 +102,7 @@ pub fn parse_component_button<'a>(
 	let (widget, button) = button::construct(
 		&mut ctx.get_construct_essentials(parent_id),
 		button::Params {
+			sprite_color,
 			color,
 			border,
 			border_color,
diff --git a/wgui/src/parser/style.rs b/wgui/src/parser/style.rs
index cce5cf89..ef85b226 100644
--- a/wgui/src/parser/style.rs
+++ b/wgui/src/parser/style.rs
@@ -4,7 +4,7 @@ use taffy::{
 };
 
 use crate::{
-	color::WguiColor,
+	color::{WguiColor, WguiColorName},
 	drawing,
 	parser::{AttribPair, ParserContext, is_percent, parse_f32},
 	renderer_vk::text::{FontWeight, HorizontalAlign, TextStyle},
@@ -61,12 +61,14 @@ pub fn parse_color_opt(
 }
 
 pub fn parse_text_style(ctx: &ParserContext<'_>, attribs: &[AttribPair], tag_name: &str, prefix: &str) -> TextStyle {
-	let mut style = TextStyle::default();
+	let mut style = TextStyle {
+		color: Some(WguiColorName::OnBackground.into()),
+		..Default::default()
+	};
 
 	for pair in attribs {
 		let (key, value) = (pair.attrib.as_ref(), pair.value.as_ref());
-		if key.starts_with(prefix) {
-			let suffix = &key[prefix.len()..];
+		if let Some(suffix) = key.strip_prefix(prefix) {
 			match suffix {
 				"color" => {
 					parse_color_opt(ctx, tag_name, key, value, &mut style.color);