diff --git a/mixins/Input.pixy b/mixins/Input.pixy
index 38e8b99e..10d63e39 100644
--- a/mixins/Input.pixy
+++ b/mixins/Input.pixy
@@ -63,4 +63,13 @@ component InputTags(id string, value []string, label string, tooltip string)
 				RawIcon("plus")
 		
 		p!= tooltip
-			
\ No newline at end of file
+
+component InputColor(id string, variable string, label string)
+	.widget-section
+		label(for=id)= label
+
+		.color-picker-container
+			.widget-ui-element.color-picker.color-box.action(data-color="var(--" + variable + ")", data-variable=variable, data-action="pickColor", data-trigger="click")
+
+			button.tip(aria-label="Reset", disabled)
+				RawIcon("power-off")
diff --git a/pages/settings/style.pixy b/pages/settings/style.pixy
index c48bcca4..f34454a4 100644
--- a/pages/settings/style.pixy
+++ b/pages/settings/style.pixy
@@ -30,21 +30,8 @@ component SettingsStyle(user *arn.User)
 				h3.widget-title
 					Icon("paint-brush")
 					span= stringutils.Capitalize(user.Settings().Theme)
-				
-				.widget-section
-					label(for="LinkColor")= "Link color:"
 
-					.color-picker-container
-						.widget-ui-element.color-picker.color-box.action(data-color="var(--link-color)", data-variable="link-color", data-action="pickColor", data-trigger="click")
-
-						button.tip(aria-label="Reset", disabled)
-							RawIcon("power-off")
-
-				.widget-section
-					label(for="BackgroundColor")= "Background color:"
-
-					.color-picker-container
-						.widget-ui-element.color-picker.color-box.action(data-color="var(--bg-color)", data-variable="bg-color", data-action="pickColor", data-trigger="click")
-
-						button.tip(aria-label="Reset", disabled)
-							RawIcon("power-off")
\ No newline at end of file
+				InputColor("TextColor", "text-color", "Text color:")
+				InputColor("LinkColor", "link-color", "Link color:")
+				InputColor("UIBackground", "ui-background", "UI background:")
+				InputColor("BackgroundColor", "bg-color", "Background color:")