diff --git a/src/Classes/ButtonControl.lua b/src/Classes/ButtonControl.lua
index a37c6fc65..abada9797 100644
--- a/src/Classes/ButtonControl.lua
+++ b/src/Classes/ButtonControl.lua
@@ -40,40 +40,48 @@ function ButtonClass:Draw(viewPort, noTooltip)
 	local enabled = self:IsEnabled()
 	local mOver = self:IsMouseOver()
 	local locked = self:GetProperty("locked")
+	-- Button-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
-	elseif mOver or locked then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('button_border_disabled')
+	elseif mOver then
+		SetDrawStyle('button_border_hover')
+	elseif locked then
+		SetDrawStyle('button_border_toggled')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('button_border')
 	end
 	DrawImage(nil, x, y, width, height)
+	-- Button-Fill
 	if not enabled then
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('button_background_disabled')
 	elseif self.clicked and mOver then
-		SetDrawColor(0.5, 0.5, 0.5)
-	elseif mOver or locked then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('button_background_clicked')
+	elseif locked then
+		SetDrawStyle('button_background_toggled')
+	elseif mOver then
+		SetDrawStyle('button_background_hover')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('button_background')
 	end
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
+	-- Button-Image
 	if self.image then
 		if enabled then
-			SetDrawColor(1, 1, 1)
+			SetDrawStyle('button_image')
 		else
-			SetDrawColor(0.33, 0.33, 0.33)
+			SetDrawStyle('button_image_disabled')
 		end
 		DrawImage(self.image, x + 2, y + 2, width - 4, height - 4)
 		if self.clicked and mOver then
-			SetDrawColor(1, 1, 1, 0.5)
+			SetDrawStyle('button_image_overlay_clicked')
 			DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 		end
 	end
+	-- Button-Text
 	if enabled then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('text_button')
 	else
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('text_button_disabled')
 	end
 	local label = self:GetProperty("label")
 	if label == "+" then
@@ -86,7 +94,7 @@ function ButtonClass:Draw(viewPort, noTooltip)
 		DrawImageQuad(nil, x + width * 0.7, y + height * 0.2, x + width * 0.8, y + height * 0.3, x + width * 0.3, y + height * 0.8, x + width * 0.2, y + height * 0.7)
 	else
 		local overSize = self.overSizeText or 0
-		DrawString(x + width / 2, y + 2 - overSize, "CENTER_X", height - 4 + overSize * 2, "VAR", label)
+		StyledDrawString(x + width / 2, y + 2 - overSize, "CENTER_X", height - 4 + overSize * 2, 'text_button', label)
 	end
 	if mOver then
 		if not noTooltip or self.forceTooltip then
diff --git a/src/Classes/CalcBreakdownControl.lua b/src/Classes/CalcBreakdownControl.lua
index fb92742ff..dfa3e94c0 100644
--- a/src/Classes/CalcBreakdownControl.lua
+++ b/src/Classes/CalcBreakdownControl.lua
@@ -72,9 +72,9 @@ function CalcBreakdownClass:SetBreakdownData(displayData, pinned)
 			for _, line in ipairs(section.lines) do
 				local _, num = string.gsub(line, "%d%d%d%d", "") -- count how many commas will be added
 				if main.showThousandsSeparators and num > 0 then
-					section.width = m_max(section.width, DrawStringWidth(section.textSize, "VAR", line) + 8 + (4 * num))
+					section.width = m_max(section.width, StyledDrawStringWidth(section.textSize, 'text_calc_breakdown', line) + 8 + (4 * num))
 				else
-					section.width = m_max(section.width, DrawStringWidth(section.textSize, "VAR", line) + 8)
+					section.width = m_max(section.width, StyledDrawStringWidth(section.textSize, 'text_calc_breakdown', line) + 8)
 				end
 			end
 			section.height = #section.lines * section.textSize + 4
@@ -86,9 +86,9 @@ function CalcBreakdownClass:SetBreakdownData(displayData, pinned)
 					if row[col.key] then
 						local _, num = string.gsub(row[col.key], "%d%d%d%d", "") -- count how many commas will be added
 						if main.showThousandsSeparators and num > 0 then
-							col.width = m_max(col.width or 0, DrawStringWidth(16, "VAR", col.label) + 6, DrawStringWidth(12, "VAR", row[col.key]) + 6 + (4 * num))
+							col.width = m_max(col.width or 0, StyledDrawStringWidth(16, 'text_calc_breakdown', col.label) + 6, StyledDrawStringWidth(12, 'text_calc_breakdown', row[col.key]) + 6 + (4 * num))
 						else 
-							col.width = m_max(col.width or 0, DrawStringWidth(16, "VAR", col.label) + 6, DrawStringWidth(12, "VAR", row[col.key]) + 6)
+							col.width = m_max(col.width or 0, StyledDrawStringWidth(16, 'text_calc_breakdown', col.label) + 6, StyledDrawStringWidth(12, 'text_calc_breakdown', row[col.key]) + 6)
 						end
 					end
 				end
@@ -98,11 +98,11 @@ function CalcBreakdownClass:SetBreakdownData(displayData, pinned)
 			end
 			section.height = #section.rowList * 14 + 20
 			if section.label then
-				self.contentWidth = m_max(self.contentWidth, 6 + DrawStringWidth(16, "VAR", section.label..":"))
+				self.contentWidth = m_max(self.contentWidth, 6 + StyledDrawStringWidth(16, 'text_calc_breakdown', section.label..":"))
 				section.height = section.height + 16
 			end
 			if section.footer then
-				self.contentWidth = m_max(self.contentWidth, 6 + DrawStringWidth(12, "VAR", section.footer))
+				self.contentWidth = m_max(self.contentWidth, 6 + StyledDrawStringWidth(12, 'text_calc_breakdown', section.footer))
 				local _, lines = string.gsub(section.footer, "\n", "\n") -- counts newlines in the string
 				section.height = section.height + 12 * (lines + 1)
 			end
@@ -548,7 +548,7 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
 	local cursorX, cursorY = GetCursorPos()
 	if section.label then
 		-- Draw table label if able
-		DrawString(x + 2, y, "LEFT", 16, "VAR", "^7"..section.label..":")
+		StyledDrawString(x + 2, y, "LEFT", 16, 'text_calc_breakdown', "^7"..section.label..":")
 		y = y + 16
 	end
 	local colX = x + 4
@@ -562,7 +562,7 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
 				DrawImage(nil, colX - 2, y, 1, section.height - (section.label and 16 or 0) - (section.footer and 12 or 0))
 			end
 			SetDrawColor(1, 1, 1)
-			DrawString(colX, y + 2, "LEFT", 16, "VAR", col.label)
+			StyledDrawString(colX, y + 2, "LEFT", 16, 'text_calc_breakdown', col.label)
 			colX = colX + col.width
 		end
 	end
@@ -578,18 +578,18 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
 				local _, notes = string.gsub(row[col.key], " to ", " ") -- counts " to " in the string
 				local _, paren = string.gsub(row[col.key], "%b()", " ") -- counts parenthesis in the string
 				if (alpha == 0 or notes > 0 or paren > 0) and col.right then
-					DrawString(col.x + col.width - 4, rowY + 1, "RIGHT_X", 12, "VAR", "^7"..formatNumSep(tostring(row[col.key])))
+					StyledDrawString(col.x + col.width - 4, rowY + 1, "RIGHT_X", 12, 'text_calc_breakdown', "^7"..formatNumSep(tostring(row[col.key])))
 				elseif (alpha == 0 or notes > 0 or paren > 0) then
-					DrawString(col.x, rowY + 1, "LEFT", 12, "VAR", "^7"..formatNumSep(tostring(row[col.key])))
+					StyledDrawString(col.x, rowY + 1, "LEFT", 12, 'text_calc_breakdown', "^7"..formatNumSep(tostring(row[col.key])))
 				else
-					DrawString(col.x, rowY + 1, "LEFT", 12, "VAR", "^7"..tostring(row[col.key]))
+					StyledDrawString(col.x, rowY + 1, "LEFT", 12, 'text_calc_breakdown', "^7"..tostring(row[col.key]))
 				end
 				local ttFunc = row[col.key.."Tooltip"]
 				local ttNode = row[col.key.."Node"]
 				if (ttFunc or ttNode) and cursorY >= viewPort.y + 2 and cursorY < viewPort.y + viewPort.height - 2 and cursorX >= col.x and cursorY >= rowY and cursorX < col.x + col.width and cursorY < rowY + 14 then
 					-- Mouse is over the cell, draw highlighting lines and show the tooltip/node location
 					SetDrawLayer(nil, 15)
-					SetDrawColor(0, 1, 0)
+					SetDrawStyle('calc_breakdown_border_hover')
 					DrawImage(nil, col.x - 2, rowY - 1, col.width, 1)
 					DrawImage(nil, col.x - 2, rowY + 13, col.width, 1)
 					if ttFunc then
@@ -624,7 +624,7 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
 	end
 	if section.footer then
 		-- Draw table footer if able
-		DrawString(x + 2, rowY, "LEFT", 12, "VAR", "^7"..section.footer)
+		StyledDrawString(x + 2, rowY, "LEFT", 12, 'text_calc_breakdown', "^7"..section.footer)
 	end
 end
 
@@ -694,9 +694,9 @@ function CalcBreakdownClass:Draw(viewPort)
 	-- Draw border (this is put in sub layer 11 so it draws over the contents, in case they don't fit the screen)
 	SetDrawLayer(nil, 11)
 	if self.pinned then
-		SetDrawColor(0.25, 1, 0.25)
+		SetDrawStyle('calc_breakdown_tooltip_border_pinned')
 	else
-		SetDrawColor(0.33, 0.66, 0.33)
+		SetDrawStyle('calc_breakdown_tooltip_border')
 	end
 	DrawImage(nil, x, y, width, 2)
 	DrawImage(nil, x, y + height - 2, width, 2)
@@ -713,7 +713,7 @@ function CalcBreakdownClass:Draw(viewPort)
 			for i, line in ipairs(section.lines) do
 				SetDrawColor(1, 1, 1)
 				local _, dec = string.gsub(line, "%.%d%d.", " ") -- counts decimals with 2 or more digits
-				DrawString(x + 4, lineY, "LEFT", section.textSize, "VAR", formatNumSep(line))
+				StyledDrawString(x + 4, lineY, "LEFT", section.textSize, 'text_calc_breakdown', formatNumSep(line))
 				lineY = lineY + section.textSize
 			end
 		elseif section.type == "TABLE" then
diff --git a/src/Classes/CalcSectionControl.lua b/src/Classes/CalcSectionControl.lua
index aa57f4796..62fa56a54 100644
--- a/src/Classes/CalcSectionControl.lua
+++ b/src/Classes/CalcSectionControl.lua
@@ -225,7 +225,7 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
 	SetDrawLayer(nil, -10)
 	SetDrawColor(self.colour)
 	DrawImage(nil, x, y, width, height)
-	SetDrawColor(0.10, 0.10, 0.10)
+	SetDrawStyle('calc_section_background')
 	DrawImage(nil, x + 2, y + 2, width - 4, height - 4)
 	
 	local primary = true
@@ -237,16 +237,17 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
 		SetDrawColor(0.10, 0.10, 0.10)
 		-- Draw label
 		if not self.enabled then
-			DrawString(x + 3, lineY + 3, "LEFT", 16, "VAR BOLD", "^8"..subSec.label)
+			SetDrawStyle('text_calc_section_title_disabled')
+			StyledDrawString(x + 3, lineY + 3, "LEFT", 16, 'text_calc_section_title_disabled', subSec.label)
 		else
-			local textColor = "^7"
+			local textColor = GetStyleColor('text_calc_section_title')
 			if self.calcsTab:SearchMatch(subSec.label) then
 				textColor = colorCodes.HIGHLIGHT
 			end
-			DrawString(x + 3, lineY + 3, "LEFT", 16, "VAR BOLD", textColor..subSec.label..":")
+			StyledDrawString(x + 3, lineY + 3, "LEFT", 16, 'text_calc_section_title', textColor..subSec.label..":")
 			if subSec.data.extra then
-				local x = x + 3 + DrawStringWidth(16, "VAR BOLD", subSec.label) + 10
-				DrawString(x, lineY + 3, "LEFT", 16, "VAR", "^7"..formatCalcStr(subSec.data.extra, actor))
+				local x = x + 3 + StyledDrawStringWidth(16, 'text_calc_section_title', subSec.label) + 10
+				StyledDrawString(x, lineY + 3, "LEFT", 16, 'text_calc_section_title_value', GetStyleColor('text_calc_section_title_value')..formatCalcStr(subSec.data.extra, actor))
 			end
 		end
 		-- Draw line below label
@@ -269,17 +270,17 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
 			for _, rowData in ipairs(subSec.data) do
 				if rowData.enabled then
 					rows = rows + 1
-					local textColor = "^7"
+					local textColor = GetStyleColor('text_calc_section_label')
 					if rowData.color then
 						textColor = rowData.color
 					end
 					if rowData.label then
-						SetDrawColor(rowData.bgCol or "^0")
+						SetDrawColor(rowData.bgCol or GetStyleColor('calc_section_label_background'))
 						DrawImage(nil, x + 2, lineY + 2, 130, 18)
 						if self.calcsTab:SearchMatch(rowData.label) then
 							textColor = colorCodes.HIGHLIGHT
 						end
-						DrawString(x + 132, lineY + 2, "RIGHT_X", 16, "VAR", textColor..rowData.label..":")
+						StyledDrawString(x + 132, lineY + 2, "RIGHT_X", 16, 'text_calc_section_label', textColor..rowData.label..":")
 					end
 					for colour, colData in ipairs(rowData) do
 						-- Draw column separator at the left end of the cell
@@ -291,17 +292,17 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
 							end
 							if self.calcsTab.displayData == colData then
 								-- This is the display stat, draw a green border around this cell
-								SetDrawColor(0.25, 1, 0.25)
+								SetDrawStyle('calc_breakdown_border_hover')
 								DrawImage(nil, colData.x + 2, colData.y, colData.width - 2, colData.height)
-								SetDrawColor(rowData.bgCol or "^0")
+								SetDrawColor(rowData.bgCol or GetStyleColor('calc_section_value_background_hover'))
 								DrawImage(nil, colData.x + 3, colData.y + 1, colData.width - 4, colData.height - 2)
 							else
-								SetDrawColor(rowData.bgCol or "^0")
+								SetDrawColor(rowData.bgCol or GetStyleColor('calc_section_value_background'))
 								DrawImage(nil, colData.x + 2, colData.y, colData.width - 2, colData.height)
 							end
 							local textSize = rowData.textSize or 14
 							SetViewport(colData.x + 3, colData.y, colData.width - 4, colData.height)
-							DrawString(1, 9 - textSize/2, "LEFT", textSize, "VAR", "^7"..formatCalcStr(colData.format, actor, colData))
+							StyledDrawString(1, 9 - textSize/2, "LEFT", textSize, 'text_calc_section_value', GetStyleColor('text_calc_section_value')..formatCalcStr(colData.format, actor, colData))
 							SetViewport()
 						end
 					end
diff --git a/src/Classes/CheckBoxControl.lua b/src/Classes/CheckBoxControl.lua
index 164839942..40576986b 100644
--- a/src/Classes/CheckBoxControl.lua
+++ b/src/Classes/CheckBoxControl.lua
@@ -8,7 +8,7 @@ local CheckBoxClass = newClass("CheckBoxControl", "Control", "TooltipHost", func
 	self.Control(anchor, rect)
 	self.TooltipHost(tooltipText)
 	self.label = label
-	self.labelWidth = DrawStringWidth(self.width - 4, "VAR", label or "") + 5
+	self.labelWidth = StyledDrawStringWidth(self.width - 4, 'text_label', label or "") + 5
 	self.changeFunc = changeFunc
 	self.state = initialState
 	self.checkImage = nil
@@ -36,62 +36,66 @@ function CheckBoxClass:Draw(viewPort, noTooltip)
 	local size = self.width
 	local enabled = self:IsEnabled()
 	local mOver = self:IsMouseOver()
+	-- Checkbox-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('checkbox_border_disabled')
 	elseif mOver then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('checkbox_border_hover')
 	elseif self.borderFunc then
-		local r, g, b = self.borderFunc()
-		SetDrawColor(r, g, b)
+		SetDrawStyle('checkbox'..self.borderFunc())
 	elseif self.checkImage and self.state then
-		SetDrawColor(0.75, 0.75, 0.75)
+		-- TODO: why different border when using image instead of checkmark?
+		SetDrawStyle('checkbox_border_toggled')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('checkbox_border')
 	end
 	DrawImage(nil, x, y, size, size)
+	-- Checkbox-Fill
 	if not enabled then
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('checkbox_background_disabled')
 	elseif self.clicked and mOver then
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('checkbox_background_clicked')
 	elseif mOver then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('checkbox_background_hover')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('checkbox_background')
 	end
 	DrawImage(nil, x + 1, y + 1, size - 2, size - 2)
+	-- Checkbox-Checkmark
 	if self.checkImage then
 		if self.state then
 			if not enabled then
-				SetDrawColor(0.33, 0.33, 0.33)
+				SetDrawStyle('checkbox_checkimage_disabled')
 			elseif mOver then
-				SetDrawColor(2, 2, 2)
+				SetDrawStyle('checkbox_checkimage_hover')
 			else
-				SetDrawColor(1, 1, 1)
+				SetDrawStyle('checkbox_checkimage_toggled')
 			end
 		else
-			SetDrawColor(0.5, 0.5, 0.5)
+			SetDrawStyle('checkbox_checkimage')
 		end
 		DrawImage(self.checkImage.handle, x + 1, y + 1, size - 2, size - 2, self.checkImage[1])
 	else
 		if self.state then
 			if not enabled then
-				SetDrawColor(0.33, 0.33, 0.33)
+				SetDrawStyle('checkbox_checkmark_disabled')
 			elseif mOver then
-				SetDrawColor(1, 1, 1)
+				SetDrawStyle('checkbox_checkmark_hover')
 			else
-				SetDrawColor(0.75, 0.75, 0.75)
+				SetDrawStyle('checkbox_checkmark')
 			end
 			main:DrawCheckMark(x + size/2, y + size/2, size * 0.8)
 		end
 	end
+	-- Checkbox-Label-Text
 	if enabled then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('text_label')
 	else
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('text_disabled')
 	end
 	local label = self:GetProperty("label")
 	if label then
-		DrawString(x - 5, y + 2, "RIGHT_X", size - 4, "VAR", label)
+		StyledDrawString(x - 5, y + 2, "RIGHT_X", size - 4, 'text_label', label)
 	end
 	if mOver and not noTooltip then
 		SetDrawLayer(nil, 100)
diff --git a/src/Classes/ConfigTab.lua b/src/Classes/ConfigTab.lua
index cad8e65fc..a6dc4349b 100644
--- a/src/Classes/ConfigTab.lua
+++ b/src/Classes/ConfigTab.lua
@@ -47,7 +47,7 @@ local ConfigTabClass = newClass("ConfigTab", "UndoHandler", "ControlHost", "Cont
 	self.controls.setSelect.enabled = function()
 		return #self.configSetOrderList > 1
 	end
-	self.controls.setLabel = new("LabelControl", { "RIGHT", self.controls.setSelect, "LEFT" }, { -2, 0, 0, 16 }, "^7Config set:")
+	self.controls.setLabel = new("LabelControl", { "RIGHT", self.controls.setSelect, "LEFT" }, { -2, 0, 0, 16 }, "Config set:")
 	self.controls.setManage = new("ButtonControl", { "LEFT", self.controls.setSelect, "RIGHT" }, { 4, 0, 90, 20 }, "Manage...", function()
 		self:OpenConfigSetManagePopup()
 	end)
@@ -548,7 +548,7 @@ local ConfigTabClass = newClass("ConfigTab", "UndoHandler", "ControlHost", "Cont
 			end
 			local labelControl = control
 			if varData.label and varData.type ~= "check" then
-				labelControl = new("LabelControl", {"RIGHT",control,"LEFT"}, {-4, 0, 0, DrawStringWidth(14, "VAR", varData.label) > 228 and 12 or 14}, "^7"..varData.label)
+				labelControl = new("LabelControl", {"RIGHT",control,"LEFT"}, {-4, 0, 0, StyledDrawStringWidth(14, 'text_label', varData.label) > 228 and 12 or 14}, varData.label)
 				t_insert(self.controls, labelControl)
 			end
 			if varData.var then
@@ -582,11 +582,14 @@ local ConfigTabClass = newClass("ConfigTab", "UndoHandler", "ControlHost", "Cont
 					local def = self:GetDefaultState(varData.var, type(cur))
 					if cur ~= nil and cur ~= def then
 						if not shown then
-							return 	0.753, 0.502, 0.502
+							-- highlight changed but empty?
+							return '_border_highlight_negative'
 						end
-						return 	0.451, 0.576, 0.702
+						-- highlight changed
+						return '_border_highlight'
 					end
-					return 0.5, 0.5, 0.5
+					-- no highlight 
+					return '_border'
 				end
 			end
 
diff --git a/src/Classes/DraggerControl.lua b/src/Classes/DraggerControl.lua
index de331cbb0..d559095a7 100644
--- a/src/Classes/DraggerControl.lua
+++ b/src/Classes/DraggerControl.lua
@@ -38,43 +38,50 @@ function DraggerClass:Draw(viewPort, noTooltip)
 	local enabled = self:IsEnabled()
 	local mOver = self:IsMouseOver()
 	local locked = self:GetProperty("locked")
-
+	-- Dragger-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('dragger_border_disabled')
+	elseif self.dragging then
+		SetDrawStyle('dragger_border_dragged')
 	elseif mOver or locked then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('dragger_border_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('dragger_border')
 	end
 	DrawImage(nil, x, y, width, height)
+	-- Dragger-Fill
 	if not enabled then
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('dragger_background_disabled')
 	elseif self.clicked and mOver then
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('dragger_background_dragged')
 	elseif mOver or locked then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('dragger_background_hover')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('dragger_background')
 	end
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
+	-- Dragger-Image
 	if self.image then
 		if enabled then
-			SetDrawColor(1, 1, 1)
+			SetDrawStyle('dragger_knobimage')
 		else
-			SetDrawColor(0.33, 0.33, 0.33)
+			SetDrawStyle('dragger_knobimage_disabled')
 		end
 		DrawImage(self.image, x + 2, y + 2, width - 4, height - 4)
 		if self.clicked and mOver then
-			SetDrawColor(1, 1, 1, 0.5)
+			SetDrawStyle('dragger_knobimage_overlay_dragged')
 			DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 		end
 	end
+	-- Dragger-Knob
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
-	elseif mOver or locked or self.dragging then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('dragger_knob_disabled')
+	elseif self.dragging then
+		SetDrawStyle('dragger_knob_dragged')
+	elseif mOver or locked then
+		SetDrawStyle('dragger_knob_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('dragger_knob')
 	end
 	local label = self:GetProperty("label")
 	if label == "+" then
@@ -90,7 +97,7 @@ function DraggerClass:Draw(viewPort, noTooltip)
 		DrawImageQuad(nil,  x + width * 0.75, y + height * 0.5, x + width * 0.85, y + height * 0.6, x + width * 0.6, y + height * 0.85, x + width * 0.5, y + height * 0.75)
 	else
 		local overSize = self.overSizeText or 0
-		DrawString(x + width / 2, y + 2 - overSize, "CENTER_X", height - 4 + overSize * 2, "VAR", label)
+		StyledDrawString(x + width / 2, y + 2 - overSize, "CENTER_X", height - 4 + overSize * 2, 'text_label', label)
 	end
 	if mOver then
 		if not noTooltip or self.forceTooltip then
diff --git a/src/Classes/DropDownControl.lua b/src/Classes/DropDownControl.lua
index 008783f3d..657d2aba0 100644
--- a/src/Classes/DropDownControl.lua
+++ b/src/Classes/DropDownControl.lua
@@ -110,19 +110,20 @@ function DropDownClass:DrawSearchHighlights(label, searchInfo, x, y, width, heig
 		local startX = 0
 		local endX = 0
 		local last = 0
-		SetDrawColor(1, 1, 0, 0.2)
+		SetDrawStyle('search_text_highlight_overlay')
 		for _, range in ipairs(searchInfo.ranges) do
 			if range.from - last - 1 > 0 then
-				startX = DrawStringWidth(height, "VAR", label:sub(last + 1, range.from - 1)) + x + endX
+				startX = StyledDrawStringWidth(height, 'text_dropdown', label:sub(last + 1, range.from - 1)) + x + endX
 			else
 				startX = endX
 			end
-			endX = DrawStringWidth(height, "VAR", label:sub(range.from, range.to)) + x + startX
+			endX = StyledDrawStringWidth(height, 'text_dropdown', label:sub(range.from, range.to)) + x + startX
 			last = range.to
 
 			DrawImage(nil, startX, y, endX - startX, height)
 		end
-		SetDrawColor(1, 1, 1)
+		-- is this supposed to prevent further coloring/highlighting of text?
+		SetDrawStyle('text_dropdown')
 	end
 end
 
@@ -243,15 +244,17 @@ function DropDownClass:Draw(viewPort, noTooltip)
 	local dropExtra = self.dropHeight + 4
 	scrollBar:SetContentDimension(lineHeight * self:GetDropCount(), self.dropHeight)
 	local dropY = self.dropUp and y - dropExtra or y + height
+	-- DropDown-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
-	elseif mOver or self.dropped then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('dropdown_border_disabled')
+	elseif self.dropped then
+		SetDrawStyle('dropdown_border_toggled')
+	elseif mOver then
+		SetDrawStyle('dropdown_border_hover')
 	elseif self.borderFunc then
-		local r, g, b = self.borderFunc()
-		SetDrawColor(r, g, b)
+		SetDrawStyle('dropdown'..self.borderFunc())
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('dropdown_border')
 	end
 	DrawImage(nil, x, y, width, height)
 	if self.dropped then
@@ -259,29 +262,33 @@ function DropDownClass:Draw(viewPort, noTooltip)
 		DrawImage(nil, x, dropY, self.droppedWidth, dropExtra)
 		SetDrawLayer(nil, 0)
 	end
+	-- DropDown-Fill
 	if not enabled or self.dropped then
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('dropdown_background_disabled')
 	elseif mOver then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('dropdown_background_hover')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('dropdown_background')
 	end
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
+	-- DropDown-Arrow
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('dropdown_arrow_disabled')
 	elseif mOver or self.dropped then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('dropdown_arrow_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('dropdown_arrow')
 	end
 	main:DrawArrow(x + width - height/2, y + height/2, height/2, height/2, "DOWN")
 	if self.dropped then
+		-- DropDown-Drop-Fill
 		SetDrawLayer(nil, 5)
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('dropdown_background')
 		DrawImage(nil, x + 1, dropY + 1, self.droppedWidth - 2, dropExtra - 2)
 		SetDrawLayer(nil, 0)
 	end
 	if self.otherDragSource then
+		-- TODO: ?
 		SetDrawColor(0, 1, 0, 0.25)
 		DrawImage(nil, x, y, width, height)
 	end
@@ -297,14 +304,17 @@ function DropDownClass:Draw(viewPort, noTooltip)
 				mOver and "BODY" or "OUT", self.selIndex, self.list[self.selIndex])
 			SetDrawLayer(nil, 0)
 		end
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('text_dropdown')
 	else
-		SetDrawColor(0.66, 0.66, 0.66)
+		SetDrawStyle('text_dropdown_disabled')
 	end
 	-- draw selected label or search term
 	local selLabel = nil
 	local selDetail = nil
 	if self:IsSearchActive() then
+		if self.matchCount > 0 then
+			SetDrawStyle('text_dropdown')
+		end
 		selLabel = "Search: " .. self:GetSearchTermPretty()
 	else
 		local selItem = self.list[self.selIndex]
@@ -316,10 +326,10 @@ function DropDownClass:Draw(viewPort, noTooltip)
 		end
 	end
 	SetViewport(x + 2, y + 2, width - height, lineHeight)
-	DrawString(0, 0, "LEFT", lineHeight, "VAR", selLabel or "")
+	StyledDrawString(0, 0, "LEFT", lineHeight, 'text_dropdown', selLabel or "")
 	if selDetail ~= nil then
-		local dx = DrawStringWidth(lineHeight, "VAR", selDetail)
-		DrawString(width - dx - 22, 0, "LEFT", lineHeight, "VAR", selDetail)
+		local dx = StyledDrawStringWidth(lineHeight, 'text_dropdown', selDetail)
+		StyledDrawString(width - dx - 22, 0, "LEFT", lineHeight, 'text_dropdown', selDetail)
 	end
 	SetViewport()
 
@@ -357,14 +367,14 @@ function DropDownClass:Draw(viewPort, noTooltip)
 				local y = (dropIndex - 1) * lineHeight - scrollBar.offset
 				-- highlight background if hovered
 				if index == self.hoverSel then
-					SetDrawColor(0.33, 0.33, 0.33)
+					SetDrawStyle('dropdown_background_hover')
 					DrawImage(nil, 0, y, width - 4, lineHeight)
 				end
 				-- highlight font color if hovered or selected
 				if index == self.hoverSel or index == self.selIndex then
-					SetDrawColor(1, 1, 1)
+					SetDrawStyle('text_dropdown')
 				else
-					SetDrawColor(0.66, 0.66, 0.66)
+					SetDrawStyle('text_dropdown_lowered')
 				end
 				-- draw actual item label with search match highlight if available
 				local label = nil
@@ -375,18 +385,18 @@ function DropDownClass:Draw(viewPort, noTooltip)
 				else 
 					label = listVal
 				end
-				DrawString(0, y, "LEFT", lineHeight, "VAR", label)
+				StyledDrawString(0, y, "LEFT", lineHeight, 'text_dropdown', label)
 				if detail ~= nil then
 					local detail = listVal.detail
-					dx = DrawStringWidth(lineHeight, "VAR", detail)
-					DrawString(width - dx - 4 - 22, y, "LEFT", lineHeight, "VAR", detail)
+					dx = StyledDrawStringWidth(lineHeight, 'text_dropdown', detail)
+					StyledDrawString(width - dx - 4 - 22, y, "LEFT", lineHeight, 'text_dropdown', detail)
 				end
 				self:DrawSearchHighlights(label, searchInfo, 0, y, width - 4, lineHeight)
 			end
 		end
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('text_dropdown')
 		if self:IsSearchActive() and self:GetMatchCount() == 0 then
-			DrawString(0, 0 , "LEFT", lineHeight, "VAR", "<No matches>")
+			StyledDrawString(0, 0 , "LEFT", lineHeight, 'text_dropdown', "<No matches>")
 		end
 		SetViewport()
 		SetDrawLayer(nil, 0)
@@ -513,7 +523,7 @@ function DropDownClass:CheckDroppedWidth(enable)
 				line = line.label or ""
 			end
 			  -- +10 to stop clipping
-			dWidth = m_max(dWidth, DrawStringWidth(lineHeight, "VAR", line or "") + 10)
+			dWidth = m_max(dWidth, StyledDrawStringWidth(lineHeight, 'text_dropdown', line or "") + 10)
 		end
 		  -- no greater than self.maxDroppedWidth
 		self.droppedWidth = m_min(dWidth + scrollWidth, self.maxDroppedWidth)
@@ -524,7 +534,7 @@ function DropDownClass:CheckDroppedWidth(enable)
 			end
 			-- add 20 to account for the 'down arrow' in the box
 			local boxWidth
-			boxWidth = DrawStringWidth(lineHeight, "VAR", line or "") + 20
+			boxWidth = StyledDrawStringWidth(lineHeight, 'text_dropdown', line or "") + 20
 			self.width = m_max(m_min(boxWidth, 390), 190)
 		end
 		
diff --git a/src/Classes/EditControl.lua b/src/Classes/EditControl.lua
index bf1c2a0c8..ae0d52d35 100644
--- a/src/Classes/EditControl.lua
+++ b/src/Classes/EditControl.lua
@@ -49,12 +49,11 @@ local EditClass = newClass("EditControl", "ControlHost", "Control", "UndoHandler
 	self.changeFunc = changeFunc
 	self.lineHeight = lineHeight
 	self.defaultLineHeight = lineHeight
-	self.font = "VAR"
-	self.textCol = "^7"
-	self.inactiveCol = "^8"
-	self.disableCol = "^9"
-	self.selCol = "^0"
-	self.selBGCol = "^xBBBBBB"
+	self.font = GetStyleFont('text_textbox')
+	self.textCol = GetStyleColor('text_textbox')
+	self.selBGCol = 'selection_text_highlight_background'
+	self.selCol = GetStyleColor('text_textbox_selection') -- gets color code to prepend to strings (like ^xBBBBBB)
+
 	self.blinkStart = GetTime()
 	self.allowZoom = allowZoom
 	local function buttonSize()
@@ -114,7 +113,7 @@ function EditClass:SetProtected(bool)
 	self.protected = bool or true
 	-- set the font to be fixed to prevent strange
 	-- spacing
-	self.font = "FIXED"
+	self.font = GetStyleFont('text_protected')
 end
 
 function EditClass:IsMouseOver()
@@ -243,38 +242,48 @@ function EditClass:Draw(viewPort, noTooltip)
 	local width, height = self:GetSize()
 	local enabled = self:IsEnabled()
 	local mOver = self:IsMouseOver()
+	-- Editbox-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('textbox_border_disabled')
+	elseif self.hasFocus then
+		SetDrawStyle('textbox_border_selected')
 	elseif mOver then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('textbox_border_hover')
 	elseif self.borderFunc then
-		local r, g, b = self.borderFunc()
-		SetDrawColor(r, g, b)
+		SetDrawStyle('textbox'..self.borderFunc())
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('textbox_border')
 	end
 	DrawImage(nil, x, y, width, height)
+	-- Editbox-Fill
 	if not enabled then
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('textbox_background_disabled')
 	elseif self.hasFocus or mOver then
+		-- Why different Textbox-Fill color for multi-line vs single-line?
 		if self.lineHeight then
-			SetDrawColor(0.1, 0.1, 0.1)
+			-- multi-line Textboxes
+			-- SetDrawColor(0.1, 0.1, 0.1)
+			SetDrawStyle('textbox_background_selected')
 		else
-			SetDrawColor(0.15, 0.15, 0.15)
+			-- other Textboxes
+			-- SetDrawColor(0.15, 0.15, 0.15)
+			SetDrawStyle('textbox_background_selected')
 		end
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('textbox_background')
 	end
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 	local textX = x + 2
 	local textY = y + 2
 	local textHeight = self.lineHeight or (height - 4)
 	if self.prompt then
+		-- Textbox-Prompt
 		if not enabled then
-			DrawString(textX, textY, "LEFT", textHeight, self.font, self.disableCol..self.prompt)
+			SetDrawStyle('text_textbox_disabled')
 		else
-			DrawString(textX, textY, "LEFT", textHeight, self.font, self.textCol..self.prompt..":")
+			SetDrawStyle('text_textbox')
 		end
+		DrawString(textX, textY, "LEFT", textHeight, self.font, self.prompt..":")
 		textX = textX + DrawStringWidth(textHeight, self.font, self.prompt) + textHeight/2
 	end
 	if not enabled then
@@ -292,12 +301,15 @@ function EditClass:Draw(viewPort, noTooltip)
 	SetViewport(textX, textY, width - 4 - marginL - marginR, height - 4 - marginB)
 	if not self.hasFocus then
 		if self.buf == '' and self.placeholder then
-			SetDrawColor(self.disableCol)
+			-- Editbox-Placeholder
+			SetDrawStyle('text_textbox_placeholder')
 			DrawString(-self.controls.scrollBarH.offset, -self.controls.scrollBarV.offset, "LEFT", textHeight, self.font, self.placeholder)
 		else
-			SetDrawColor(self.inactiveCol)
+			-- Editbox-Input-Text
+			SetDrawStyle('text_textbox')
 			if self.inactiveText then
-				local inactiveText = type(inactiveText) == "string" and self.inactiveText or self.inactiveText(self.buf)
+				-- VERIFY: is "type(inactiveText)" meant to be "type(self.inactiveText)" ?
+				local inactiveText = type(self.inactiveText) == "string" and self.inactiveText or self.inactiveText(self.buf)
 				DrawString(-self.controls.scrollBarH.offset, -self.controls.scrollBarV.offset, "LEFT", textHeight, self.font, inactiveText)
 			elseif self.protected then
 				DrawString(-self.controls.scrollBarH.offset, -self.controls.scrollBarV.offset, "LEFT", textHeight, self.font, string.rep(protected_replace, #self.buf))
@@ -324,7 +336,7 @@ function EditClass:Draw(viewPort, noTooltip)
 		local left = m_min(self.caret, self.sel or self.caret)
 		local right = m_max(self.caret, self.sel or self.caret)
 		local caretX
-		SetDrawColor(self.textCol)
+		SetDrawStyle('text_textbox')
 		for s, line, e in (self.buf.."\n"):gmatch("()([^\n]*)\n()") do
 			textX = -self.controls.scrollBarH.offset
 			if left >= e or right <= s then
@@ -346,10 +358,10 @@ function EditClass:Draw(viewPort, noTooltip)
 					sel = sel .. "  "
 				end
 				local selWidth = DrawStringWidth(textHeight, self.font, sel)
-				SetDrawColor(self.selBGCol)
+				SetDrawStyle(self.selBGCol)
 				DrawImage(nil, textX, textY, selWidth, textHeight)
 				DrawString(textX, textY, "LEFT", textHeight, self.font, sel)
-				SetDrawColor(self.textCol)
+				SetDrawStyle('text_textbox')
 				textX = textX + selWidth
 			end
 			if right >= s and right < e and right == self.caret then
@@ -366,7 +378,7 @@ function EditClass:Draw(viewPort, noTooltip)
 		end
 		if caretX then
 			if (GetTime() - self.blinkStart) % 1000 < 500 then
-				SetDrawColor(self.textCol)
+				SetDrawStyle('text_textbox')
 				DrawImage(nil, caretX, caretY, 1, textHeight)
 			end
 		end
@@ -383,7 +395,7 @@ function EditClass:Draw(viewPort, noTooltip)
 		end
 		textX = textX + DrawStringWidth(textHeight, self.font, pre)
 		local selWidth = DrawStringWidth(textHeight, self.font, sel)
-		SetDrawColor(self.selBGCol)
+		SetDrawStyle(self.selBGCol)
 		DrawImage(nil, textX, textY, selWidth, textHeight)
 		if self.protected then
 			DrawString(textX, textY, "LEFT", textHeight, self.font, self.selCol .. string.rep(protected_replace, #sel-#self.selCol))
@@ -397,7 +409,7 @@ function EditClass:Draw(viewPort, noTooltip)
 		end
 		if (GetTime() - self.blinkStart) % 1000 < 500 then
 			local caretX = (self.caret > self.sel) and textX + selWidth or textX
-			SetDrawColor(self.textCol)
+			SetDrawStyle('text_textbox')
 			DrawImage(nil, caretX, textY, 1, textHeight)
 		end
 	else
@@ -415,7 +427,7 @@ function EditClass:Draw(viewPort, noTooltip)
 			DrawString(textX, textY, "LEFT", textHeight, self.font, post)
 		end
 		if (GetTime() - self.blinkStart) % 1000 < 500 then
-			SetDrawColor(self.textCol)
+			SetDrawStyle('text_textbox')
 			DrawImage(nil, textX, textY, 1, textHeight)
 		end
 	end
diff --git a/src/Classes/ItemListControl.lua b/src/Classes/ItemListControl.lua
index ac03df2b1..c27a764f2 100644
--- a/src/Classes/ItemListControl.lua
+++ b/src/Classes/ItemListControl.lua
@@ -9,8 +9,8 @@ local t_insert = table.insert
 local ItemListClass = newClass("ItemListControl", "ListControl", function(self, anchor, rect, itemsTab, forceTooltip)
 	self.ListControl(anchor, rect, 16, "VERTICAL", true, itemsTab.itemOrderList, forceTooltip)
 	self.itemsTab = itemsTab
-	self.label = "^7All items:"
-	self.defaultText = "^x7F7F7FThis is the list of items that have been added to this build.\nYou can add items to this list by dragging them from\none of the other lists, or by clicking 'Add to build' when\nviewing an item."
+	self.label = "All items:"
+	self.defaultText = "This is the list of items that have been added to this build.\nYou can add items to this list by dragging them from\none of the other lists, or by clicking 'Add to build' when\nviewing an item."
 	self.dragTargetList = { }
 	self.controls.delete = new("ButtonControl", {"BOTTOMRIGHT",self,"TOPRIGHT"}, {0, -2, 60, 18}, "Delete", function()
 		self:OnSelDelete(self.selIndex, self.selValue)
diff --git a/src/Classes/ItemSlotControl.lua b/src/Classes/ItemSlotControl.lua
index 570648aa3..886868a3b 100644
--- a/src/Classes/ItemSlotControl.lua
+++ b/src/Classes/ItemSlotControl.lua
@@ -135,7 +135,8 @@ end
 function ItemSlotClass:Draw(viewPort)
 	local x, y = self:GetPos()
 	local width, height = self:GetSize()
-	DrawString(x + self.labelOffset, y + 2, "RIGHT_X", height - 4, "VAR", "^7"..self.label..":")
+	SetDrawStyle('text_label')
+	StyledDrawString(x + self.labelOffset, y + 2, "RIGHT_X", height - 4, 'text_label', self.label..":")
 	self.DropDownControl:Draw(viewPort)
 	self:DrawControls(viewPort)
 	if not main.popups[1] and self.nodeId and (self.dropped or (self:IsMouseOver() and (self.otherDragSource or not self.itemsTab.selControl))) then
@@ -147,6 +148,7 @@ function ItemSlotClass:Draw(viewPort)
 			viewerY = m_min(y - 300 - 5, viewPort.y + viewPort.height - 304)
 		end
 		local viewerX = x
+		-- TODO: ?
 		SetDrawColor(1, 1, 1)
 		DrawImage(nil, viewerX, viewerY, 304, 304)
 		local viewer = self.itemsTab.socketViewer
@@ -158,6 +160,7 @@ function ItemSlotClass:Draw(viewPort)
 		SetViewport(viewerX + 2, viewerY + 2, 300, 300)
 		viewer:Draw(self.itemsTab.build, { x = 0, y = 0, width = 300, height = 300 }, { })
 		SetDrawLayer(nil, 30)
+		-- TODO: ?
 		SetDrawColor(1, 1, 1, 0.2)
 		DrawImage(nil, 149, 0, 2, 300)
 		DrawImage(nil, 0, 149, 300, 2)
diff --git a/src/Classes/ItemsTab.lua b/src/Classes/ItemsTab.lua
index 94fc278c0..4b9f0966f 100644
--- a/src/Classes/ItemsTab.lua
+++ b/src/Classes/ItemsTab.lua
@@ -164,7 +164,7 @@ local ItemsTabClass = newClass("ItemsTab", "UndoHandler", "ControlHost", "Contro
 			self:AddItemSetTooltip(tooltip, self.itemSets[self.itemSetOrderList[index]])
 		end
 	end
-	self.controls.setLabel = new("LabelControl", {"RIGHT",self.controls.setSelect,"LEFT"}, {-2, 0, 0, 16}, "^7Item set:")
+	self.controls.setLabel = new("LabelControl", {"RIGHT",self.controls.setSelect,"LEFT"}, {-2, 0, 0, 16}, "Item set:")
 	self.controls.setManage = new("ButtonControl", {"LEFT",self.controls.setSelect,"RIGHT"}, {4, 0, 90, 20}, "Manage...", function()
 		self:OpenItemSetManagePopup()
 	end)
@@ -257,7 +257,7 @@ local ItemsTabClass = newClass("ItemsTab", "UndoHandler", "ControlHost", "Contro
 	self.controls.specButton = new("ButtonControl", {"LEFT",prevSlot,"RIGHT"}, {4, 0, 90, 20}, "Manage...", function()
 		self.build.treeTab:OpenSpecManagePopup()
 	end)
-	self.controls.specLabel = new("LabelControl", {"RIGHT",prevSlot,"LEFT"}, {-2, 0, 0, 16}, "^7Passive tree:")
+	self.controls.specLabel = new("LabelControl", {"RIGHT",prevSlot,"LEFT"}, {-2, 0, 0, 16}, "Passive tree:")
 
 	self.sockets = { }
 	local socketOrder = { }
@@ -274,7 +274,7 @@ local ItemsTabClass = newClass("ItemsTab", "UndoHandler", "ControlHost", "Contro
 		self.sockets[node.id] = socketControl
 		addSlot(socketControl)
 	end
-	self.controls.slotHeader = new("LabelControl", {"BOTTOMLEFT",self.slotAnchor,"TOPLEFT"}, {0, -4, 0, 16}, "^7Equipped items:")
+	self.controls.slotHeader = new("LabelControl", {"BOTTOMLEFT",self.slotAnchor,"TOPLEFT"}, {0, -4, 0, 16}, "Equipped items:")
 	self.controls.weaponSwap1 = new("ButtonControl", {"BOTTOMRIGHT",self.slotAnchor,"TOPRIGHT"}, {-20, -2, 18, 18}, "I", function()
 		if self.activeItemSet.useSecondWeaponSet then
 			self.activeItemSet.useSecondWeaponSet = false
@@ -315,7 +315,7 @@ local ItemsTabClass = newClass("ItemsTab", "UndoHandler", "ControlHost", "Contro
 	self.controls.weaponSwap2.locked = function()
 		return self.activeItemSet.useSecondWeaponSet
 	end
-	self.controls.weaponSwapLabel = new("LabelControl", {"RIGHT",self.controls.weaponSwap1,"LEFT"}, {-4, 0, 0, 14}, "^7Weapon Set:")
+	self.controls.weaponSwapLabel = new("LabelControl", {"RIGHT",self.controls.weaponSwap1,"LEFT"}, {-4, 0, 0, 14}, "Weapon Set:")
 
 	-- All items list
 	if main.portraitMode then
@@ -557,7 +557,7 @@ holding Shift will put it in the second.]])
 	self.controls.displayItemSectionQuality = new("Control", {"TOPLEFT",self.controls.displayItemSectionEnchant,"BOTTOMLEFT"}, {0, 0, 0, function()
 		return (self.controls.displayItemQuality:IsShown() and self.controls.displayItemQualityEdit:IsShown()) and 28 or 0
 	end})
-	self.controls.displayItemQuality = new("LabelControl", {"TOPLEFT",self.controls.displayItemSectionQuality,"TOPRIGHT"}, {-4, 0, 0, 16}, "^7Quality:")
+	self.controls.displayItemQuality = new("LabelControl", {"TOPLEFT",self.controls.displayItemSectionQuality,"TOPRIGHT"}, {-4, 0, 0, 16}, "Quality:")
 	self.controls.displayItemQuality.shown = function()
 		return self.displayItem and self.displayItem.quality and self.displayItem.base.quality
 	end
@@ -695,7 +695,7 @@ holding Shift will put it in the second.]])
 		end
 
 		self.controls["displayItemRune"..i] = drop
-		self.controls["displayItemRuneLabel"..i] = new("LabelControl", {"RIGHT",drop,"LEFT"}, {-4, 0, 0, 14}, "^7Rune #"..i)
+		self.controls["displayItemRuneLabel"..i] = new("LabelControl", {"RIGHT",drop,"LEFT"}, {-4, 0, 0, 14}, "Rune #"..i)
 	end
 
 	-- Section: Affix Selection
@@ -933,11 +933,11 @@ holding Shift will put it in the second.]])
 		drop.slider = slider
 		self.controls["displayItemAffix"..i] = drop
 		self.controls["displayItemAffixLabel"..i] = new("LabelControl", {"RIGHT",drop,"LEFT"}, {-4, 0, 0, 14}, function()
-			return drop.outputTable == "prefixes" and "^7Prefix:" or "^7Suffix:"
+			return drop.outputTable == "prefixes" and "Prefix:" or "Suffix:"
 		end)
 		self.controls["displayItemAffixRange"..i] = slider
 		self.controls["displayItemAffixRangeLabel"..i] = new("LabelControl", {"RIGHT",slider,"LEFT"}, {-4, 0, 0, 14}, function()
-			return drop.selIndex > 1 and "^7Roll:" or "^x7F7F7FRoll:"
+			return drop.selIndex > 1 and "Roll:" or "^x7F7F7FRoll:"
 		end)
 	end
 
@@ -2105,7 +2105,7 @@ function ItemsTabClass:UpdateCustomControls()
 				local line = itemLib.formatModLine(modLine)
 				if line then
 					if not self.controls["displayItemCustomModifierRemove"..i] then
-						self.controls["displayItemCustomModifierRemove"..i] = new("ButtonControl", {"TOPLEFT",self.controls.displayItemSectionCustom,"TOPLEFT"}, {0, i * 22 + 4, 70, 20}, "^7Remove")
+						self.controls["displayItemCustomModifierRemove"..i] = new("ButtonControl", {"TOPLEFT",self.controls.displayItemSectionCustom,"TOPLEFT"}, {0, i * 22 + 4, 70, 20}, "Remove")
 						self.controls["displayItemCustomModifier"..i] = new("LabelControl", {"LEFT",self.controls["displayItemCustomModifierRemove"..i],"RIGHT"}, {65, 0, 0, 16})
 						self.controls["displayItemCustomModifierLabel"..i] = new("LabelControl", {"LEFT",self.controls["displayItemCustomModifierRemove"..i],"RIGHT"}, {5, 0, 0, 16})
 					end
@@ -2878,7 +2878,7 @@ function ItemsTabClass:CorruptDisplayItem() -- todo implement vaal orb new outco
 	controls.rolls.shown = function ()
 		return self.displayItem.rarity == "UNIQUE" or self.displayItem.rarity == "RELIC"
 	end
-	controls.sourceLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 30, 0, 16}, "^7Source:")
+	controls.sourceLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 30, 0, 16}, "Source:")
 	controls.source = new("DropDownControl", {"TOPLEFT",nil,"TOPLEFT"}, {100, 30, 150, 18}, sourceList, function(index, value)
 		if value == "Corrupted" then
 			currentModType = "Corrupted"
@@ -2909,13 +2909,13 @@ function ItemsTabClass:CorruptDisplayItem() -- todo implement vaal orb new outco
 		if i == 1 then
 			controls.enchant1Label = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 55, 0, 16}, function()
 				if enchantNum == 1 then -- update label so 1 doesn't appear in case of 1 enchant.
-					return "^7Enchant:"
+					return "Enchant:"
 				else
-					return "^7Enchant #1:"
+					return "Enchant #1:"
 				end
 			end)
 		else
-			controls["enchant"..i.."Label"] = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 35 + i * 20 , 0, 16}, "^7Enchant #"..i..":")
+			controls["enchant"..i.."Label"] = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 35 + i * 20 , 0, 16}, "Enchant #"..i..":")
 		end
 		controls["enchant"..i] = new("DropDownControl", {"TOPLEFT",nil,"TOPLEFT"}, {100, 35 + i * 20, 440, 18}, nil, function()
 			rebuildEnchantControls()
@@ -3124,7 +3124,7 @@ function ItemsTabClass:AddCustomModifierToDisplayItem()
 		item:BuildAndParseRaw()
 		return item
 	end
-	controls.sourceLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 20, 0, 16}, "^7Source:")
+	controls.sourceLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 20, 0, 16}, "Source:")
 	controls.source = new("DropDownControl", {"TOPLEFT",nil,"TOPLEFT"}, {100, 20, 150, 18}, sourceList, function(index, value)
 		buildMods(value.sourceId)
 		controls.modSelect:SetSel(1)
@@ -3133,7 +3133,7 @@ function ItemsTabClass:AddCustomModifierToDisplayItem()
 		end
 	end)
 	controls.source.enabled = #sourceList > 1
-	controls.sortLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {350, 20, 0, 16}, "^7Sort by:")
+	controls.sortLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {350, 20, 0, 16}, "Sort by:")
 	controls.sortLabel.shown = function()
 		return sourceList[controls.source.selIndex].sourceId ~= "CUSTOM"
 	end
@@ -3143,7 +3143,7 @@ function ItemsTabClass:AddCustomModifierToDisplayItem()
 	controls.sort.shown = function()
 		return sourceList[controls.source.selIndex].sourceId ~= "CUSTOM"
 	end
-	controls.modSelectLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 45, 0, 16}, "^7Modifier:")
+	controls.modSelectLabel = new("LabelControl", {"TOPRIGHT",nil,"TOPLEFT"}, {95, 45, 0, 16}, "Modifier:")
 	controls.modSelect = new("DropDownControl", {"TOPLEFT",nil,"TOPLEFT"}, {100, 45, 600, 18}, modList)
 	controls.modSelect.shown = function()
 		return sourceList[controls.source.selIndex].sourceId ~= "CUSTOM"
diff --git a/src/Classes/LabelControl.lua b/src/Classes/LabelControl.lua
index 2f799ece2..3380aebe2 100644
--- a/src/Classes/LabelControl.lua
+++ b/src/Classes/LabelControl.lua
@@ -7,11 +7,12 @@ local LabelClass = newClass("LabelControl", "Control", function(self, anchor, re
 	self.Control(anchor, rect)
 	self.label = label
 	self.width = function()
-		return DrawStringWidth(self:GetProperty("height"), "VAR", self:GetProperty("label"))
+		return StyledDrawStringWidth(self:GetProperty("height"), 'text_label', self:GetProperty("label"))
 	end
 end)
 
 function LabelClass:Draw()
 	local x, y = self:GetPos()
-	DrawString(x, y, "LEFT", self:GetProperty("height"), "VAR", self:GetProperty("label"))
+	SetDrawStyle('text_label')
+	StyledDrawString(x, y, "LEFT", self:GetProperty("height"), 'text_label', self:GetProperty("label"))
 end
\ No newline at end of file
diff --git a/src/Classes/ListControl.lua b/src/Classes/ListControl.lua
index 34dd0e7f4..e52a6dea4 100644
--- a/src/Classes/ListControl.lua
+++ b/src/Classes/ListControl.lua
@@ -40,7 +40,7 @@ local ListClass = newClass("ListControl", "Control", "ControlHost", function(sel
 	self.forceTooltip = forceTooltip
 	self.colList = { { } }
 	self.tooltip = new("Tooltip")
-	self.font = "VAR"
+	self.font = "VAR" -- is this used by any inheriting class or can this be removed?
 	if self.scroll then
 		if self.scroll == "HORIZONTAL" then
 			self.scrollH = true
@@ -177,20 +177,25 @@ function ListClass:Draw(viewPort, noTooltip)
 
 	local label = self:GetProperty("label") 
 	if label then
-		DrawString(x + self.labelPositionOffset[1], y - 20 + self.labelPositionOffset[2], "LEFT", 16, self.font, label)
+		SetDrawStyle('text_label')
+		StyledDrawString(x + self.labelPositionOffset[1], y - 20 + self.labelPositionOffset[2], "LEFT", 16, 'text_label', label)
 	end
+	-- List-Border
 	if self.otherDragSource and not self.CanDragToValue then
-		SetDrawColor(0.2, 0.6, 0.2)
+		SetDrawStyle('list_border_drag_targeted')
 	elseif self.hasFocus then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('list_border_selected')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('list_border')
 	end
 	DrawImage(nil, x, y, width, height)
+	-- List-Fill
 	if self.otherDragSource and not self.CanDragToValue then
-		SetDrawColor(0, 0.05, 0)
+		SetDrawStyle('list_background_drag_targeted')
+	elseif self.hasFocus then
+		SetDrawStyle('list_background_selected')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('list_background')
 	end
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 	self:DrawControls(viewPort, (noTooltip and not self.forceTooltip) and self)
@@ -202,7 +207,7 @@ function ListClass:Draw(viewPort, noTooltip)
 	local minIndex = m_floor(scrollOffsetV / rowHeight + 1)
 	local maxIndex = m_min(m_floor((scrollOffsetV + height) / rowHeight + 1), #list)
 	for colIndex, column in ipairs(self.colList) do
-		local colFont = self:GetColumnProperty(column, "font") or "VAR"
+		local colFont = self:GetColumnProperty(column, "font") or GetStyleFont('text_list')
 		local clipWidth = DrawStringWidth(textHeight, colFont, "...")
 		colOffset = column._offset - scrollOffsetH
 		local colWidth = column._width
@@ -233,41 +238,51 @@ function ListClass:Draw(viewPort, noTooltip)
 			end
 			if self.showRowSeparators then
 				if self.hasFocus and value == self.selValue then
-					SetDrawColor(1, 1, 1)
+					SetDrawStyle('list_entry_border_focused')
 				elseif value == ttValue then
-					SetDrawColor(0.8, 0.8, 0.8)
+					SetDrawStyle('list_entry_border_hover')
 				else
-					SetDrawColor(0.5, 0.5, 0.5)
+					SetDrawStyle('list_entry_border_selected')
 				end
 				DrawImage(nil, colOffset, lineY, not self.scroll and colWidth - 4 or colWidth, rowHeight)
-				if (value == self.selValue or value == ttValue) then
-					SetDrawColor(0.33, 0.33, 0.33)
+				if self.hasFocus and value == self.selValue then
+					SetDrawStyle('list_entry_background_focused')
+				elseif value == ttValue then
+					SetDrawStyle('list_entry_background_hover')
+				elseif value == self.selValue then
+					SetDrawStyle('list_entry_background_selected')
 				elseif self.otherDragSource and self.CanDragToValue and self:CanDragToValue(index, value, self.otherDragSource) then
+					-- TODO: ?
 					SetDrawColor(0, 0.2, 0)
 				elseif index % 2 == 0 then
-					SetDrawColor(0.05, 0.05, 0.05)
+					SetDrawStyle('list_entry_background_even')
 				else
-					SetDrawColor(0, 0, 0)
+					SetDrawStyle('list_entry_background')
 				end
 				DrawImage(nil, colOffset, lineY + 1, not self.scroll and colWidth - 4 or colWidth, rowHeight - 2)
 			elseif value == self.selValue or value == ttValue then
 				if self.hasFocus and value == self.selValue then
-					SetDrawColor(1, 1, 1)
+					SetDrawStyle('list_entry_border_focused')
 				elseif value == ttValue then
-					SetDrawColor(0.8, 0.8, 0.8)
+					SetDrawStyle('list_entry_border_hover')
 				else
-					SetDrawColor(0.5, 0.5, 0.5)
+					SetDrawStyle('list_entry_border_selected')
 				end
 				DrawImage(nil, colOffset, lineY, not self.scroll and colWidth - 4 or colWidth, rowHeight)
 				if self.otherDragSource and self.CanDragToValue and self:CanDragToValue(index, value, self.otherDragSource) then
+					-- TODO: ?
 					SetDrawColor(0, 0.2, 0)
+				elseif self.hasFocus and value == self.selValue then
+					SetDrawStyle('list_entry_background_focused')
+				elseif value == ttValue then
+					SetDrawStyle('list_entry_background_hover')
 				else
-					SetDrawColor(0.15, 0.15, 0.15)
+					SetDrawStyle('list_entry_background_selected')
 				end
 				DrawImage(nil, colOffset, lineY + 1, not self.scroll and colWidth - 4 or colWidth, rowHeight - 2)
 			end
 			if not self.SetHighlightColor or not self:SetHighlightColor(index, value) then
-				SetDrawColor(1, 1, 1)
+				SetDrawStyle('text_list')
 			end
 			-- TODO: handle icon size properly, for now assume they are 16x16
 			if icon == nil then
@@ -280,32 +295,32 @@ function ListClass:Draw(viewPort, noTooltip)
 		if self.colLabels then
 			local mOver = relX >= colOffset and relX <= colOffset + colWidth and relY >= 0 and relY <= 18
 			if mOver and self:GetColumnProperty(column, "sortable") then
-				SetDrawColor(1, 1, 1)
+				SetDrawStyle('list_column_label_border_hover')
 				DrawImage(nil, colOffset, 1, colWidth, 18)
-				SetDrawColor(0.33, 0.33, 0.33)
+				SetDrawStyle('list_column_label_background_hover')
 				DrawImage(nil, colOffset + 1, 2, colWidth - 2, 16)
 			else
-				SetDrawColor(0.5, 0.5, 0.5)
+				SetDrawStyle('list_column_label_border')
 				DrawImage(nil, colOffset, 1, colWidth, 18)
-				SetDrawColor(0.15, 0.15, 0.15)
+				SetDrawStyle('list_column_label_background')
 				DrawImage(nil, colOffset + 1, 2, colWidth - 2, 16)
 			end
 			local label = self:GetColumnProperty(column, "label")
 			if label and #label > 0 then
-				SetDrawColor(1, 1, 1)
-				DrawString(colOffset + colWidth/2, 4, "CENTER_X", 12, "VAR", label)
+				SetDrawStyle('text_list_column_label')
+				StyledDrawString(colOffset + colWidth/2, 4, "CENTER_X", 12, 'text_list_column_label', label)
 			end
 		end
 	end
 	if #self.list == 0 and self.defaultText then
-		SetDrawColor(1, 1, 1)
-		DrawString(2, 2, "LEFT", 14, self.font, self.defaultText)
+		SetDrawStyle('text_list_placeholder')
+		StyledDrawString(2, 2, "LEFT", 14, 'text_list_placeholder', self.defaultText)
 	end
 	if self.selDragIndex then
 		local lineY = rowHeight * (self.selDragIndex - 1) - scrollOffsetV
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('list_dragindex')
 		DrawImage(nil, 0, lineY - 1, width - 20, 3)
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('list_dragindex_center')
 		DrawImage(nil, 0, lineY, width - 20, 1)
 	end
 	SetViewport()
diff --git a/src/Classes/PathControl.lua b/src/Classes/PathControl.lua
index 4d62bef27..7fabc9847 100644
--- a/src/Classes/PathControl.lua
+++ b/src/Classes/PathControl.lua
@@ -39,7 +39,7 @@ function PathClass:SetSubPath(subPath, noUndo)
 		button.shown = true
 		button.x = x
 		button.label = folder.label
-		button.width = DrawStringWidth(self.height - 8, "VAR", folder.label) + 10
+		button.width = StyledDrawStringWidth(self.height - 8, 'text_button', folder.label) + 10
 		button.onClick = function()
 			self:SetSubPath(folder.path)
 		end
@@ -69,17 +69,18 @@ end
 function PathClass:Draw(viewPort)
 	local x, y = self:GetPos()
 	local width, height = self:GetSize()
-	SetDrawColor(0.5, 0.5, 0.5)
+	SetDrawStyle('path_border')
 	DrawImage(nil, x, y, width, height)
-	SetDrawColor(0, 0, 0)
+	SetDrawStyle('path_background')
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 	self:DrawControls(viewPort)
 	for index, folder in ipairs(self.folderList) do
 		local buttonX, buttonY = folder.button:GetPos()
 		local buttonW, buttonH = folder.button:GetSize()
-		SetDrawColor(1, 1, 1)
+	SetDrawStyle('path_arrow')
 		main:DrawArrow(buttonX + buttonW + 6, y + height/2, 8, 8, "RIGHT")
 		if self.otherDragSource and index < #self.folderList then
+			-- TODO: ?
 			SetDrawColor(0, 1, 0, 0.25)
 			DrawImage(nil, buttonX, buttonY, buttonW, buttonH)
 		end
diff --git a/src/Classes/PopupDialog.lua b/src/Classes/PopupDialog.lua
index 223059def..a802bcd85 100644
--- a/src/Classes/PopupDialog.lua
+++ b/src/Classes/PopupDialog.lua
@@ -41,20 +41,25 @@ function PopupDialogClass:Draw(viewPort)
 	local x, y = self:GetPos()
 	local width, height = self:GetSize()
 	-- Draw dialog background
-	SetDrawColor(0.8, 0.8, 0.8)
+		-- Popup-Border
+	SetDrawStyle('popup_border')
 	DrawImage(nil, x, y, width, height)
-	SetDrawColor(0.1, 0.1, 0.1)
+		-- Popup-Fill
+	SetDrawStyle('popup_background')
 	DrawImage(nil, x + 2, y + 2, width - 4, height - 4)
 	-- Draw dialog title box
 	local title = self:GetProperty("title")
-	local titleWidth = DrawStringWidth(16, "VAR", title)
+	local titleWidth = StyledDrawStringWidth(16, 'text_popup_title', title)
 	local titleX = x + m_floor((width - titleWidth - 8) / 2)
-	SetDrawColor(1, 1, 1)
+	-- Popup-Title-Border
+	SetDrawStyle('popup_border_title')
 	DrawImage(nil, titleX, y - 10, titleWidth + 8, 24)
-	SetDrawColor(0, 0, 0)
+	-- Popup-Title-Fill
+	SetDrawStyle('popup_background_title')
 	DrawImage(nil, titleX + 2, y - 8, titleWidth + 4, 20)
-	SetDrawColor(1, 1, 1)
-	DrawString(titleX + 4, y - 7, "LEFT", 16, "VAR", title)
+	-- Popup-Title
+	SetDrawStyle('text_popup_title')
+	StyledDrawString(titleX + 4, y - 7, "LEFT", 16, 'text_popup_title', title)
 	if self.scrollBarFunc then
 		self.scrollBarFunc()
 	end
diff --git a/src/Classes/RectangleOutlineControl.lua b/src/Classes/RectangleOutlineControl.lua
index 8b8b0b9d4..90a34c99c 100644
--- a/src/Classes/RectangleOutlineControl.lua
+++ b/src/Classes/RectangleOutlineControl.lua
@@ -3,15 +3,15 @@
 -- Class: RectangleOutline Control
 -- Simple Outline Only Rectangle control
 --
-local RectangleOutlineClass = newClass("RectangleOutlineControl", "Control", function(self, anchor, rect, colors, stroke)
+local RectangleOutlineClass = newClass("RectangleOutlineControl", "Control", function(self, anchor, rect, style, stroke)
     self.Control(anchor, rect)
     self.stroke = stroke or 1
-    self.colors = colors or { 1, 1, 1 }
+    self.style = style or 'rectangle_outline_border'
 end)
 
 function RectangleOutlineClass:Draw()
     local x, y = self:GetPos()
-    SetDrawColor(unpack(self.colors))
+    SetDrawStyle(self.style)
     DrawImage(nil, x, y, self.width + self.stroke, self.stroke)
     DrawImage(nil, x, y + self.height, self.width + self.stroke, self.stroke)
     DrawImage(nil, x, y, self.stroke, self.height + self.stroke)
diff --git a/src/Classes/ScrollBarControl.lua b/src/Classes/ScrollBarControl.lua
index 7dfc416e9..c40770d69 100644
--- a/src/Classes/ScrollBarControl.lua
+++ b/src/Classes/ScrollBarControl.lua
@@ -148,22 +148,24 @@ function ScrollBarClass:Draw()
 		end
 	end
 	-- Draw up/left button background
+	-- Scrollbar-Arrow-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('scrollbar_arrow_border_disabled')
 	elseif mOverComp == "UP" then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('scrollbar_arrow_border_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('scrollbar_arrow_border')
 	end
 	if dir == "HORIZONTAL" then
 		DrawImage(nil, x, y, height, height)
 	else
 		DrawImage(nil, x, y, width, width)
 	end
+	-- Scrollbar-Arrow-Background
 	if enabled and mOverComp == "UP" then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('scrollbar_arrow_background_hover')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('scrollbar_arrow_background')
 	end
 	if dir == "HORIZONTAL" then
 		DrawImage(nil, x + 1, y + 1, height - 2, height - 2)
@@ -172,11 +174,11 @@ function ScrollBarClass:Draw()
 	end
 	-- Draw up/left arrow
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('scrollbar_arrow_disabled')
 	elseif mOverComp == "UP" then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('scrollbar_arrow_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('scrollbar_arrow')
 	end
 	if dir == "HORIZONTAL" then
 		main:DrawArrow(x + height/2, y + height/2, height/2, height/2, "LEFT")
@@ -184,22 +186,24 @@ function ScrollBarClass:Draw()
 		main:DrawArrow(x + width/2, y + width/2, width/2, width/2, "UP")
 	end
 	-- Draw down/right button background
+	-- Scrollbar-Arrow-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('scrollbar_arrow_border_disabled')
 	elseif mOverComp == "DOWN" then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('scrollbar_arrow_border_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('scrollbar_arrow_border')
 	end
 	if dir == "HORIZONTAL" then
 		DrawImage(nil, x + width - height, y, height, height)
 	else
 		DrawImage(nil, x, y + height - width, width, width)
 	end
+	-- Scrollbar-Arrow-Background
 	if enabled and mOverComp == "DOWN" then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('scrollbar_arrow_background_hover')
 	else
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('scrollbar_arrow_background')
 	end
 	if dir == "HORIZONTAL" then
 		DrawImage(nil, x + width - height + 1, y + 1, height - 2, height - 2)
@@ -208,11 +212,11 @@ function ScrollBarClass:Draw()
 	end
 	-- Draw down/right arrow
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
+		SetDrawStyle('scrollbar_arrow_disabled')
 	elseif mOverComp == "DOWN" then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('scrollbar_arrow_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('scrollbar_arrow')
 	end
 	if dir == "HORIZONTAL" then
 		main:DrawArrow(x + width - height/2, y + height/2, height/2, height/2, "RIGHT")
@@ -220,28 +224,44 @@ function ScrollBarClass:Draw()
 		main:DrawArrow(x + width/2, y + height - width/2, width/2, width/2, "DOWN")
 	end
 	-- Draw slide background
+	-- Scrollbar-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
-	elseif self.dragging or mOverComp == "KNOB" or mOverComp == "SLIDEUP" or mOverComp == "SLIDEDOWN" then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('scrollbar_border_disabled')
+	elseif self.dragging then
+		SetDrawStyle('scrollbar_border_selected')
+	elseif mOverComp == "KNOB" or mOverComp == "SLIDEUP" or mOverComp == "SLIDEDOWN" then
+		SetDrawStyle('scrollbar_border_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('scrollbar_border')
 	end
 	if dir == "HORIZONTAL" then
 		DrawImage(nil, x + height, y, width - height * 2, height)
-		SetDrawColor(0, 0, 0)
-		DrawImage(nil, x + height, y + 1, width - height * 2, height - 2)
 	else
 		DrawImage(nil, x, y + width, width, height - width * 2)
-		SetDrawColor(0, 0, 0)
+	end
+	-- Scrollbar-Fill
+	if not enabled then
+		SetDrawStyle('scrollbar_background_disabled')
+	elseif self.dragging then
+		SetDrawStyle('scrollbar_background_selected')
+	elseif mOverComp == "KNOB" or mOverComp == "SLIDEUP" or mOverComp == "SLIDEDOWN" then
+		SetDrawStyle('scrollbar_background_hover')
+	else
+		SetDrawStyle('scrollbar_background')
+	end
+	if dir == "HORIZONTAL" then
+		DrawImage(nil, x + height, y + 1, width - height * 2, height - 2)
+	else
 		DrawImage(nil, x + 1, y + width, width - 2, height - width * 2)
 	end
 	-- Draw knob
 	if enabled then
-		if self.dragging or mOverComp == "KNOB" then
-			SetDrawColor(1, 1, 1)
+		if self.dragging then
+			SetDrawStyle('scrollbar_knob_selected')
+		elseif mOverComp == "KNOB" then
+			SetDrawStyle('scrollbar_knob_hover')
 		else
-			SetDrawColor(0.5, 0.5, 0.5)
+			SetDrawStyle('scrollbar_knob')
 		end
 		local knobPos = self:GetKnobPosForOffset()
 		if dir == "HORIZONTAL" then
diff --git a/src/Classes/SearchHost.lua b/src/Classes/SearchHost.lua
index 60a65e640..4c232f000 100644
--- a/src/Classes/SearchHost.lua
+++ b/src/Classes/SearchHost.lua
@@ -122,6 +122,8 @@ function SearchHostClass:ResetSearch()
 end
 
 function SearchHostClass:GetSearchTermPretty()
-	local color = self:IsSearchActive() and self.matchCount > 0 and "^xFFFFFF" or "^xFF0000"
-	return color .. self.searchTerm
+	if self:IsSearchActive() and self.matchCount == 0 then
+		return GetStyleColor('text_negative')..self.searchTerm
+	end
+	return self.searchTerm
 end
\ No newline at end of file
diff --git a/src/Classes/SectionControl.lua b/src/Classes/SectionControl.lua
index 45e1498d2..8393d5fb7 100644
--- a/src/Classes/SectionControl.lua
+++ b/src/Classes/SectionControl.lua
@@ -12,18 +12,23 @@ end)
 function SectionClass:Draw()
 	local x, y = self:GetPos()
 	local width, height = self:GetSize()
+	-- Section-Border
 	SetDrawLayer(nil, -10)
-	SetDrawColor(0.66, 0.66, 0.66)
+	SetDrawStyle('section_border')
 	DrawImage(nil, x, y, width, height)
-	SetDrawColor(0.1, 0.1, 0.1)
+	-- Section-Fill
+	SetDrawStyle('section_background')
 	DrawImage(nil, x + 2, y + 2, width - 4, height - 4)
 	SetDrawLayer(nil, 0)
 	local label = self:GetProperty("label")
-	local labelWidth = DrawStringWidth(14, "VAR", label)
-	SetDrawColor(0.66, 0.66, 0.66)
+	local labelWidth = StyledDrawStringWidth(14, 'text_section_title', label)
+	-- Section-Title-Border
+	SetDrawStyle('section_border_title')
 	DrawImage(nil, x + 6, y - 8, labelWidth + 6, 18)
-	SetDrawColor(0, 0, 0)
+	-- Section-Title-Fill
+	SetDrawStyle('section_background_title')
 	DrawImage(nil, x + 7, y - 7, labelWidth + 4, 16)
-	SetDrawColor(1, 1, 1)
-	DrawString(x + 9, y - 6, "LEFT", 14, "VAR", label)
+	-- Section-Title
+	SetDrawStyle('text_section_title')
+	StyledDrawString(x + 9, y - 6, "LEFT", 14, 'text_section_title', label)
 end
\ No newline at end of file
diff --git a/src/Classes/SharedItemListControl.lua b/src/Classes/SharedItemListControl.lua
index b7605b61d..482b223e3 100644
--- a/src/Classes/SharedItemListControl.lua
+++ b/src/Classes/SharedItemListControl.lua
@@ -10,8 +10,8 @@ local t_remove = table.remove
 local SharedItemListClass = newClass("SharedItemListControl", "ListControl", function(self, anchor, rect, itemsTab, forceTooltip)
 	self.ListControl(anchor, rect, 16, "VERTICAL", true, main.sharedItemList, forceTooltip)
 	self.itemsTab = itemsTab
-	self.label = "^7Shared items:"
-	self.defaultText = "^x7F7F7FThis is a list of items that will be shared between all of\nyour builds.\nYou can add items to this list by dragging them from\none of the other lists."
+	self.label = "Shared items:"
+	self.defaultText = "This is a list of items that will be shared between all of\nyour builds.\nYou can add items to this list by dragging them from\none of the other lists."
 	self.dragTargetList = { }
 	self.controls.delete = new("ButtonControl", {"BOTTOMRIGHT",self,"TOPRIGHT"}, {0, -2, 60, 18}, "Delete", function()
 		self:OnSelDelete(self.selIndex, self.selValue)
diff --git a/src/Classes/SkillListControl.lua b/src/Classes/SkillListControl.lua
index 891f4374b..421e6d550 100644
--- a/src/Classes/SkillListControl.lua
+++ b/src/Classes/SkillListControl.lua
@@ -29,7 +29,7 @@ local slot_map = {
 local SkillListClass = newClass("SkillListControl", "ListControl", function(self, anchor, rect, skillsTab)
 	self.ListControl(anchor, rect, 16, "VERTICAL", true, skillsTab.socketGroupList)
 	self.skillsTab = skillsTab
-	self.label = "^7Socket Groups:"
+	self.label = "Socket Groups:"
 	self.controls.delete = new("ButtonControl", {"BOTTOMRIGHT",self,"TOPRIGHT"}, {0, -2, 60, 18}, "Delete", function()
 		self:OnSelDelete(self.selIndex, self.selValue)
 	end)
diff --git a/src/Classes/SkillSetListControl.lua b/src/Classes/SkillSetListControl.lua
index 043af1fa8..0bdf70516 100644
--- a/src/Classes/SkillSetListControl.lua
+++ b/src/Classes/SkillSetListControl.lua
@@ -40,7 +40,7 @@ end)
 
 function SkillSetListClass:CreateSkillSet()
 	local controls = {}
-	controls.label = new("LabelControl", nil, { 0, 20, 0, 16 }, "^7Enter name for new skill set:")
+	controls.label = new("LabelControl", nil, { 0, 20, 0, 16 }, "Enter name for new skill set:")
 	controls.edit = new("EditControl", nil, { 0, 40, 350, 20 }, "New Skill Set", nil, nil, 100, function(buf)
 		controls.save.enabled = buf:match("%S")
 	end)
diff --git a/src/Classes/SkillsTab.lua b/src/Classes/SkillsTab.lua
index 3c43bfffe..57da6ba71 100644
--- a/src/Classes/SkillsTab.lua
+++ b/src/Classes/SkillsTab.lua
@@ -104,7 +104,7 @@ local SkillsTabClass = newClass("SkillsTab", "UndoHandler", "ControlHost", "Cont
 	self.controls.setSelect.enabled = function()
 		return #self.skillSetOrderList > 1
 	end
-	self.controls.setLabel = new("LabelControl", { "RIGHT", self.controls.setSelect, "LEFT" }, { -2, 0, 0, 16 }, "^7Skill set:")
+	self.controls.setLabel = new("LabelControl", { "RIGHT", self.controls.setSelect, "LEFT" }, { -2, 0, 0, 16 }, "Skill set:")
 	self.controls.setManage = new("ButtonControl", { "LEFT", self.controls.setSelect, "RIGHT" }, { 4, 0, 90, 20 }, "Manage...", function()
 		self:OpenSkillSetManagePopup()
 	end)
@@ -140,16 +140,16 @@ local SkillsTabClass = newClass("SkillsTab", "UndoHandler", "ControlHost", "Cont
 			tooltip:AddLine(16, "^7" .. value.description)
 		end
 	end
-	self.controls.defaultLevelLabel = new("LabelControl", { "RIGHT", self.controls.defaultLevel, "LEFT" }, { -4, 0, 0, 16 }, "^7Default gem level:")
+	self.controls.defaultLevelLabel = new("LabelControl", { "RIGHT", self.controls.defaultLevel, "LEFT" }, { -4, 0, 0, 16 }, "Default gem level:")
 	self.controls.defaultQuality = new("EditControl", { "TOPLEFT", self.controls.groupList, "BOTTOMLEFT" }, { optionInputsX, optionInputsY + 118, 60, 20 }, nil, nil, "%D", 2, function(buf)
 		self.defaultGemQuality = m_min(tonumber(buf) or 0, 23)
 	end)
-	self.controls.defaultQualityLabel = new("LabelControl", { "RIGHT", self.controls.defaultQuality, "LEFT" }, { -4, 0, 0, 16 }, "^7Default gem quality:")
+	self.controls.defaultQualityLabel = new("LabelControl", { "RIGHT", self.controls.defaultQuality, "LEFT" }, { -4, 0, 0, 16 }, "Default gem quality:")
 	self.controls.showSupportGemTypes = new("DropDownControl", { "TOPLEFT", self.controls.groupList, "BOTTOMLEFT" }, { optionInputsX, optionInputsY + 142, 170, 20 }, showSupportGemTypeList, function(index, value)
 		self.showSupportGemTypes = value.show
 	end)
-	self.controls.showSupportGemTypesLabel = new("LabelControl", { "RIGHT", self.controls.showSupportGemTypes, "LEFT" }, { -4, 0, 0, 16 }, "^7Show support gems:")
-	self.controls.showLegacyGems = new("CheckBoxControl", { "TOPLEFT", self.controls.groupList, "BOTTOMLEFT" }, { optionInputsX, optionInputsY + 166, 20 }, "^7Show legacy gems:", function(state)
+	self.controls.showSupportGemTypesLabel = new("LabelControl", { "RIGHT", self.controls.showSupportGemTypes, "LEFT" }, { -4, 0, 0, 16 }, "Show support gems:")
+	self.controls.showLegacyGems = new("CheckBoxControl", { "TOPLEFT", self.controls.groupList, "BOTTOMLEFT" }, { optionInputsX, optionInputsY + 166, 20 }, "Show legacy gems:", function(state)
 		self.showLegacyGems = state
 	end)
 
@@ -168,7 +168,7 @@ local SkillsTabClass = newClass("SkillsTab", "UndoHandler", "ControlHost", "Cont
 		self:AddUndoState()
 		self.build.buildFlag = true
 	end)
-	self.controls.groupSlotLabel = new("LabelControl", { "TOPLEFT", self.anchorGroupDetail, "TOPLEFT" }, { 0, 30, 0, 16 }, "^7Socketed in:")
+	self.controls.groupSlotLabel = new("LabelControl", { "TOPLEFT", self.anchorGroupDetail, "TOPLEFT" }, { 0, 30, 0, 16 }, "Socketed in:")
 	self.controls.groupSlot = new("DropDownControl", { "TOPLEFT", self.anchorGroupDetail, "TOPLEFT" }, { 85, 28, 130, 20 }, groupSlotDropList, function(index, value)
 		self.displayGroup.slot = value.slotName
 		self:AddUndoState()
@@ -276,12 +276,12 @@ will automatically apply to the skill.]]
 	self.anchorGemSlots = new("Control", {"TOPLEFT",self.anchorGroupDetail,"TOPLEFT"}, {0, 28 + 28 + 16, 0, 0})
 	self.gemSlots = { }
 	self:CreateGemSlot(1)
-	self.controls.gemNameHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].nameSpec, "TOPLEFT"}, {0, -2, 0, 16}, "^7Gem name:")
-	self.controls.gemLevelHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].level, "TOPLEFT"}, {0, -2, 0, 16}, "^7Level:")
-	self.controls.gemQualityHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].quality, "TOPLEFT"}, {0, -2, 0, 16}, "^7Quality:")
-	self.controls.gemCorruptHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].corruptLevel, "TOPLEFT"}, {0, -2, 0, 16}, "^7Corrupt:")
-	self.controls.gemEnableHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].enabled, "TOPLEFT"}, {-16, -2, 0, 16}, "^7Enabled:")
-	self.controls.gemCountHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].count, "TOPLEFT"}, {18, -2, 0, 16}, "^7Count:")
+	self.controls.gemNameHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].nameSpec, "TOPLEFT"}, {0, -2, 0, 16}, "Gem name:")
+	self.controls.gemLevelHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].level, "TOPLEFT"}, {0, -2, 0, 16}, "Level:")
+	self.controls.gemQualityHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].quality, "TOPLEFT"}, {0, -2, 0, 16}, "Quality:")
+	self.controls.gemCorruptHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].corruptLevel, "TOPLEFT"}, {0, -2, 0, 16}, "Corrupt:")
+	self.controls.gemEnableHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].enabled, "TOPLEFT"}, {-16, -2, 0, 16}, "Enabled:")
+	self.controls.gemCountHeader = new("LabelControl", {"BOTTOMLEFT", self.gemSlots[1].count, "TOPLEFT"}, {18, -2, 0, 16}, "Count:")
 end)
 
 function SkillsTabClass:GetCorruptIndex(gemInstance)
diff --git a/src/Classes/SliderControl.lua b/src/Classes/SliderControl.lua
index 2c3048de4..62d424826 100644
--- a/src/Classes/SliderControl.lua
+++ b/src/Classes/SliderControl.lua
@@ -84,27 +84,42 @@ function SliderClass:Draw(viewPort)
 		self:SetValFromKnobX((cursorX - self.dragCX) + self.dragKnobX)
 	end
 	local mOver, mOverComp = self:IsMouseOver()
+	-- Slider-Border
 	if not enabled then
-		SetDrawColor(0.33, 0.33, 0.33)
-	elseif self.dragging or mOver then
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('slider_border_disabled')
+	elseif self.dragging then
+		SetDrawStyle('slider_border_selected')
+	elseif mOver then
+		SetDrawStyle('slider_border_hover')
 	else
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('slider_border')
 	end
 	DrawImage(nil, x, y, width, height)
-	SetDrawColor(0, 0, 0)
+	-- Slider-Background
+	if not enabled then
+		SetDrawStyle('slider_background_disabled')
+	elseif self.dragging then
+		SetDrawStyle('slider_background_selected')
+	elseif mOver then
+		SetDrawStyle('slider_background_hover')
+	else
+		SetDrawStyle('slider_background')
+	end
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 	if enabled then
 		if self.divCount then
-			SetDrawColor(0.33, 0.33, 0.33)
+			-- Slider-Section-Separator
+			SetDrawStyle('slider_section_separator')
 			for d = 0, knobTravel + 0.5, knobTravel / self.divCount do
 				DrawImage(nil, x + self.knobSize/2 + d, y + 1, 2, height - 2)
 			end
 		end
-		if self.dragging or mOverComp == "KNOB" then
-			SetDrawColor(1, 1, 1)
+		if self.dragging then
+			SetDrawStyle('slider_knob_selected')
+		elseif mOverComp == "KNOB" then
+			SetDrawStyle('slider_knob_hover')
 		else
-			SetDrawColor(0.5, 0.5, 0.5)
+			SetDrawStyle('slider_knob')
 		end
 		local knobX = self:GetKnobXForVal()
 		if self.divCount then
diff --git a/src/Classes/TextListControl.lua b/src/Classes/TextListControl.lua
index 7302a153b..0a5dbba2e 100644
--- a/src/Classes/TextListControl.lua
+++ b/src/Classes/TextListControl.lua
@@ -32,9 +32,9 @@ function TextListClass:Draw(viewPort)
 		contentHeight = contentHeight + lineInfo.height
 	end
 	scrollBar:SetContentDimension(contentHeight, height - 4)
-	SetDrawColor(0.66, 0.66, 0.66)
+	SetDrawStyle('textlist_border')
 	DrawImage(nil, x, y, width, height)
-	SetDrawColor(0.05, 0.05, 0.05)
+	SetDrawStyle('textlist_background')
 	DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 	self:DrawControls(viewPort)
 	SetViewport(x + 2, y + 2, width - 20, height - 4)
@@ -42,7 +42,7 @@ function TextListClass:Draw(viewPort)
 		local lineY = -scrollBar.offset
 		for _, lineInfo in ipairs(self.list) do
 			if lineInfo[colIndex] then
-				DrawString(lineInfo.x or colInfo.x, lineY, lineInfo.align or colInfo.align, lineInfo.height, lineInfo.font or "VAR", lineInfo[colIndex])
+				StyledDrawString(lineInfo.x or colInfo.x, lineY, lineInfo.align or colInfo.align, lineInfo.height, lineInfo.font or 'text_textlist', lineInfo[colIndex])
 			end
 			lineY = lineY + lineInfo.height
 		end
diff --git a/src/Classes/Tooltip.lua b/src/Classes/Tooltip.lua
index 0875bfdff..c279fcad4 100644
--- a/src/Classes/Tooltip.lua
+++ b/src/Classes/Tooltip.lua
@@ -85,7 +85,7 @@ function TooltipClass:Clear(clearUpdateParams)
 	self.center = false
 	self.maxWidth = nil
 	self.minWidth = nil
-	self.color = { 0.5, 0.3, 0 }
+	self.color = hexToRGB(GetStyleColor('tooltip_border'))
 	t_insert(self.blocks, { height = 0 })
 end
 
@@ -113,9 +113,9 @@ function TooltipClass:AddLine(size, text, font, background)
 	if text then
 		local fontToUse
 		if main.showFlavourText then
-			fontToUse = font or "VAR"
+			fontToUse = font or GetStyleFont('text_tooltip')
 		else
-			fontToUse = "VAR"
+			fontToUse = GetStyleFont('text_tooltip')
 		end
 		for line in s_gmatch(text .. "\n", "([^\n]*)\n") do
 			if line:match("^.*(Equipping)") == "Equipping" or line:match("^.*(Removing)") == "Removing" then
@@ -443,6 +443,7 @@ function TooltipClass:Draw(x, y, w, h, viewPort)
 		end
 	end
 
+	-- TODO: ?
 	SetDrawColor(1, 1, 1)
 
 	-- Initial column calculation
@@ -470,10 +471,11 @@ function TooltipClass:Draw(x, y, w, h, viewPort)
 	end
 
 	-- background shading currently must be drawn before text lines.  API change will allow something like the commented lines below
-	SetDrawColor(0, 0, 0, .85)
+	SetDrawStyle('tooltip_background')
 	--SetDrawLayer(nil, GetDrawLayer() - 5)
 	DrawImage(nil, ttX, ttY + BORDER_WIDTH, totalDrawWidth - BORDER_WIDTH, maxColumnHeight - 2 * BORDER_WIDTH)
 	--SetDrawLayer(nil, GetDrawLayer())
+	-- Initial tooltip text color
 	SetDrawColor(1, 1, 1)
 
 	-- Item header (drawn within borders)
diff --git a/src/Classes/TreeTab.lua b/src/Classes/TreeTab.lua
index 3de5954cb..8e6bd96d2 100644
--- a/src/Classes/TreeTab.lua
+++ b/src/Classes/TreeTab.lua
@@ -461,17 +461,17 @@ function TreeTabClass:Draw(viewPort, inputEvents)
 
 	SetDrawLayer(1)
 
-	SetDrawColor(0.05, 0.05, 0.05)
+	SetDrawStyle('bottom_bar_background')
 	DrawImage(nil, viewPort.x, viewPort.y + viewPort.height - (28 + bottomDrawerHeight + linesHeight), viewPort.width, 28 + bottomDrawerHeight + linesHeight)
 	if self.showConvert then
 		local height = viewPort.width < convertMaxWidth and (bottomDrawerHeight + linesHeight) or 0
-		SetDrawColor(0.05, 0.05, 0.05)
+		SetDrawStyle('bottom_bar_background')
 		DrawImage(nil, viewPort.x, viewPort.y + viewPort.height - (60 + bottomDrawerHeight + linesHeight + convertTwoLineHeight), viewPort.width, 28 + height)
-		SetDrawColor(0.85, 0.85, 0.85)
+		SetDrawStyle('bottom_bar_border')
 		DrawImage(nil, viewPort.x, viewPort.y + viewPort.height - (64 + bottomDrawerHeight + linesHeight + convertTwoLineHeight), viewPort.width, 4)
 	end
 	-- let white lines overwrite the black sections, regardless of showConvert
-	SetDrawColor(0.85, 0.85, 0.85)
+	SetDrawStyle('bottom_bar_border')
 	DrawImage(nil, viewPort.x, viewPort.y + viewPort.height - (32 + bottomDrawerHeight + linesHeight), viewPort.width, 4)
 
 	self:DrawControls(viewPort)
diff --git a/src/Data/Global.lua b/src/Data/Global.lua
index a78a6d4d7..354a227a6 100644
--- a/src/Data/Global.lua
+++ b/src/Data/Global.lua
@@ -94,6 +94,7 @@ function updateColorCode(code, color)
 end
 
 function hexToRGB(hex)
+	hex = hex:gsub("%^x", "") -- Remove "^x" prefix
 	hex = hex:gsub("0x", "") -- Remove "0x" prefix
 	hex = hex:gsub("#","") -- Remove '#' if present
 	if #hex ~= 6 then
diff --git a/src/Modules/Build.lua b/src/Modules/Build.lua
index c5dd0b6c0..946077233 100644
--- a/src/Modules/Build.lua
+++ b/src/Modules/Build.lua
@@ -133,7 +133,7 @@ function buildMode:Init(dbFileName, buildName, buildXML, convertBuild, importLin
 			(self.anchorTopBarRight:GetPos() - 98 - 58
 			- self.controls.pointDisplay:GetSize() - self.controls.levelScalingButton:GetSize() - self.controls.characterLevel:GetSize()
 			- self.controls.back:GetSize() - self.controls.save:GetSize() - self.controls.saveAs:GetSize())
-		local bnw = DrawStringWidth(16, "VAR", self.buildName)
+		local bnw = StyledDrawStringWidth(16, 'text_current_build', self.buildName)
 		self.strWidth = m_min(bnw, limit)
 		self.strLimited = bnw > limit
 		return self.strWidth + 98
@@ -141,13 +141,13 @@ function buildMode:Init(dbFileName, buildName, buildXML, convertBuild, importLin
 	self.controls.buildName.Draw = function(control)
 		local x, y = control:GetPos()
 		local width, height = control:GetSize()
-		SetDrawColor(0.5, 0.5, 0.5)
+		SetDrawStyle('current_build_box_border')
 		DrawImage(nil, x + 91, y, self.strWidth + 6, 20)
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('current_build_box_background')
 		DrawImage(nil, x + 92, y + 1, self.strWidth + 4, 18)
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('text_current_build')
 		SetViewport(x, y + 2, self.strWidth + 94, 16)
-		DrawString(0, 0, "LEFT", 16, "VAR", "Current build:  "..self.buildName)
+		StyledDrawString(0, 0, "LEFT", 16, 'text_current_build', "Current build:  "..self.buildName)
 		SetViewport()
 		if control:IsMouseInBounds() then
 			SetDrawLayer(nil, 10)
@@ -181,9 +181,9 @@ function buildMode:Init(dbFileName, buildName, buildXML, convertBuild, importLin
 	self.controls.pointDisplay.Draw = function(control)
 		local x, y = control:GetPos()
 		local width, height = control:GetSize()
-		SetDrawColor(1, 1, 1)
+		SetDrawStyle('points_box_border')
 		DrawImage(nil, x, y, width, height)
-		SetDrawColor(0, 0, 0)
+		SetDrawStyle('points_box_background')
 		DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
 		SetDrawColor(1, 1, 1)
 		DrawString(x + 4, y + 2, "LEFT", 16, "FIXED", control.str)
@@ -1376,16 +1376,16 @@ function buildMode:OnFrame(inputEvents)
 	SetDrawLayer(5)
 
 	-- Draw top bar background
-	SetDrawColor(0.2, 0.2, 0.2)
+	SetDrawStyle('top_bar_background')
 	DrawImage(nil, 0, 0, main.screenW, 28)
-	SetDrawColor(0.85, 0.85, 0.85)
+	SetDrawStyle('top_bar_border')
 	DrawImage(nil, 0, 28, main.screenW, 4)
 	DrawImage(nil, main.screenW/2 - 2, 0, 4, 28)
 
 	-- Draw side bar background
-	SetDrawColor(0.1, 0.1, 0.1)
+	SetDrawStyle('side_bar_background')
 	DrawImage(nil, 0, 32, sideBarWidth - 4, main.screenH - 32)
-	SetDrawColor(0.85, 0.85, 0.85)
+	SetDrawStyle('side_bar_border')
 	DrawImage(nil, sideBarWidth - 4, 32, 4, main.screenH - 32)
 
 
diff --git a/src/Modules/ConfigOptions.lua b/src/Modules/ConfigOptions.lua
index ffabe09e1..561e4a326 100644
--- a/src/Modules/ConfigOptions.lua
+++ b/src/Modules/ConfigOptions.lua
@@ -154,7 +154,7 @@ local configSettings = {
 	{ var = "conditionHaveEnergyShield", type = "check", label = "Do you always have ^x88FFFFEnergy Shield?", ifCond = "HaveEnergyShield", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:HaveEnergyShield", "FLAG", true, "Config")
 	end },
-	{ var = "multiplierCurrentEnergyShield", type = "count", label = "Current ^x88FFFFEnergy Shield^7 percentage:", ifCond = "UseCurrentEnergyShield", defaultPlaceholderState = 100, tooltip = "Used in calculations for ^xAF6025Silks of Veneration^7 and ^xAF6025The Mutable Star^7.\nOverflowed ^x88FFFFEnergy Shield^7 is allowed, up to 150%.", apply = function(val, modList, enemyModList)
+	{ var = "multiplierCurrentEnergyShield", type = "count", label = "Current ^x88FFFFEnergy Shield"..GetStyleColor('text_label').." percentage:", ifCond = "UseCurrentEnergyShield", defaultPlaceholderState = 100, tooltip = "Used in calculations for ^xAF6025Silks of Veneration^7 and ^xAF6025The Mutable Star^7.\nOverflowed ^x88FFFFEnergy Shield^7 is allowed, up to 150%.", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:UseCurrentEnergyShield", "FLAG", true, "Config")
 		modList:NewMod("Multiplier:CurrentEnergyShield", "BASE", val, "Config")
 	end },
@@ -170,7 +170,7 @@ local configSettings = {
 	{ var = "ailmentMode", type = "list", label = "Ailment calculation mode:", tooltip = "Controls how the base damage for applying Ailments is calculated:\n\tAverage: damage is based on the average application, including both crits and non-crits\n\tCrits Only: damage is based solely on Ailments inflicted with crits", list = {{val="AVERAGE",label="Average"},{val="CRIT",label="Crits Only"}} },
 	{ var = "cooldownMode", type = "list", label = "Cooldown calculation mode:", tooltip = "Controls how the cooldown for skills is calculated:\n\tBase: The cooldown is calculated with normal behavior.\n\tAverage: The cooldown is adjusted to reflect the average time between uses, factoring in effects such as a chance to not consume a cooldown.", list = {{val="BASE",label="Base"},{val="AVERAGE",label="Average"}} },
 	{ var = "physMode", type = "list", label = "Random element mode:", ifFlag = "randomPhys", tooltip = "Controls how modifiers which choose a random element will function.\n\tAverage: Modifiers will grant one third of their value to ^xB97123Fire^7, ^x3F6DB3Cold^7, and ^xADAA47Lightning ^7simultaneously\n\t^xB97123Fire ^7/ ^x3F6DB3Cold ^7/ ^xADAA47Lightning^7: Modifiers will grant their full value as the specified element\nIf a modifier chooses between just two elements, the full value can only be given as those two elements.", list = {{val="AVERAGE",label="Average"},{val="FIRE",label="^xB97123Fire"},{val="COLD",label="^x3F6DB3Cold"},{val="LIGHTNING",label="^xADAA47Lightning"}} },
-	{ var = "lifeRegenMode", type = "list", label = "^xE05030Life ^7regen calculation mode:", ifCond = { "LifeRegenBurstAvg", "LifeRegenBurstFull" }, tooltip = "Controls how ^xE05030Life ^7regeneration is calculated:\n\tMinimum: does not include burst regen\n\tAverage: includes burst regen, averaged based on uptime\n\tBurst: includes full burst regen", list = {{val="MIN",label="Minimum"},{val="AVERAGE",label="Average"},{val="FULL",label="Burst"}}, apply = function(val, modList, enemyModList)
+	{ var = "lifeRegenMode", type = "list", label = "^xE05030Life "..GetStyleColor('text_label').."regen calculation mode:", ifCond = { "LifeRegenBurstAvg", "LifeRegenBurstFull" }, tooltip = "Controls how ^xE05030Life ^7regeneration is calculated:\n\tMinimum: does not include burst regen\n\tAverage: includes burst regen, averaged based on uptime\n\tBurst: includes full burst regen", list = {{val="MIN",label="Minimum"},{val="AVERAGE",label="Average"},{val="FULL",label="Burst"}}, apply = function(val, modList, enemyModList)
 		if val == "AVERAGE" then
 			modList:NewMod("Condition:LifeRegenBurstAvg", "FLAG", true, "Config")
 		elseif val == "FULL" then
@@ -1037,19 +1037,19 @@ Huge sets the radius to 11.
 	{ var = "conditionOnFungalGround", type = "check", label = "Are you on Fungal Ground?", ifCond = { "OnFungalGround", "CreateFungalGround" }, tooltip = "Allies on your Fungal Ground gain +25% ^xD02090Chaos ^7Resistance.", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:OnFungalGround", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
-	{ var = "conditionOnBurningGround", type = "check", label = "Are you on ^xB97123Burning ^7Ground?", ifCond = "OnBurningGround", implyCond = "Burning", tooltip = "This also implies that you are ^xB97123Burning.", apply = function(val, modList, enemyModList)
+	{ var = "conditionOnBurningGround", type = "check", label = "Are you on ^xB97123Burning "..GetStyleColor('text_label').."Ground?", ifCond = "OnBurningGround", implyCond = "Burning", tooltip = "This also implies that you are ^xB97123Burning.", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:OnBurningGround", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 		modList:NewMod("Condition:Burning", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
-	{ var = "conditionOnIgnitedGround", type = "check", label = "Are you on ^xB97123Ignited ^7Ground?", ifCond = "OnIgnitedGround", implyCond = "Ignited", tooltip = "This also implies that you are ^xB97123Ignited.", apply = function(val, modList, enemyModList)
+	{ var = "conditionOnIgnitedGround", type = "check", label = "Are you on ^xB97123Ignited "..GetStyleColor('text_label').."Ground?", ifCond = "OnIgnitedGround", implyCond = "Ignited", tooltip = "This also implies that you are ^xB97123Ignited.", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:OnIgnitedGround", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 		modList:NewMod("Condition:Ignited", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
-	{ var = "conditionOnChilledGround", type = "check", label = "Are you on ^x3F6DB3Chilled ^7Ground?", ifCond = "OnChilledGround", implyCond = "Chilled", tooltip = "This also implies that you are ^x3F6DB3Chilled.", apply = function(val, modList, enemyModList)
+	{ var = "conditionOnChilledGround", type = "check", label = "Are you on ^x3F6DB3Chilled "..GetStyleColor('text_label').."Ground?", ifCond = "OnChilledGround", implyCond = "Chilled", tooltip = "This also implies that you are ^x3F6DB3Chilled.", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:OnChilledGround", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 		modList:NewMod("Condition:Chilled", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
-	{ var = "conditionOnShockedGround", type = "check", label = "Are you on ^xADAA47Shocked ^7Ground?", ifCond = "OnShockedGround", implyCond = "Shocked", tooltip = "This also implies that you are ^xADAA47Shocked.", apply = function(val, modList, enemyModList)
+	{ var = "conditionOnShockedGround", type = "check", label = "Are you on ^xADAA47Shocked "..GetStyleColor('text_label').."Ground?", ifCond = "OnShockedGround", implyCond = "Shocked", tooltip = "This also implies that you are ^xADAA47Shocked.", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:OnShockedGround", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 		modList:NewMod("Condition:Shocked", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
@@ -1349,10 +1349,10 @@ Huge sets the radius to 11.
 	{ var = "conditionDodgeRolledRecently", type = "check", label = "Have you Dodge Rolled Recently?", ifCond = "DodgeRolledRecently", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:DodgeRolledRecently", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
-	{ var = "conditionEnergyShieldRechargeRecently", type = "check", label = "^x88FFFFEnergy Shield ^7Recharge started Recently?", ifCond = "EnergyShieldRechargeRecently", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnergyShieldRechargeRecently", type = "check", label = "^x88FFFFEnergy Shield "..GetStyleColor('text_label').."Recharge started Recently?", ifCond = "EnergyShieldRechargeRecently", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:EnergyShieldRechargeRecently", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
-	{ var = "conditionEnergyShieldRechargePastTwoSec", type = "check", label = "^x88FFFFES ^7Recharge started past 2 seconds?", ifCond = "EnergyShieldRechargePastTwoSec", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnergyShieldRechargePastTwoSec", type = "check", label = "^x88FFFFES "..GetStyleColor('text_label').."Recharge started past 2 seconds?", ifCond = "EnergyShieldRechargePastTwoSec", apply = function(val, modList, enemyModList)
 		modList:NewMod("Condition:EnergyShieldRechargePastTwoSec", "FLAG", true, "Config", { type = "Condition", var = "Combat" })
 	end },
 	{ var = "conditionStoppedTakingDamageOverTimeRecently", type = "check", label = "Have you stopped taking DoT recently?", ifCond = "StoppedTakingDamageOverTimeRecently", apply = function(val, modList, enemyModList)
@@ -1772,7 +1772,7 @@ Huge sets the radius to 11.
 	{ var = "conditionEnemyIgnited", type = "check", label = "Is the enemy ^xB97123Ignited?", ifEnemyCond = "Ignited", implyCond = "Burning", tooltip = "This also implies that the enemy is ^xB97123Burning.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Ignited", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "multiplierIgniteOnEnemy", type = "count", label = "# of ^xB97123Ignites^7 on enemy (if not average):", ifFlag = "IgniteCanStack", implyCond = "Ignited", apply = function(val, modList, enemyModList)
+	{ var = "multiplierIgniteOnEnemy", type = "count", label = "# of ^xB97123Ignites"..GetStyleColor('text_label').." on enemy (if not average):", ifFlag = "IgniteCanStack", implyCond = "Ignited", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Multiplier:IgniteStacks", "BASE", val, "Config", { type = "Condition", var = "Effective" })
 	end },
 	{ var = "conditionEnemyScorched", type = "check", ifFlag = "inflictScorch", label = "Is the enemy ^xB97123Scorched?", tooltip = "^xB97123Scorched ^7enemies have lowered elemental resistances, up to -30%.\nThis option will also allow you to input the effect of ^xB97123Scorched.", apply = function(val, modList, enemyModList)
@@ -1782,10 +1782,10 @@ Huge sets the radius to 11.
 	{ var = "conditionScorchedEffect", type = "count", label = "Effect of ^xB97123Scorched:", ifOption = "conditionEnemyScorched", tooltip = "This effect will only be applied while you can inflict ^xB97123Scorched.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("ScorchVal", "BASE", val, "Config", { type = "Condition", var = "ScorchedConfig" })
 	end },
-	{ var = "ScorchStacks", type = "countAllowZero", label = "^xB97123Scorch ^7Stacks", ifFlag = "ScorchCanStack", ifOption = "conditionEnemyScorched", defaultPlaceholderState = 1, tooltip = "Amount of stacks of ^xB97123Scorch ^7applied to the enemy.", apply = function(val, modList, enemyModList)
+	{ var = "ScorchStacks", type = "countAllowZero", label = "^xB97123Scorch "..GetStyleColor('text_label').."Stacks", ifFlag = "ScorchCanStack", ifOption = "conditionEnemyScorched", defaultPlaceholderState = 1, tooltip = "Amount of stacks of ^xB97123Scorch ^7applied to the enemy.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Multiplier:ScorchStacks", "BASE", val, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyOnScorchedGround", type = "check", label = "Is the enemy on ^xB97123Scorched ^7Ground?", tooltip = "This also implies that the enemy is ^xB97123Scorched.", ifEnemyCond = "OnScorchedGround", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyOnScorchedGround", type = "check", label = "Is the enemy on ^xB97123Scorched "..GetStyleColor('text_label').."Ground?", tooltip = "This also implies that the enemy is ^xB97123Scorched.", ifEnemyCond = "OnScorchedGround", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Scorched", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:OnScorchedGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
@@ -1800,14 +1800,14 @@ Huge sets the radius to 11.
 	{ var = "conditionEnemyChilledEffect", type = "count", label = "Effect of ^x3F6DB3Chill:", ifOption = "conditionEnemyChilled", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("ChillVal", "BASE", val, "Chill", { type = "Condition", var = "ChilledConfig" })
 	end },
-	{ var = "ChillStacks", type = "count", label = "^xADAA47Chill ^7Stacks", ifFlag = "ChillCanStack", ifOption = "conditionEnemyChilled", defaultPlaceholderState = 1, tooltip = "Amount of stacks of ^xADAA47Chill ^7applied to the enemy.", apply = function(val, modList, enemyModList)
+	{ var = "ChillStacks", type = "count", label = "^xADAA47Chill "..GetStyleColor('text_label').."Stacks", ifFlag = "ChillCanStack", ifOption = "conditionEnemyChilled", defaultPlaceholderState = 1, tooltip = "Amount of stacks of ^xADAA47Chill ^7applied to the enemy.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Multiplier:ChillStacks", "BASE", val, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyChilledByYourHits", type = "check", ifEnemyCond = "ChilledByYourHits", label = "Is the enemy ^x3F6DB3Chilled ^7by your Hits?", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyChilledByYourHits", type = "check", ifEnemyCond = "ChilledByYourHits", label = "Is the enemy ^x3F6DB3Chilled "..GetStyleColor('text_label').."by your Hits?", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Chilled", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:ChilledByYourHits", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "HoarfrostStacks", type = "count", label = "^x3F6DB3Hoarfrost ^7Stacks", ifFlag = "HitsCanInflictHoarfrost", tooltip = "Amount of stacks of ^x3F6DB3Hoarfrost ^7applied to the enemy.", apply = function(val, modList, enemyModList)
+	{ var = "HoarfrostStacks", type = "count", label = "^x3F6DB3Hoarfrost "..GetStyleColor('text_label').."Stacks", ifFlag = "HitsCanInflictHoarfrost", tooltip = "Amount of stacks of ^x3F6DB3Hoarfrost ^7applied to the enemy.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("HoarfrostFreezeDuration", "INC", val * 20, "Config", { type = "Condition", var = "Effective" })
 	end },
 	{ var = "conditionEnemyFrozen", type = "check", label = "Is the enemy ^x3F6DB3Frozen?", ifEnemyCond = "Frozen", apply = function(val, modList, enemyModList)
@@ -1818,7 +1818,7 @@ Huge sets the radius to 11.
 		enemyModList:NewMod("Multiplier:FrozenByYouSeconds", "BASE", val, "Config", { type = "Condition", var = "Combat" })
 		enemyModList:NewMod("Condition:FrozenByYou", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyOnChilledGround", type = "check", label = "Is the enemy on ^x3F6DB3Chilled ^7Ground?", ifEnemyCond = "OnChilledGround", implyCond = "Chilled", tooltip = "This also implies that the enemy is ^x3F6DB3Chilled.", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyOnChilledGround", type = "check", label = "Is the enemy on ^x3F6DB3Chilled "..GetStyleColor('text_label').."Ground?", ifEnemyCond = "OnChilledGround", implyCond = "Chilled", tooltip = "This also implies that the enemy is ^x3F6DB3Chilled.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:OnChilledGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:Chilled", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
@@ -1829,7 +1829,7 @@ Huge sets the radius to 11.
 	{ var = "conditionBrittleEffect", type = "count", label = "Effect of ^x3F6DB3Brittle:", ifOption = "conditionEnemyBrittle", tooltip = "This effect will only be applied while you can inflict ^x3F6DB3Brittle.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("BrittleVal", "BASE", val, "Config", { type = "Condition", var = "BrittleConfig" })
 	end },
-	{ var = "conditionEnemyOnBrittleGround", type = "check", label = "Is the enemy on ^xADAA47Brittle ^7Ground?", tooltip = "This also implies that the enemy is ^xADAA47Brittle.", ifEnemyCond = "OnBrittleGround", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyOnBrittleGround", type = "check", label = "Is the enemy on ^xADAA47Brittle "..GetStyleColor('text_label').."Ground?", tooltip = "This also implies that the enemy is ^xADAA47Brittle.", ifEnemyCond = "OnBrittleGround", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Brittle", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:OnBrittleGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
@@ -1840,14 +1840,14 @@ Huge sets the radius to 11.
 	{ var = "conditionShockEffect", type = "count", label = "Effect of ^xADAA47Shock^7 (if not maximum):", ifOption = "conditionEnemyShocked", tooltip = "If you have a guaranteed source of ^xADAA47Shock^7,\nthe strongest one will apply instead unless this option would apply a stronger ^xADAA47Shock.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("ShockVal", "BASE", val, "Shock", { type = "Condition", var = "ShockedConfig" })
 	end },
-	{ var = "ShockStacks", type = "count", label = "^xADAA47Shock ^7Stacks", ifFlag = "ShockCanStack", ifOption = "conditionEnemyShocked", defaultPlaceholderState = 1, tooltip = "Amount of stacks of ^xADAA47Shock ^7applied to the enemy.", apply = function(val, modList, enemyModList)
+	{ var = "ShockStacks", type = "count", label = "^xADAA47Shock "..GetStyleColor('text_label').."Stacks", ifFlag = "ShockCanStack", ifOption = "conditionEnemyShocked", defaultPlaceholderState = 1, tooltip = "Amount of stacks of ^xADAA47Shock ^7applied to the enemy.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Multiplier:ShockStacks", "BASE", val, "Config", { type = "Condition", var = "Effective" })
 	end },
 	{ var = "conditionEnemyElectrocuted", type = "check", label = "Is the enemy ^xADAA47Electrocuted?", ifEnemyCond = "Electrocuted", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Electrocuted", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:Immobilised", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyOnShockedGround", type = "check", label = "Is the enemy on ^xADAA47Shocked ^7Ground?", tooltip = "This also implies that the enemy is ^xADAA47Shocked.", ifEnemyCond = "OnShockedGround", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyOnShockedGround", type = "check", label = "Is the enemy on ^xADAA47Shocked "..GetStyleColor('text_label').."Ground?", tooltip = "This also implies that the enemy is ^xADAA47Shocked.", ifEnemyCond = "OnShockedGround", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Shocked", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:OnShockedGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
@@ -1858,11 +1858,11 @@ Huge sets the radius to 11.
 	{ var = "conditionSapEffect", type = "count", label = "Effect of ^xADAA47Sap:", ifOption = "conditionEnemySapped", tooltip = "If you have a guaranteed source of ^xADAA47Sap^7,\nthe strongest one will apply instead unless this option would apply a stronger ^xADAA47Sap.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("SapVal", "BASE", val, "Sap", { type = "Condition", var = "SappedConfig" })
 	end },
-	{ var = "conditionEnemyOnSappedGround", type = "check", label = "Is the enemy on ^xADAA47Sapped ^7Ground?", tooltip = "This also implies that the enemy is ^xADAA47Sapped.", ifEnemyCond = "OnSappedGround", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyOnSappedGround", type = "check", label = "Is the enemy on ^xADAA47Sapped "..GetStyleColor('text_label').."Ground?", tooltip = "This also implies that the enemy is ^xADAA47Sapped.", ifEnemyCond = "OnSappedGround", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:Sapped", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 		enemyModList:NewMod("Condition:OnSappedGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "multiplierFreezeShockIgniteOnEnemy", type = "count", label = "# of ^x3F6DB3Freeze ^7/ ^xADAA47Shock ^7/ ^xB97123Ignite ^7on enemy:", ifMult = "FreezeShockIgniteOnEnemy", apply = function(val, modList, enemyModList)
+	{ var = "multiplierFreezeShockIgniteOnEnemy", type = "count", label = "# of ^x3F6DB3Freeze ^7/ ^xADAA47Shock ^7/ ^xB97123Ignite "..GetStyleColor('text_label').."on enemy:", ifMult = "FreezeShockIgniteOnEnemy", apply = function(val, modList, enemyModList)
 		modList:NewMod("Multiplier:FreezeShockIgniteOnEnemy", "BASE", val, "Config", { type = "Condition", var = "Effective" })
 	end },
 	{ var = "conditionEnemyFireExposure", type = "check", label = "Is the enemy Exposed to ^xB97123Fire?", ifFlag = "Condition:CanApplyFireExposure", tooltip = "This applies -20% ^xB97123Fire Resistance ^7to the enemy.", apply = function(val, modList, enemyModList)
@@ -1912,7 +1912,7 @@ Huge sets the radius to 11.
 	{ var = "conditionEnemyOnConsecratedGround", type = "check", label = "Is the enemy on Consecrated Ground?", ifEnemyCond = "OnConsecratedGround", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:OnConsecratedGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyHaveEnergyShield", type = "check", label = "Does the enemy have ^x88FFFFEnergy Shield^7?", ifEnemyCond = "HaveEnergyShield", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyHaveEnergyShield", type = "check", label = "Does the enemy have ^x88FFFFEnergy Shield"..GetStyleColor('text_label').."?", ifEnemyCond = "HaveEnergyShield", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:HaveEnergyShield", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
 	{ var = "conditionEnemyOnProfaneGround", type = "check", label = "Is the enemy on Profane Ground?", ifFlag = "Condition:CreateProfaneGround", tooltip = "Enemies on Profane Ground receive the following modifiers:\n\t10% increased Effect of Curses\n\t100% increased chance to be Critically Hit", apply = function(val, modList, enemyModList)
@@ -1926,19 +1926,19 @@ Huge sets the radius to 11.
 	{ var = "conditionEnemyOnFungalGround", type = "check", label = "Is the enemy on Fungal Ground?", ifCond = { "OnFungalGround", "CreateFungalGround" }, tooltip = "Enemies on your Fungal Ground have -10% to all Resistances.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:OnFungalGround", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyInChillingArea", type = "check", label = "Is the enemy in a ^x3F6DB3Chilling ^7area?", ifEnemyCond = "InChillingArea", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyInChillingArea", type = "check", label = "Is the enemy in a ^x3F6DB3Chilling "..GetStyleColor('text_label').."area?", ifEnemyCond = "InChillingArea", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:InChillingArea", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
 	{ var = "conditionEnemyInFrostGlobe", type = "check", label = "Is the enemy in the Frost Shield area?", ifEnemyCond = "EnemyInFrostGlobe", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:EnemyInFrostGlobe", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "enemyConditionHitByFireDamage", type = "check", label = "Enemy was Hit by ^xB97123Fire ^7Damage?", ifFlag = "ElementalEquilibrium", apply = function(val, modList, enemyModList)
+	{ var = "enemyConditionHitByFireDamage", type = "check", label = "Enemy was Hit by ^xB97123Fire "..GetStyleColor('text_label').."Damage?", ifFlag = "ElementalEquilibrium", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:HitByFireDamage", "FLAG", true, "Config")
 	end },
-	{ var = "enemyConditionHitByColdDamage", type = "check", label = "Enemy was Hit by ^x3F6DB3Cold ^7Damage?", ifFlag = "ElementalEquilibrium", apply = function(val, modList, enemyModList)
+	{ var = "enemyConditionHitByColdDamage", type = "check", label = "Enemy was Hit by ^x3F6DB3Cold "..GetStyleColor('text_label').."Damage?", ifFlag = "ElementalEquilibrium", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:HitByColdDamage", "FLAG", true, "Config")
 	end },
-	{ var = "enemyConditionHitByLightningDamage", type = "check", label = "Enemy was Hit by ^xADAA47Light. ^7Damage?", ifFlag = "ElementalEquilibrium", apply = function(val, modList, enemyModList)
+	{ var = "enemyConditionHitByLightningDamage", type = "check", label = "Enemy was Hit by ^xADAA47Light. "..GetStyleColor('text_label').."Damage?", ifFlag = "ElementalEquilibrium", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:HitByLightningDamage", "FLAG", true, "Config")
 	end },
 	{ var = "enemyInRFOrScorchingRay", type = "check", label = "Is the enemy in RF or Scorching Ray:", ifCond = "InRFOrScorchingRay", ifSkill = { "Righteous Fire", "Scorching Ray" }, includeTransfigured = true, apply = function(val, modList, enemyModList)
@@ -1948,13 +1948,13 @@ Huge sets the radius to 11.
 	{ var = "conditionBetweenYouAndLinkedTarget", type = "check", label = "Is the enemy in your Link beams?", ifEnemyCond = "BetweenYouAndLinkedTarget", tooltip = "This option sets whether an enemy is between you and your linked target.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("Condition:BetweenYouAndLinkedTarget", "FLAG", true, "Config", { type = "Condition", var = "Effective" })
 	end },
-	{ var = "conditionEnemyFireResZero", type = "check", label = "Enemy hit you with ^xB97123Fire Damage^7?", ifFlag = "Condition:HaveTrickstersSmile", tooltip = "This option sets whether or not the enemy has hit you with ^xB97123Fire Damage^7 in the last 4 seconds.", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyFireResZero", type = "check", label = "Enemy hit you with ^xB97123Fire Damage"..GetStyleColor('text_label').."?", ifFlag = "Condition:HaveTrickstersSmile", tooltip = "This option sets whether or not the enemy has hit you with ^xB97123Fire Damage^7 in the last 4 seconds.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("FireResist", "OVERRIDE", 0, "Config", { type = "Condition", var = "Effective"}, { type = "ActorCondition", actor = "enemy", var = "HaveTrickstersSmile" })
 	end },
-	{ var = "conditionEnemyColdResZero", type = "check", label = "Enemy hit you with ^x3F6DB3Cold Damage^7?", ifFlag = "Condition:HaveTrickstersSmile", tooltip = "This option sets whether or not the enemy has hit you with ^x3F6DB3Cold Damage^7 in the last 4 seconds.", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyColdResZero", type = "check", label = "Enemy hit you with ^x3F6DB3Cold Damage"..GetStyleColor('text_label').."?", ifFlag = "Condition:HaveTrickstersSmile", tooltip = "This option sets whether or not the enemy has hit you with ^x3F6DB3Cold Damage^7 in the last 4 seconds.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("ColdResist", "OVERRIDE", 0, "Config", { type = "Condition", var = "Effective"}, { type = "ActorCondition", actor = "enemy", var = "HaveTrickstersSmile" })
 	end },
-	{ var = "conditionEnemyLightningResZero", type = "check", label = "Enemy hit you with ^xADAA47Light. Damage^7?", ifFlag = "Condition:HaveTrickstersSmile", tooltip = "This option sets whether or not the enemy has hit you with ^xADAA47Lightning Damage^7 in the last 4 seconds.", apply = function(val, modList, enemyModList)
+	{ var = "conditionEnemyLightningResZero", type = "check", label = "Enemy hit you with ^xADAA47Light. Damage"..GetStyleColor('text_label').."?", ifFlag = "Condition:HaveTrickstersSmile", tooltip = "This option sets whether or not the enemy has hit you with ^xADAA47Lightning Damage^7 in the last 4 seconds.", apply = function(val, modList, enemyModList)
 		enemyModList:NewMod("LightningResist", "OVERRIDE", 0, "Config", { type = "Condition", var = "Effective"}, { type = "ActorCondition", actor = "enemy", var = "HaveTrickstersSmile" })
 	end },
 	-- Section: Enemy Stats
diff --git a/src/Modules/Main.lua b/src/Modules/Main.lua
index a9e86a5a8..f8166d314 100644
--- a/src/Modules/Main.lua
+++ b/src/Modules/Main.lua
@@ -22,6 +22,7 @@ LoadModule("Modules/ModTools")
 LoadModule("Modules/ItemTools")
 LoadModule("Modules/CalcTools")
 LoadModule("Modules/BuildSiteTools")
+LoadModule("Modules/Style")
 
 --[[if launch.devMode then
 	for skillName, skill in pairs(data.enchantments.Helmet) do
@@ -106,6 +107,7 @@ function main:Init()
 	self.defaultItemQuality = 20
 	self.showTitlebarName = true
 	self.dpiScaleOverridePercent = GetDPIScaleOverridePercent and GetDPIScaleOverridePercent() or 0
+	self.activeTheme = "classic"
 	self.showWarnings = true
 	self.slotOnlyTooltips = true
 	self.migrateAugments = true
@@ -413,20 +415,21 @@ function main:OnFrame()
 			end
 		end
 		if self.toastMode then
-			SetDrawColor(0.85, 0.85, 0.85)
+			SetDrawStyle('toast_border')
 			DrawImage(nil, 0, self.screenH - self.mainBarHeight, 312, self.mainBarHeight)
-			SetDrawColor(0.1, 0.1, 0.1)
+			SetDrawStyle('toast_background')
 			DrawImage(nil, 0, self.screenH - self.mainBarHeight + 4, 308, self.mainBarHeight - 4)
-			SetDrawColor(1, 1, 1)
-			DrawString(4, self.screenH - self.mainBarHeight + 8, "LEFT", 20, "VAR", self.toastMessages[1]:gsub("\n.*",""))
-			DrawString(4, self.screenH - self.mainBarHeight + 28, "LEFT", 16, "VAR", self.toastMessages[1]:gsub("^[^\n]*\n?",""))
+			SetDrawStyle('text_toast_heading')
+			StyledDrawString(4, self.screenH - self.mainBarHeight + 8, "LEFT", 20, 'text_toast_heading', self.toastMessages[1]:gsub("\n.*",""))
+			SetDrawStyle('text_toast')
+			StyledDrawString(4, self.screenH - self.mainBarHeight + 28, "LEFT", 16, 'text_toast', self.toastMessages[1]:gsub("^[^\n]*\n?",""))
 		end
 	end
 
-	-- Draw main controls
-	SetDrawColor(0.85, 0.85, 0.85)
+	-- Draw main controls (bottom left corner)
+	SetDrawStyle('main_control_border')
 	DrawImage(nil, 0, self.screenH - 58, 312, 58)
-	SetDrawColor(0.1, 0.1, 0.1)
+	SetDrawStyle('main_control_background')
 	DrawImage(nil, 0, self.screenH - 54, 308, 54)
 	self:DrawControls(self.viewPort)
 
@@ -439,6 +442,7 @@ function main:OnFrame()
 	end
 
 	if self.showDragText then
+		-- TODO: what is drawn here?
 		local cursorX, cursorY = GetCursorPos()
 		local strWidth = DrawStringWidth(16, "VAR", self.showDragText)
 		SetDrawLayer(20, 0)
@@ -666,6 +670,10 @@ function main:LoadSettings(ignoreBuild)
 					self.dpiScaleOverridePercent = tonumber(node.attrib.dpiScaleOverridePercent) or 0
 					SetDPIScaleOverridePercent(self.dpiScaleOverridePercent)
 				end
+				if node.attrib.activeTheme then
+					self.activeTheme = node.attrib.activeTheme
+					SetActiveTheme(self.activeTheme)
+				end
 			end
 		end
 	end
@@ -797,7 +805,8 @@ function main:SaveSettings()
 		showFlavourText = tostring(self.showFlavourText),
 		showAnimations = tostring(self.showAnimations),
 		showAllItemAffixes = tostring(self.showAllItemAffixes),
-		dpiScaleOverridePercent = tostring(self.dpiScaleOverridePercent)
+		dpiScaleOverridePercent = tostring(self.dpiScaleOverridePercent),
+		activeTheme = self.activeTheme
 	} })
 	local res, errMsg = common.xml.SaveXMLFile(setXML, self.userPath.."Settings.xml")
 	if not res then
@@ -881,7 +890,8 @@ function main:OpenOptionsPopup(savedState)
 		showFlavourText = self.showFlavourText,
 		showAnimations = self.showAnimations,
 		showAllItemAffixes = self.showAllItemAffixes,
-		dpiScaleOverridePercent = self.dpiScaleOverridePercent
+		dpiScaleOverridePercent = self.dpiScaleOverridePercent,
+		activeTheme = self.activeTheme,
 	}
 
 	-- NOTE: Height needs to be adjusted if more menu options are added
@@ -911,10 +921,10 @@ function main:OpenOptionsPopup(savedState)
 
 	-- local func to make a new section header
 	local function drawSectionHeader(id, title, omitHorizontalLine)
-		local headerBGColor ={ .6, .6, .6}
-		controls["section-"..id .. "-bg"] = new("RectangleOutlineControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + scrollBarWidth + 8, currentY, columnWidth - (scrollBarWidth * 2) - 17, 26 }, headerBGColor, 1)
+		local headerBGstyle = 'rectangle_outline_border'
+		controls["section-"..id .. "-bg"] = new("RectangleOutlineControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + scrollBarWidth + 8, currentY, columnWidth - (scrollBarWidth * 2) - 17, 26 }, headerBGstyle, 1)
 		nextRow(.2)
-		controls["section-"..id .. "-label"] = new("LabelControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + columnWidth / 2 - 60, currentY, 0, 16 }, "^7" .. title)
+		controls["section-"..id .. "-label"] = new("LabelControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + columnWidth / 2 - 60, currentY, 0, 16 }, GetStyleColor('text_heading') .. title)
 		nextRow(1.5)
 	end
 
@@ -930,7 +940,7 @@ function main:OpenOptionsPopup(savedState)
 	}, function(index, value)
 		self.connectionProtocol = value.protocol
 	end)
-	controls.connectionProtocolLabel = new("LabelControl", { "RIGHT", controls.connectionProtocol, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Connection Protocol:")
+	controls.connectionProtocolLabel = new("LabelControl", { "RIGHT", controls.connectionProtocol, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Connection Protocol:")
 	controls.connectionProtocol.tooltipText = "Changes which protocol is used when downloading updates and importing builds."
 	controls.connectionProtocol:SelByValue(launch.connectionProtocol, "protocol")
 
@@ -940,7 +950,7 @@ function main:OpenOptionsPopup(savedState)
 		{ label = "SOCKS", scheme = "socks5" },
 		{ label = "SOCKS5H", scheme = "socks5h" },
 	})
-	controls.proxyLabel = new("LabelControl", { "RIGHT", controls.proxyType, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Proxy server:")
+	controls.proxyLabel = new("LabelControl", { "RIGHT", controls.proxyType, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Proxy server:")
 	controls.proxyURL = new("EditControl", { "LEFT", controls.proxyType, "RIGHT" }, { 4, 0, 206, 18 })
 
 	if launch.proxyURL then
@@ -966,13 +976,13 @@ function main:OpenOptionsPopup(savedState)
 		self:ClosePopup()
 		self:OpenOptionsPopup(savedState)
 	end)
-	controls.dpiScaleOverrideLabel = new("LabelControl", { "RIGHT", controls.dpiScaleOverride, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7UI scaling override:")
+	controls.dpiScaleOverrideLabel = new("LabelControl", { "RIGHT", controls.dpiScaleOverride, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "UI scaling override:")
 	controls.dpiScaleOverride.tooltipText = "Overrides Windows DPI scaling inside Path of Building.\nChoose a percentage between 100% and 250% or revert to the system default."
 	controls.dpiScaleOverride:SelByValue(self.dpiScaleOverridePercent, "percent")
 
 	nextRow()
 	controls.buildPath = new("EditControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 290, 18 })
-	controls.buildPathLabel = new("LabelControl", { "RIGHT", controls.buildPath, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Build save path:")
+	controls.buildPathLabel = new("LabelControl", { "RIGHT", controls.buildPath, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Build save path:")
 	if self.buildPath ~= self.defaultBuildPath then
 		controls.buildPath:SetText(self.buildPath)
 	end
@@ -986,7 +996,7 @@ function main:OpenOptionsPopup(savedState)
 	}, function(index, value)
 		self.nodePowerTheme = value.theme
 	end)
-	controls.nodePowerThemeLabel = new("LabelControl", { "RIGHT", controls.nodePowerTheme, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Node Power colours:")
+	controls.nodePowerThemeLabel = new("LabelControl", { "RIGHT", controls.nodePowerTheme, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Node Power colours:")
 	controls.nodePowerTheme.tooltipText = "Changes the colour scheme used for the node power display on the passive tree."
 	controls.nodePowerTheme:SelByValue(self.nodePowerTheme, "theme")
 
@@ -998,7 +1008,7 @@ function main:OpenOptionsPopup(savedState)
 			self.colorPositive = buf
 		end
 	end)
-	controls.colorPositiveLabel = new("LabelControl", { "RIGHT", controls.colorPositive, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Hex colour for positive values:")
+	controls.colorPositiveLabel = new("LabelControl", { "RIGHT", controls.colorPositive, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Hex colour for positive values:")
 	controls.colorPositive.tooltipText = "Overrides the default hex colour for positive values in breakdowns. \nExpected format is 0x000000. " ..
 		"The default value is " .. tostring(defaultColorCodes.POSITIVE:gsub('^(^)', '0')) .. ".\nIf updating while inside a build, please re-load the build after saving."
 
@@ -1010,7 +1020,7 @@ function main:OpenOptionsPopup(savedState)
 			self.colorNegative = buf
 		end
 	end)
-	controls.colorNegativeLabel = new("LabelControl", { "RIGHT", controls.colorNegative, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Hex colour for negative values:")
+	controls.colorNegativeLabel = new("LabelControl", { "RIGHT", controls.colorNegative, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Hex colour for negative values:")
 	controls.colorNegative.tooltipText = "Overrides the default hex colour for negative values in breakdowns. \nExpected format is 0x000000. " ..
 		"The default value is " .. tostring(defaultColorCodes.NEGATIVE:gsub('^(^)', '0')) .. ".\nIf updating while inside a build, please re-load the build after saving."
 
@@ -1023,37 +1033,49 @@ function main:OpenOptionsPopup(savedState)
 			self.colorHighlight = buf
 		end
 	end)
-	controls.colorHighlightLabel = new("LabelControl", { "RIGHT", controls.colorHighlight, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Hex colour for highlight nodes:")
+	controls.colorHighlightLabel = new("LabelControl", { "RIGHT", controls.colorHighlight, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Hex colour for highlight nodes:")
 	controls.colorHighlight.tooltipText = "Overrides the default hex colour for highlighting nodes in passive tree search. \nExpected format is 0x000000. " ..
 		"The default value is " .. tostring(defaultColorCodes.HIGHLIGHT:gsub('^(^)', '0')) .."\nIf updating while inside a build, please re-load the build after saving."
 
 	nextRow()
-	controls.betaTest = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Opt-in to weekly beta test builds:", function(state)
+	controls.betaTest = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Opt-in to weekly beta test builds:", function(state)
 		self.betaTest = state
 	end)
 
 	nextRow()
-	controls.edgeSearchHighlight = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20}, "^7Show search circles at viewport edge", function(state)
+	controls.edgeSearchHighlight = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20}, "Show search circles at viewport edge", function(state)
 		self.edgeSearchHighlight = state
 	end)
 
 	nextRow()
-	controls.showFlavourText = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Styled Tooltips with Flavour Text:", function(state)
+	controls.showFlavourText = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Styled Tooltips with Flavour Text:", function(state)
 		self.showFlavourText = state
 	end)
 	controls.showFlavourText.tooltipText = "If updating while inside a build, please re-load the build after saving."
 
 	nextRow()
-	controls.showAnimations = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show Animations:", function(state)
+	controls.showAnimations = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show Animations:", function(state)
 		self.showAnimations = state
 	end)
 	
 	nextRow()
-	controls.showAllItemAffixes = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show all item affixes sliders:", function(state)
+	controls.showAllItemAffixes = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show all item affixes sliders:", function(state)
 		self.showAllItemAffixes = state
 	end)
 	controls.showAllItemAffixes.tooltipText = "Display all item affix slots as a stacked list instead of hiding them in dropdowns"
 
+	nextRow()
+	controls.theme = new("DropDownControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 150, 18 }, {
+		{ label = "Classic", themeIdentifier = "classic" },
+		{ label = "Dark", themeIdentifier = "dark" },
+	}, function(index, value)
+		self.activeTheme = value.themeIdentifier
+		SetActiveTheme(value.themeIdentifier)
+	end)
+	controls.themeLabel = new("LabelControl", { "RIGHT", controls.theme, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Theme:")
+	controls.theme.tooltipText = "Sets the color and font styles of PoB.\nNote: Some styles require a restart of PoB to take effect.\nAvailable Options:\nClassic - The traditional PoB experience\nDark - Dark mode inspired by the offical PoE2 trade site"
+	controls.theme:SelByValue(self.activeTheme, "themeIdentifier")
+
 	nextRow()
 	
 	local leftColumnMaxY = currentY -- store left column height
@@ -1067,7 +1089,7 @@ function main:OpenOptionsPopup(savedState)
 	-- Build-related Option Section starts
 	drawSectionHeader("build", "Build-related options")
 
-	controls.showThousandsSeparators = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT"}, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show thousands separators:", function(state)
+	controls.showThousandsSeparators = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT"}, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show thousands separators:", function(state)
 	self.showThousandsSeparators = state
 	end)
 	controls.showThousandsSeparators.state = self.showThousandsSeparators
@@ -1076,16 +1098,16 @@ function main:OpenOptionsPopup(savedState)
 	controls.thousandsSeparator = new("EditControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 30, 20 }, self.thousandsSeparator, nil, "%w", 1, function(buf)
 		self.thousandsSeparator = buf
 	end)
-	controls.thousandsSeparatorLabel = new("LabelControl", { "RIGHT", controls.thousandsSeparator, "LEFT" }, { defaultLabelSpacingPx, 0, 92, 16 }, "^7Thousands separator:")
+	controls.thousandsSeparatorLabel = new("LabelControl", { "RIGHT", controls.thousandsSeparator, "LEFT" }, { defaultLabelSpacingPx, 0, 92, 16 }, "Thousands separator:")
 
 	nextRow()
 	controls.decimalSeparator = new("EditControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 30, 20 }, self.decimalSeparator, nil, "%w", 1, function(buf)
 		self.decimalSeparator = buf
 	end)
-	controls.decimalSeparatorLabel = new("LabelControl", { "RIGHT", controls.decimalSeparator, "LEFT" }, { defaultLabelSpacingPx, 0, 92, 16 }, "^7Decimal separator:")
+	controls.decimalSeparatorLabel = new("LabelControl", { "RIGHT", controls.decimalSeparator, "LEFT" }, { defaultLabelSpacingPx, 0, 92, 16 }, "Decimal separator:")
 
 	nextRow()
-	controls.titlebarName = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show build name in window title:", function(state)
+	controls.titlebarName = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show build name in window title:", function(state)
 		self.showTitlebarName = state
 	end)
 
@@ -1094,60 +1116,60 @@ function main:OpenOptionsPopup(savedState)
 		self.defaultGemQuality = m_min(tonumber(gemQuality) or 0, 23)
 	end)
 	controls.defaultGemQuality.tooltipText = "Set the default quality that can be overwritten by build-related quality settings in the skill panel."
-	controls.defaultGemQualityLabel = new("LabelControl", { "RIGHT", controls.defaultGemQuality, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Default gem quality:")
+	controls.defaultGemQualityLabel = new("LabelControl", { "RIGHT", controls.defaultGemQuality, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Default gem quality:")
 
 	nextRow()
 	controls.defaultItemQuality = new("EditControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 80, 20 }, self.defaultItemQuality, nil, "%D", 2, function(itemQuality)
 		self.defaultItemQuality = m_min(tonumber(itemQuality) or 0, 20)
 	end)
 	controls.defaultItemQuality.tooltipText = "Set the default quality that will be applied to newly created or pasted items."
-	controls.defaultItemQualityLabel = new("LabelControl", { "RIGHT", controls.defaultItemQuality, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Default item quality:")
+	controls.defaultItemQualityLabel = new("LabelControl", { "RIGHT", controls.defaultItemQuality, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Default item quality:")
 
 	nextRow()
 	controls.defaultCharLevel = new("EditControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 80, 20 }, self.defaultCharLevel, nil, "%D", 3, function(charLevel)
 		self.defaultCharLevel = m_min(m_max(tonumber(charLevel) or 1, 1), 100)
 	end)
 	controls.defaultCharLevel.tooltipText = "Set the default level of your builds. If this is higher than 1, manual level mode will be enabled by default in new builds."
-	controls.defaultCharLevelLabel = new("LabelControl", { "RIGHT", controls.defaultCharLevel, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "^7Default character level:")
+	controls.defaultCharLevelLabel = new("LabelControl", { "RIGHT", controls.defaultCharLevel, "LEFT" }, { defaultLabelSpacingPx, 0, 0, 16 }, "Default character level:")
 
 	nextRow()
 	controls.defaultItemAffixQualitySlider = new("SliderControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 200, 20 }, function(value)
 		self.defaultItemAffixQuality = round(value, 2)
 		controls.defaultItemAffixQualityValue.label = (self.defaultItemAffixQuality * 100) .. "%"
 	end)
-	controls.defaultItemAffixQualityLabel = new("LabelControl", { "RIGHT", controls.defaultItemAffixQualitySlider, "LEFT" }, { defaultLabelSpacingPx, 0, 92, 16 }, "^7Default item affix quality:")
+	controls.defaultItemAffixQualityLabel = new("LabelControl", { "RIGHT", controls.defaultItemAffixQualitySlider, "LEFT" }, { defaultLabelSpacingPx, 0, 92, 16 }, "Default item affix quality:")
 	controls.defaultItemAffixQualityValue = new("LabelControl", { "LEFT", controls.defaultItemAffixQualitySlider, "RIGHT" }, { -defaultLabelSpacingPx, 0, 92, 16 }, "50%")
 	controls.defaultItemAffixQualitySlider.val = self.defaultItemAffixQuality
 	controls.defaultItemAffixQualityValue.label = (self.defaultItemAffixQuality * 100) .. "%"
 
 	nextRow()
-	controls.showWarnings = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show build warnings:", function(state)
+	controls.showWarnings = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show build warnings:", function(state)
 		self.showWarnings = state
 	end)
 	controls.showWarnings.state = self.showWarnings
 
 	nextRow()
-	controls.slotOnlyTooltips = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show tooltips only for affected slots:", function(state)
+	controls.slotOnlyTooltips = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show tooltips only for affected slots:", function(state)
 		self.slotOnlyTooltips = state
 	end, "Shows comparisons in tooltips only for the slot you are currently placing the item in, instead of all slots.")
 	controls.slotOnlyTooltips.state = self.slotOnlyTooltips
 
 	nextRow()
-	controls.migrateAugments = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Copy augments onto display item:", function(state)
+	controls.migrateAugments = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Copy augments onto display item:", function(state)
 		self.migrateAugments = state
 	end)
 	controls.migrateAugments.tooltipText = "Apply augments and anoints from current gear when comparing new gear, given they are possible to add to the new item."
 	controls.migrateAugments.state = self.migrateAugments
 	
 	nextRow()
-	controls.notSupportedModTooltips = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Show tooltip for unsupported mods :", function(state)
+	controls.notSupportedModTooltips = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Show tooltip for unsupported mods :", function(state)
 		self.notSupportedModTooltips = state
 	end)
 	controls.notSupportedModTooltips.tooltipText = "Show ^8(Not supported in PoB yet) ^7next to unsupported mods\nRequires PoB to restart for it to take effect"
 	controls.notSupportedModTooltips.state = self.notSupportedModTooltips
 	
 	nextRow()
-	controls.invertSliderScrollDirection = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Invert slider scroll direction:", function(state)
+	controls.invertSliderScrollDirection = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Invert slider scroll direction:", function(state)
 		self.invertSliderScrollDirection = state
 	end)
 	controls.invertSliderScrollDirection.tooltipText = "Default scroll direction is:\nScroll Up = Move right\nScroll Down = Move left"
@@ -1155,7 +1177,7 @@ function main:OpenOptionsPopup(savedState)
 	
 	if launch.devMode then
 		nextRow()
-		controls.disableDevAutoSave = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "^7Disable Dev AutoSave:", function(state)
+		controls.disableDevAutoSave = new("CheckBoxControl", { "TOPLEFT", controls.sectionAnchor, "TOPLEFT" }, { currentX + defaultLabelPlacementX, currentY, 20 }, "Disable Dev AutoSave:", function(state)
 			self.disableDevAutoSave = state
 		end)
 		controls.disableDevAutoSave.tooltipText = "Do not Autosave builds while on Dev branch"
@@ -1232,6 +1254,8 @@ function main:OpenOptionsPopup(savedState)
 		self.showAllItemAffixes = savedState.showAllItemAffixes
 		self.dpiScaleOverridePercent = savedState.dpiScaleOverridePercent
 		SetDPIScaleOverridePercent(self.dpiScaleOverridePercent)
+		self.activeTheme = savedState.activeTheme
+		SetActiveTheme(self.activeTheme)
 		main:ClosePopup()
 	end)
 	
@@ -1460,6 +1484,7 @@ function main:OpenAboutPopup(helpSectionIndex)
 end
 
 function main:DrawBackground(viewPort)
+	-- TODO: what is drawn here?
 	SetDrawLayer(nil, -100)
 	SetDrawColor(0.5, 0.5, 0.5)
 
@@ -1653,7 +1678,7 @@ function main:OpenMessagePopup(title, msg)
 	controls.close = new("ButtonControl", nil, {0, 40 + numMsgLines * 16, 80, 20}, "Ok", function()
 		main:ClosePopup()
 	end)
-	return self:OpenPopup(m_max(DrawStringWidth(16, "VAR", msg) + 30, 190), 70 + numMsgLines * 16, title, controls, "close")
+	return self:OpenPopup(m_max(StyledDrawStringWidth(16, 'text_label', msg) + 30, 190), 70 + numMsgLines * 16, title, controls, "close")
 end
 
 function main:OpenConfirmPopup(title, msg, confirmLabel, onConfirm, extraLabel, onExtra)
@@ -1663,11 +1688,11 @@ function main:OpenConfirmPopup(title, msg, confirmLabel, onConfirm, extraLabel,
 		t_insert(controls, new("LabelControl", nil, {0, 20 + numMsgLines * 16, 0, 16}, line))
 		numMsgLines = numMsgLines + 1
 	end
-	local confirmWidth = m_max(80, DrawStringWidth(16, "VAR", confirmLabel) + 10)
+	local confirmWidth = m_max(80, StyledDrawStringWidth(16, 'text_button', confirmLabel) + 10)
 	
 	if extraLabel and onExtra then
 		-- Three button layout: Continue (left), Connect Path (center), Cancel (right)
-		local extraWidth = m_max(80, DrawStringWidth(16, "VAR", extraLabel) + 10)
+		local extraWidth = m_max(80, StyledDrawStringWidth(16, 'text_button', extraLabel) + 10)
 		local cancelWidth = 80
 		local spacing = 10
 		local totalWidth = confirmWidth + extraWidth + cancelWidth + (spacing * 2)
@@ -1689,7 +1714,7 @@ function main:OpenConfirmPopup(title, msg, confirmLabel, onConfirm, extraLabel,
 		placeButton(confirmWidth, confirmLabel, onConfirm, true)
 		placeButton(extraWidth, extraLabel, onExtra)
 		placeButton(cancelWidth, "Cancel", function() end)
-		return self:OpenPopup(m_max(DrawStringWidth(16, "VAR", msg) + 30, totalWidth + 40), 70 + numMsgLines * 16, title, controls, "confirm")
+		return self:OpenPopup(m_max(StyledDrawStringWidth(16, 'text_label', msg) + 30, totalWidth + 40), 70 + numMsgLines * 16, title, controls, "confirm")
 	else
 		-- Two button layout (original)
 		controls.confirm = new("ButtonControl", nil, {-5 - m_ceil(confirmWidth/2), 40 + numMsgLines * 16, confirmWidth, 20}, confirmLabel, function()
@@ -1699,13 +1724,13 @@ function main:OpenConfirmPopup(title, msg, confirmLabel, onConfirm, extraLabel,
 		t_insert(controls, new("ButtonControl", nil, {5 + m_ceil(confirmWidth/2), 40 + numMsgLines * 16, confirmWidth, 20}, "Cancel", function()
 			main:ClosePopup()
 		end))
-		return self:OpenPopup(m_max(DrawStringWidth(16, "VAR", msg) + 30, 190), 70 + numMsgLines * 16, title, controls, "confirm")
+		return self:OpenPopup(m_max(StyledDrawStringWidth(16, 'text_label', msg) + 30, 190), 70 + numMsgLines * 16, title, controls, "confirm")
 	end
 end
 
 function main:OpenNewFolderPopup(path, onClose)
 	local controls = { }
-	controls.label = new("LabelControl", nil, {0, 20, 0, 16}, "^7Enter folder name:")
+	controls.label = new("LabelControl", nil, {0, 20, 0, 16}, "Enter folder name:")
 	controls.edit = new("EditControl", nil, {0, 40, 350, 20}, nil, nil, "\\/:%*%?\"<>|%c", 100, function(buf)
 		controls.create.enabled = buf:match("%S")
 	end)
@@ -1757,7 +1782,7 @@ function main:OpenCloudErrorPopup(fileName)
 	controls.close = new("ButtonControl", nil, {55, 40 + numMsgLines * 16, 80, 20}, "Ok", function()
 		main:ClosePopup()
 	end)
-	return self:OpenPopup(m_max(DrawStringWidth(16, "VAR", msg) + 30, 190), 70 + numMsgLines * 16, title, controls, "close")
+	return self:OpenPopup(m_max(StyledDrawStringWidth(16, 'text_label', msg) + 30, 190), 70 + numMsgLines * 16, title, controls, "close")
 end
 
 function main:SetWindowTitleSubtext(subtext)
diff --git a/src/Modules/Style.lua b/src/Modules/Style.lua
new file mode 100644
index 000000000..3edbdda3f
--- /dev/null
+++ b/src/Modules/Style.lua
@@ -0,0 +1,920 @@
+-- Path of Building
+--
+-- Module: Style
+-- Styles of Fonts and Colors used by various Classes.
+--
+
+---@alias Style
+---| "'text'"
+---| "'text_disabled'"
+---| "'text_positive'"
+---| "'text_negative'"
+---| "'text_protected'"
+---| "'text_label'"
+---| "'text_label_disabled'"
+---| "'text_heading'"
+---| "'text_tooltip'"
+---| "'text_toast'"
+---| "'text_toast_heading'"
+---| "'text_popup_title'"
+---| "'text_section_title'"
+---| "'text_calc_section_title'"
+---| "'text_calc_section_title_disabled'"
+---| "'text_calc_section_title_value'"
+---| "'text_calc_section_label'"
+---| "'text_calc_section_value'"
+---| "'text_calc_breakdown'"
+---| "'text_current_build'"
+---| "'text_button'"
+---| "'text_button_disabled'"
+---| "'text_dropdown'"
+---| "'text_dropdown_disabled'"
+---| "'text_dropdown_lowered'"
+---| "'text_list'"
+---| "'text_list_placeholder'"
+---| "'text_list_column_label'"
+---| "'text_textlist'"
+---| "'text_textbox'"
+---| "'text_textbox_disabled'"
+---| "'text_textbox_placeholder'"
+---| "'text_textbox_selection'"
+---| "'search_text_highlight_overlay'"
+---| "'selection_text_highlight_background'"
+---| "'list_background'"
+---| "'list_background_selected'"
+---| "'list_background_drag_targeted'"
+---| "'list_border'"
+---| "'list_border_selected'"
+---| "'list_border_drag_targeted'"
+---| "'list_dragindex'"
+---| "'list_dragindex_center'"
+---| "'list_entry_background'"
+---| "'list_entry_background_even'"
+---| "'list_entry_background_selected'"
+---| "'list_entry_background_focused'"
+---| "'list_entry_background_hover'"
+---| "'list_entry_border'"
+---| "'list_entry_border_selected'"
+---| "'list_entry_border_focused'"
+---| "'list_entry_border_hover'"
+---| "'list_column_label_background'"
+---| "'list_column_label_background_hover'"
+---| "'list_column_label_border'"
+---| "'list_column_label_border_hover'"
+---| "'textlist_background'"
+---| "'textlist_border'"
+---| "'textbox_background'"
+---| "'textbox_background_disabled'"
+---| "'textbox_background_selected'"
+---| "'textbox_background_hover'"
+---| "'textbox_border'"
+---| "'textbox_border_disabled'"
+---| "'textbox_border_selected'"
+---| "'textbox_border_hover'"
+---| "'dropdown_background'"
+---| "'dropdown_background_disabled'"
+---| "'dropdown_background_toggled'"
+---| "'dropdown_background_clicked'"
+---| "'dropdown_background_hover'"
+---| "'dropdown_border'"
+---| "'dropdown_border_disabled'"
+---| "'dropdown_border_toggled'"
+---| "'dropdown_border_clicked'"
+---| "'dropdown_border_hover'"
+---| "'dropdown_arrow'"
+---| "'dropdown_arrow_disabled'"
+---| "'dropdown_arrow_hover'"
+---| "'checkbox_background'"
+---| "'checkbox_background_disabled'"
+---| "'checkbox_background_toggled'"
+---| "'checkbox_background_clicked'"
+---| "'checkbox_background_hover'"
+---| "'checkbox_border'"
+---| "'checkbox_border_disabled'"
+---| "'checkbox_border_toggled'"
+---| "'checkbox_border_clicked'"
+---| "'checkbox_border_hover'"
+---| "'checkbox_checkmark'"
+---| "'checkbox_checkmark_disabled'"
+---| "'checkbox_checkmark_hover'"
+---| "'checkbox_checkimage'"
+---| "'checkbox_checkimage_disabled'"
+---| "'checkbox_checkimage_toggled'"
+---| "'checkbox_checkimage_hover'"
+---| "'slider_background'"
+---| "'slider_background_disabled'"
+---| "'slider_background_selected'"
+---| "'slider_background_hover'"
+---| "'slider_border'"
+---| "'slider_border_disabled'"
+---| "'slider_border_selected'"
+---| "'slider_border_hover'"
+---| "'slider_knob'"
+---| "'slider_knob_disabled'"
+---| "'slider_knob_selected'"
+---| "'slider_knob_hover'"
+---| "'slider_section_separator'"
+---| "'scrollbar_background'"
+---| "'scrollbar_background_disabled'"
+---| "'scrollbar_background_selected'"
+---| "'scrollbar_background_hover'"
+---| "'scrollbar_border'"
+---| "'scrollbar_border_disabled'"
+---| "'scrollbar_border_selected'"
+---| "'scrollbar_border_hover'"
+---| "'scrollbar_knob'"
+---| "'scrollbar_knob_disabled'"
+---| "'scrollbar_knob_selected'"
+---| "'scrollbar_knob_hover'"
+---| "'scrollbar_arrow'"
+---| "'scrollbar_arrow_disabled'"
+---| "'scrollbar_arrow_selected'"
+---| "'scrollbar_arrow_hover'"
+---| "'scrollbar_arrow_background'"
+---| "'scrollbar_arrow_background_disabled'"
+---| "'scrollbar_arrow_background_selected'"
+---| "'scrollbar_arrow_background_hover'"
+---| "'scrollbar_arrow_border'"
+---| "'scrollbar_arrow_border_disabled'"
+---| "'scrollbar_arrow_border_selected'"
+---| "'scrollbar_arrow_border_hover'"
+---| "'button_background'"
+---| "'button_background_disabled'"
+---| "'button_background_toggled'"
+---| "'button_background_clicked'"
+---| "'button_background_hover'"
+---| "'button_border'"
+---| "'button_border_disabled'"
+---| "'button_border_toggled'"
+---| "'button_border_clicked'"
+---| "'button_border_hover'"
+---| "'button_raised_background'"
+---| "'button_raised_background_disabled'"
+---| "'button_raised_background_toggled'"
+---| "'button_raised_background_clicked'"
+---| "'button_raised_background_hover'"
+---| "'button_raised_border'"
+---| "'button_raised_border_disabled'"
+---| "'button_raised_border_toggled'"
+---| "'button_raised_border_clicked'"
+---| "'button_raised_border_hover'"
+---| "'button_image'"
+---| "'button_image_disabled'"
+---| "'button_image_overlay_clicked'"
+---| "'dragger_background'"
+---| "'dragger_background_disabled'"
+---| "'dragger_background_dragged'"
+---| "'dragger_background_hover'"
+---| "'dragger_border'"
+---| "'dragger_border_disabled'"
+---| "'dragger_border_dragged'"
+---| "'dragger_border_hover'"
+---| "'dragger_knob'"
+---| "'dragger_knob_disabled'"
+---| "'dragger_knob_dragged'"
+---| "'dragger_knob_hover'"
+---| "'dragger_knobimage'"
+---| "'dragger_knobimage_disabled'"
+---| "'dragger_knobimage_overlay_dragged'"
+---| "'path_border'"
+---| "'path_background'"
+---| "'path_arrow'"
+---| "'calc_section_background'"
+---| "'calc_section_label_background'"
+---| "'calc_section_value_background'"
+---| "'calc_section_value_background_hover'"
+---| "'calc_breakdown_tooltip_border'"
+---| "'calc_breakdown_tooltip_border_pinned'"
+---| "'calc_breakdown_border_hover'"
+---| "'rectangle_outline_border'"
+---| "'popup_background'"
+---| "'popup_background_title'"
+---| "'popup_border'"
+---| "'popup_border_title'"
+---| "'section_background'"
+---| "'section_background_title'"
+---| "'section_border'"
+---| "'section_border_title'"
+---| "'tooltip_border'"
+---| "'tooltip_background'"
+---| "'toast_border'"
+---| "'toast_background'"
+---| "'main_control_border'"
+---| "'main_control_background'"
+---| "'top_bar_border'"
+---| "'top_bar_background'"
+---| "'side_bar_border'"
+---| "'side_bar_background'"
+---| "'bottom_bar_border'"
+---| "'bottom_bar_background'"
+---| "'current_build_box_border'"
+---| "'current_build_box_background'"
+---| "'points_box_border'"
+---| "'points_box_background'"
+
+local alignments = {
+	LEFT = "LEFT",
+	CENTER = "CENTER",
+	RIGHT = "RIGHT",
+	CENTER_X = "CENTER_X",
+	RIGHT_X = "RIGHT_X"
+}
+local fonts = {
+	FIXED = "FIXED",
+	VAR = "VAR",
+	VAR_BOLD = "VAR BOLD",
+	FONTIN_SC = "FONTIN SC",
+	FONTIN_SC_ITALIC = "FONTIN SC ITALIC",
+	FONTIN = "FONTIN",
+	FONTIN_ITALIC = "FONTIN ITALIC"
+}
+
+-- local base_colors = {
+local colors = {
+	transparent = "#00000000",
+	black = "#000000",         	-- 0% brightness
+	light_black = "#0D0D0D",		-- 5% brightness
+	dark = "#1A1A1A",          	-- 10% brightness
+	darkest_grey = "#262626",  	-- 15% brightness
+	darker_grey = "#343434",   	-- 20% brightness
+	dark_grey = "#545454",     	-- 33% brightness
+	grey = "#808080",          	-- 50% brightness
+	grey_alternative = "#999999", 	-- 66% brightness
+	light_grey = "#C8C8C8",    	-- ~80% brightness -- identical to normal rarity
+	lighter_grey = "#D9D9D9",		-- ~85% brightness
+	light = "#E2E2E2",         	-- ~90% brightness
+	white = "#FFFFFF",				-- 100% brightness
+	black_50 = "#00000080",		 	 -- 0% brightness, 50% opacity
+	black_85 = "#000000D9",			 -- 0% brightness, 85% opacity
+	white_50 = "#FFFFFF80",			 -- 100% brightness, 50% opacity
+	yellow_overlay = "#FFFF0033",
+	blue_highlight = "#7393B3",
+	red_highlight = "#C08080",
+	brownish = "#804D00",
+	green_black = "#000D00",
+	dark_green = "#349934",
+	lime = "#34FF34",
+	red = "#FF0000",
+	green = "#00FF00",
+	blue = "#0000FF",
+}
+
+local poe2trade_colors = {
+	button_raised_disabled = "#533e22",
+	button_raised_enabled = "#5a3806",
+	button_raised_hover = "#e9cf9f", -- navigation
+	button_raised_active = "#24211e80",
+	clickable_background_disabled = "#1e2124c0",
+	clickable_enabled = "#1e2124",
+	clickable_background_hover = "#2d3136",
+	clickable_active = "#646e77",
+	row_background = "#0e0f10",
+	row_background_transparency = "#2d31364d",
+	white_warm = "#fff8e1", -- label
+	brown = "#634928",   -- accent / separator/border
+	brown_transparancy = "#63492899",
+	tooltip_border = "#6f6959",
+}
+
+local themes = {
+	classic = {
+		-- text
+		text = {color = colors.white, font = fonts.VAR},
+		text_disabled = {color = colors.dark_grey, font = fonts.VAR},
+		text_dropdown_lowered = {color = colors.grey_alternative, font = fonts.VAR},
+		text_positive = {color = colorCodes.POSITIVE, font = fonts.VAR},
+		text_negative = {color = colorCodes.NEGATIVE, font = fonts.VAR},
+		text_protected = {color = colors.white, font = fonts.FIXED},
+		text_label = {color = colors.white, font = fonts.VAR},
+		text_label_disabled = {color = colors.dark_grey, font = fonts.VAR},
+		text_heading = {color = colors.white, font = fonts.VAR},
+		text_tooltip = {color = colors.white, font = fonts.VAR},
+		text_toast = {color = colors.white, font = fonts.VAR},
+		text_toast_heading = {color = colors.white, font = fonts.VAR},
+		text_popup_title = {color = colors.white, font = fonts.VAR},
+		text_section_title = {color = colors.white, font = fonts.VAR},
+		text_calc_section_title = {color = colors.white, font = fonts.VAR_BOLD},
+		text_calc_section_title_disabled = {color = colors.dark, font = fonts.VAR_BOLD}, -- is 10% brightness correct here?
+		text_calc_section_title_value = {color = colors.white, font = fonts.VAR},
+		text_calc_section_label = {color = colors.white, font = fonts.VAR},
+		text_calc_section_value = {color = colors.white, font = fonts.VAR},
+		text_calc_breakdown = {color = colors.white, font = fonts.VAR},
+		text_current_build = {color = colors.white, font = fonts.VAR},
+		text_button = {color = colors.white, font = fonts.VAR},
+		text_button_disabled = {color = colors.dark_grey, font = fonts.VAR},
+		text_dropdown = {color = colors.white, font = fonts.VAR},
+		text_dropdown_disabled = {color = colors.dark_grey, font = fonts.VAR},
+		text_list = {color = colors.white, font = fonts.VAR},
+		text_list_placeholder = {color = colors.grey, font = fonts.VAR},
+		text_list_column_label = {color = colors.white, font = fonts.VAR},
+		text_textlist = {color = colors.white, font = fonts.VAR},
+		text_textbox = {color = colors.white, font = fonts.VAR},
+		text_textbox_disabled = {color = colors.dark_grey, font = fonts.VAR},
+		text_textbox_placeholder = {color = colors.dark_grey, font = fonts.VAR},
+		text_textbox_selection = {color = colors.black, font = fonts.VAR},
+		search_text_highlight_overlay = colors.yellow_overlay,
+		selection_text_highlight_background = colors.light_grey,
+		-- list background
+		list_background = colors.black,
+		list_background_selected = colors.black,
+		list_background_drag_targeted = colors.green_black,
+		-- list border
+		list_border = colors.grey,
+		list_border_selected = colors.white,
+		list_border_drag_targeted = colors.dark_green,
+		-- list dragindex
+		list_dragindex = colors.white,
+		list_dragindex_center = colors.black,
+		-- list entry background
+		list_entry_background = colors.black,
+		list_entry_background_even = colors.light_black,
+		list_entry_background_selected = colors.darkest_grey,
+		list_entry_background_focused = colors.dark_grey,
+		list_entry_background_hover = colors.darkest_grey,
+		-- list entry border
+		list_entry_border = colors.white, -- not used yet
+		list_entry_border_selected = colors.grey,
+		list_entry_border_focused = colors.white,
+		list_entry_border_hover = colors.light_grey,
+		-- list column label background
+		list_column_label_background = colors.darkest_grey,
+		list_column_label_background_hover = colors.dark_grey,
+		-- list column label border
+		list_column_label_border = colors.grey,
+		list_column_label_border_hover = colors.white,
+		-- textlist background
+		textlist_background = colors.light_black,
+		-- textlist border
+		textlist_border = colors.grey_alternative,
+		-- textbox background
+		textbox_background = colors.black,
+		textbox_background_disabled = colors.black,
+		textbox_background_selected = colors.dark,
+		textbox_background_hover = colors.dark,
+		-- textbox border
+		textbox_border = colors.grey,
+		textbox_border_disabled = colors.dark_grey,
+		textbox_border_selected = colors.white,
+		textbox_border_hover = colors.white,
+		textbox_border_highlight = colors.blue_highlight,
+		textbox_border_highlight_negative = colors.red_highlight,
+		-- dropdown background
+		dropdown_background = colors.black,
+		dropdown_background_disabled = colors.black,
+		dropdown_background_toggled = colors.dark_grey,
+		dropdown_background_clicked = colors.grey,
+		dropdown_background_hover = colors.dark_grey,
+		-- dropdown border
+		dropdown_border = colors.grey,
+		dropdown_border_disabled = colors.dark_grey,
+		dropdown_border_toggled = colors.white,
+		dropdown_border_clicked = colors.grey,
+		dropdown_border_hover = colors.white,
+		dropdown_border_highlight = colors.blue_highlight,
+		dropdown_border_highlight_negative = colors.red_highlight,
+		-- dropdown arrow
+		dropdown_arrow = colors.light_grey,
+		dropdown_arrow_disabled = colors.dark_grey,
+		dropdown_arrow_hover = colors.white,
+		-- checkbox background
+		checkbox_background = colors.black,
+		checkbox_background_disabled = colors.black,
+		checkbox_background_toggled = colors.dark_grey,
+		checkbox_background_clicked = colors.grey,
+		checkbox_background_hover = colors.dark_grey,
+		-- checkbox border
+		checkbox_border = colors.grey,
+		checkbox_border_disabled = colors.dark_grey,
+		checkbox_border_toggled = colors.light_grey,
+		checkbox_border_clicked = colors.grey,
+		checkbox_border_hover = colors.white,
+		checkbox_border_highlight = colors.blue_highlight,
+		checkbox_border_highlight_negative = colors.red_highlight,
+		-- checkbox checkmark
+		checkbox_checkmark = colors.light_grey,
+		checkbox_checkmark_disabled = colors.dark_grey,
+		checkbox_checkmark_hover = colors.white,
+		-- checkbox checkimage
+		checkbox_checkimage = colors.grey,
+		checkbox_checkimage_disabled = colors.dark_grey,
+		checkbox_checkimage_toggled = colors.white,
+		checkbox_checkimage_hover = colors.white,
+		-- slider background
+		slider_background = colors.black,
+		slider_background_disabled = colors.black,
+		slider_background_selected = colors.black,
+		slider_background_hover = colors.black,
+		-- slider border
+		slider_border = colors.grey,
+		slider_border_disabled = colors.dark_grey,
+		slider_border_selected = colors.white,
+		slider_border_hover = colors.white,
+		-- slider knob
+		slider_knob = colors.grey,
+		slider_knob_disabled = colors.dark_grey,
+		slider_knob_selected = colors.white,
+		slider_knob_hover = colors.white,
+		slider_section_separator = colors.dark_grey,
+		-- scrollbar background
+		scrollbar_background = colors.black,
+		scrollbar_background_disabled = colors.black,
+		scrollbar_background_selected = colors.black,
+		scrollbar_background_hover = colors.black,
+		-- scrollbar border
+		scrollbar_border = colors.grey,
+		scrollbar_border_disabled = colors.dark_grey,
+		scrollbar_border_selected = colors.white,
+		scrollbar_border_hover = colors.white,
+		-- scrollbar knob
+		scrollbar_knob = colors.grey,
+		scrollbar_knob_disabled = colors.dark_grey,
+		scrollbar_knob_selected = colors.white,
+		scrollbar_knob_hover = colors.white,
+		-- scrollbar arrow
+		scrollbar_arrow = colors.grey,
+		scrollbar_arrow_disabled = colors.dark_grey,
+		scrollbar_arrow_selected = colors.white,
+		scrollbar_arrow_hover = colors.white,
+		-- scrollbar arrow background
+		scrollbar_arrow_background = colors.black,
+		scrollbar_arrow_background_disabled = colors.black,
+		scrollbar_arrow_background_selected = colors.dark_grey,
+		scrollbar_arrow_background_hover = colors.dark_grey,
+		-- scrollbar arrow border
+		scrollbar_arrow_border = colors.grey,
+		scrollbar_arrow_border_disabled = colors.dark_grey,
+		scrollbar_arrow_border_selected = colors.white,
+		scrollbar_arrow_border_hover = colors.white,
+		-- button background
+		button_background = colors.black,
+		button_background_disabled = colors.black,
+		button_background_toggled = colors.dark_grey,
+		button_background_clicked = colors.grey,
+		button_background_hover = colors.dark_grey,
+		-- button border
+		button_border = colors.grey,
+		button_border_disabled = colors.dark_grey,
+		button_border_toggled = colors.white,
+		button_border_clicked = colors.grey,
+		button_border_hover = colors.white,
+		-- button raised background
+		button_raised = colors.white,
+		button_raised_disabled = colors.dark_grey,
+		button_raised_toggled = colors.dark_grey,
+		button_raised_clicked = "#FFFFFF80",
+		button_raised_hover = colors.dark_grey,
+		-- button raised border
+		button_raised_border = colors.white,
+		button_raised_border_disabled = colors.dark_grey,
+		button_raised_border_toggled = colors.dark_grey,
+		button_raised_border_clicked = "#FFFFFF80",
+		button_raised_border_hover = colors.dark_grey,
+		-- button image
+		button_image = colors.white,
+		button_image_disabled = colors.dark_grey,
+		button_image_overlay_clicked = colors.white_50,
+		-- dragger background
+		dragger_background = colors.black,
+		dragger_background_disabled = colors.black,
+		dragger_background_dragged = colors.grey,
+		dragger_background_hover = colors.dark_grey,
+		-- dragger border
+		dragger_border = colors.grey,
+		dragger_border_disabled = colors.dark_grey,
+		dragger_border_dragged = colors.white,
+		dragger_border_hover = colors.white,
+		-- dragger knob
+		dragger_knob = colors.grey,
+		dragger_knob_disabled = colors.dark_grey,
+		dragger_knob_dragged = colors.white,
+		dragger_knob_hover = colors.white,
+		-- dragger knobimage
+		dragger_knobimage = colors.white,
+		dragger_knobimage_disabled = colors.dark_grey,
+		dragger_knobimage_overlay_dragged = colors.white_50,
+		-- path 
+		path_background = colors.black,
+		path_border = colors.grey,
+		path_arrow = colors.white,
+		-- calc section 
+		calc_section_background = colors.dark,
+		calc_section_label_background = colors.black,
+		calc_section_value_background = colors.black,
+		calc_section_value_background_hover = colors.black,
+		-- calc breakdown
+		calc_breakdown_tooltip_border = colors.dark_green,
+		calc_breakdown_tooltip_border_pinned = colors.lime,
+		calc_breakdown_border_hover = colors.lime,
+		-- rectangle outline
+		rectangle_outline_border = colors.white,
+		-- popup background
+		popup_background = colors.dark,
+		popup_background_title = colors.black,
+		-- popup border
+		popup_border = colors.light_grey,
+		popup_border_title = colors.white,
+		-- section background
+		section_background = colors.dark,
+		section_background_title = colors.black,
+		-- section border
+		section_border = colors.grey_alternative,
+		section_border_title = colors.grey_alternative,
+		-- tooltip
+		tooltip_background = colors.black_85,
+		tooltip_border = colors.brownish,
+		-- toast (popups in the bottom left corner)
+		toast_background = colors.dark,
+		toast_border = colors.lighter_grey,
+		-- main control (bottom left corner)
+		main_control_background = colors.dark,
+		main_control_border = colors.lighter_grey,
+		-- top bar
+		top_bar_background = colors.darker_grey,
+		top_bar_border = colors.lighter_grey,
+		-- side bar
+		side_bar_background = colors.dark,
+		side_bar_border = colors.lighter_grey,
+		-- bottom bar
+		bottom_bar_background = colors.light_black,
+		bottom_bar_border = colors.lighter_grey,
+		-- current build (box behind build name)
+		current_build_box_background = colors.black,
+		current_build_box_border = colors.grey,
+		-- points (box behind skill points at the top)
+		points_box_background = colors.black,
+		points_box_border = colors.grey,
+	},
+	dark = {
+		-- text
+		text = {color = colors.light, font = fonts.FONTIN_SC},
+		text_disabled = {color = colors.grey, font = fonts.FONTIN_SC},
+		text_dropdown_lowered = {color = colors.grey_alternative, font = fonts.FONTIN_SC},
+		text_positive = {color = colorCodes.POSITIVE, font = fonts.FONTIN_SC},
+		text_negative = {color = colorCodes.NEGATIVE, font = fonts.FONTIN_SC},
+		text_protected = {color = colors.light, font = fonts.FIXED},
+		text_label = {color = poe2trade_colors.white_warm, font = fonts.FONTIN_SC},
+		text_label_disabled = {color = colors.grey, font = fonts.FONTIN_SC},
+		text_heading = {color = poe2trade_colors.button_raised_hover, font = fonts.FONTIN_SC},
+		text_tooltip = {color = colors.light, font = fonts.FONTIN},
+		text_toast = {color = colors.light, font = fonts.FONTIN},
+		text_toast_heading = {color = colors.white, font = fonts.FONTIN},
+		text_popup_title = {color = poe2trade_colors.button_raised_hover, font = fonts.FONTIN_SC},
+		text_section_title = {color = poe2trade_colors.button_raised_hover, font = fonts.FONTIN_SC},
+		text_calc_section_title = {color = poe2trade_colors.white_warm, font = fonts.FONTIN_SC},
+		text_calc_section_title_disabled = {color = colors.grey, font = fonts.FONTIN_SC},
+		text_calc_section_title_value = {color = colors.white, font = fonts.FONTIN},
+		text_calc_section_label = {color = colors.white, font = fonts.FONTIN},
+		text_calc_section_value = {color = colors.white, font = fonts.FONTIN},
+		text_calc_breakdown = {color = colors.white, font = fonts.FONTIN},
+		text_current_build = {color = colors.light, font = fonts.FONTIN},
+		text_button = {color = colors.light, font = fonts.FONTIN_SC},
+		text_button_disabled = {color = colors.grey, font = fonts.FONTIN_SC},
+		text_dropdown = {color = colors.light, font = fonts.FONTIN_SC},
+		text_dropdown_disabled = {color = colors.grey, font = fonts.FONTIN_SC},
+		text_list = {color = colors.light, font = fonts.FONTIN_SC},
+		text_list_placeholder = {color = colors.grey, font = fonts.FONTIN},
+		text_list_column_label = {color = colors.light, font = fonts.FONTIN_SC},
+		text_textlist = {color = colors.light, font = fonts.FONTIN},
+		text_textbox = {color = colors.light, font = fonts.FONTIN},
+		text_textbox_disabled = {color = colors.grey, font = fonts.FONTIN},
+		text_textbox_placeholder = {color = colors.grey, font = fonts.FONTIN},
+		text_textbox_selection = {color = colors.black, font = fonts.FONTIN},
+		search_text_highlight_overlay = colors.yellow_overlay,
+		selection_text_highlight_background = colors.light_grey,
+		-- list background
+		list_background = poe2trade_colors.row_background,
+		list_background_selected = poe2trade_colors.row_background,
+		list_background_drag_targeted = colors.green_black,
+		-- list border
+		list_border = poe2trade_colors.clickable_background_hover,
+		list_border_selected = poe2trade_colors.clickable_active,
+		list_border_drag_targeted = colors.dark_green,
+		-- list dragindex
+		list_dragindex = colors.light,
+		list_dragindex_center = poe2trade_colors.white_warm,
+		-- list entry background
+		list_entry_background = poe2trade_colors.row_background,
+		list_entry_background_even = colors.light_black,
+		list_entry_background_selected = colors.dark,
+		list_entry_background_focused = colors.darker_grey,
+		list_entry_background_hover = colors.darkest_grey,
+		-- list entry border
+		list_entry_border = colors.white, -- not used yet
+		list_entry_border_selected = poe2trade_colors.clickable_background_hover,
+		list_entry_border_focused = colors.grey,
+		list_entry_border_hover = poe2trade_colors.clickable_active,
+		-- list column label background
+		list_column_label_background = poe2trade_colors.clickable_enabled,
+		list_column_label_background_hover = poe2trade_colors.clickable_background_hover,
+		-- list column label border
+		list_column_label_border = poe2trade_colors.clickable_background_hover,
+		list_column_label_border_hover = poe2trade_colors.clickable_active,
+		-- textlist background
+		textlist_background = poe2trade_colors.row_background,
+		-- textlist border
+		textlist_border = poe2trade_colors.clickable_background_hover,
+		-- textbox background
+		textbox_background = colors.dark,
+		textbox_background_disabled = poe2trade_colors.clickable_enabled,
+		textbox_background_selected = colors.dark,
+		textbox_background_hover = colors.dark,
+		-- textbox border
+		textbox_border = poe2trade_colors.clickable_background_hover,
+		textbox_border_disabled = colors.transparent,
+		textbox_border_selected = poe2trade_colors.clickable_active,
+		textbox_border_hover = poe2trade_colors.clickable_background_hover,
+		textbox_border_highlight = colors.blue_highlight,
+		textbox_border_highlight_negative = colors.red_highlight,
+		-- dropdown background
+		dropdown_background = poe2trade_colors.clickable_enabled,
+		dropdown_background_disabled = poe2trade_colors.clickable_background_disabled,
+		dropdown_background_toggled = poe2trade_colors.clickable_active,
+		dropdown_background_clicked = poe2trade_colors.clickable_active,
+		dropdown_background_hover = poe2trade_colors.clickable_background_hover,
+		-- dropdown border
+		dropdown_border = poe2trade_colors.clickable_background_hover,
+		dropdown_border_disabled = colors.transparent,
+		dropdown_border_toggled = poe2trade_colors.clickable_active,
+		dropdown_border_clicked = poe2trade_colors.clickable_active,
+		dropdown_border_hover = poe2trade_colors.clickable_background_hover,
+		dropdown_border_highlight = colors.blue_highlight,
+		dropdown_border_highlight_negative = colors.red_highlight,
+		-- dropdown arrow
+		dropdown_arrow = colors.light_grey,
+		dropdown_arrow_disabled = colors.dark_grey,
+		dropdown_arrow_hover = colors.white,
+		-- checkbox background
+		checkbox_background = poe2trade_colors.clickable_enabled,
+		checkbox_background_disabled = poe2trade_colors.clickable_background_disabled,
+		checkbox_background_toggled = poe2trade_colors.clickable_active,
+		checkbox_background_clicked = poe2trade_colors.clickable_active,
+		checkbox_background_hover = poe2trade_colors.clickable_background_hover,
+		-- checkbox border
+		checkbox_border = poe2trade_colors.clickable_background_hover,
+		checkbox_border_disabled = colors.transparent,
+		checkbox_border_toggled = poe2trade_colors.clickable_active,
+		checkbox_border_clicked = poe2trade_colors.clickable_active,
+		checkbox_border_hover = poe2trade_colors.clickable_background_hover,
+		-- checkbox checkmark
+		checkbox_checkmark = colors.light_grey,
+		checkbox_checkmark_disabled = colors.dark_grey,
+		checkbox_checkmark_hover = colors.white,
+		-- checkbox checkimage
+		checkbox_checkimage = colors.grey,
+		checkbox_checkimage_disabled = colors.dark_grey,
+		checkbox_checkimage_toggled = colors.white,
+		checkbox_checkimage_hover = colors.white,
+		checkbox_border_highlight = colors.blue_highlight,
+		checkbox_border_highlight_negative = colors.red_highlight,
+		-- slider background
+		slider_background = colors.dark,
+		slider_background_disabled = poe2trade_colors.clickable_enabled,
+		slider_background_selected = colors.dark,
+		slider_background_hover = colors.dark,
+		-- slider border
+		slider_border = poe2trade_colors.clickable_background_hover,
+		slider_border_disabled = poe2trade_colors.clickable_enabled,
+		slider_border_selected = colors.grey,
+		slider_border_hover = poe2trade_colors.clickable_active,
+		-- slider knob
+		slider_knob = poe2trade_colors.clickable_active,
+		slider_knob_disabled = poe2trade_colors.clickable_background_hover,
+		slider_knob_selected = colors.light,
+		slider_knob_hover = colors.light_grey,
+		slider_section_separator = poe2trade_colors.clickable_background_hover,
+		-- scrollbar background
+		scrollbar_background = colors.dark,
+		scrollbar_background_disabled = colors.dark,
+		scrollbar_background_selected = colors.dark,
+		scrollbar_background_hover = colors.dark,
+		-- scrollbar border
+		scrollbar_border = poe2trade_colors.clickable_background_hover,
+		scrollbar_border_disabled = poe2trade_colors.clickable_enabled,
+		scrollbar_border_selected = colors.grey,
+		scrollbar_border_hover = poe2trade_colors.clickable_active,
+		-- scrollbar knob
+		scrollbar_knob = poe2trade_colors.clickable_active,
+		scrollbar_knob_disabled = poe2trade_colors.clickable_background_hover,
+		scrollbar_knob_selected = colors.light,
+		scrollbar_knob_hover = colors.light_grey,
+		-- scrollbar arrow
+		scrollbar_arrow = poe2trade_colors.clickable_active,
+		scrollbar_arrow_disabled = poe2trade_colors.clickable_background_hover,
+		scrollbar_arrow_selected = colors.light,
+		scrollbar_arrow_hover = colors.light_grey,
+		-- scrollbar arrow background
+		scrollbar_arrow_background = colors.dark,
+		scrollbar_arrow_background_disabled = colors.dark,
+		scrollbar_arrow_background_selected = colors.dark,
+		scrollbar_arrow_background_hover = poe2trade_colors.clickable_background_hover,
+		-- scrollbar arrow border
+		scrollbar_arrow_border = poe2trade_colors.clickable_background_hover,
+		scrollbar_arrow_border_disabled = poe2trade_colors.clickable_enabled,
+		scrollbar_arrow_border_selected = colors.grey,
+		scrollbar_arrow_border_hover = poe2trade_colors.clickable_active,
+		-- button background
+		button_background = poe2trade_colors.clickable_enabled,
+		button_background_disabled = poe2trade_colors.clickable_background_disabled,
+		button_background_toggled = poe2trade_colors.clickable_active,
+		button_background_clicked = poe2trade_colors.clickable_active,
+		button_background_hover = poe2trade_colors.clickable_background_hover,
+		-- button border
+		button_border = poe2trade_colors.clickable_background_hover,
+		button_border_disabled = colors.transparent,
+		button_border_toggled = poe2trade_colors.clickable_active,
+		button_border_clicked = poe2trade_colors.clickable_active,
+		button_border_hover = poe2trade_colors.clickable_background_hover,
+		-- button raised background
+		button_raised = poe2trade_colors.button_raised_enabled,
+		button_raised_disabled = poe2trade_colors.button_raised_disabled,
+		button_raised_toggled = poe2trade_colors.button_raised_active,
+		button_raised_clicked = poe2trade_colors.button_raised_active,
+		button_raised_hover = poe2trade_colors.button_raised_hover,
+		-- button raised border
+		button_raised_border = poe2trade_colors.button_raised_hover,
+		button_raised_border_disabled = colors.transparent,
+		button_raised_border_toggled = poe2trade_colors.button_raised_active,
+		button_raised_border_clicked = poe2trade_colors.button_raised_active,
+		button_raised_border_hover = poe2trade_colors.button_raised_hover,
+		-- button image
+		button_image = colors.white,
+		button_image_disabled = colors.dark_grey,
+		button_image_overlay_clicked = colors.white_50,
+		-- dragger background
+		dragger_background = colors.dark,
+		dragger_background_disabled = poe2trade_colors.clickable_enabled,
+		dragger_background_dragged = colors.dark,
+		dragger_background_hover = colors.dark,
+		-- dragger border
+		dragger_border = poe2trade_colors.clickable_background_hover,
+		dragger_border_disabled = colors.transparent,
+		dragger_border_dragged = colors.grey,
+		dragger_border_hover = poe2trade_colors.clickable_active,
+		-- dragger knob
+		dragger_knob = poe2trade_colors.clickable_active,
+		dragger_knob_disabled = poe2trade_colors.clickable_background_hover,
+		dragger_knob_dragged = colors.light,
+		dragger_knob_hover = colors.light_grey,
+		-- dragger knobimage
+		dragger_knobimage = colors.white,
+		dragger_knobimage_disabled = colors.dark_grey,
+		dragger_knobimage_overlay_dragged = colors.white_50,
+		-- path 
+		path_background = colors.dark,
+		path_border = poe2trade_colors.clickable_background_hover,
+		path_arrow = colors.light_grey,
+		-- calc section 
+		calc_section_background = colors.dark,
+		calc_section_label_background = poe2trade_colors.row_background,
+		calc_section_value_background = poe2trade_colors.row_background,
+		calc_section_value_background_hover = colors.dark,
+		-- calc breakdown
+		calc_breakdown_tooltip_border = poe2trade_colors.tooltip_border,
+		calc_breakdown_tooltip_border_pinned = poe2trade_colors.button_raised_hover,
+		calc_breakdown_border_hover = poe2trade_colors.button_raised_hover,
+		-- rectangle outline
+		rectangle_outline_border = poe2trade_colors.brown_transparancy,
+		-- popup background
+		popup_background = poe2trade_colors.row_background,
+		popup_background_title = colors.black,
+		-- popup border
+		popup_border = poe2trade_colors.brown,
+		popup_border_title = poe2trade_colors.brown,
+		-- section background
+		section_background = poe2trade_colors.row_background,
+		section_background_title = colors.black,
+		-- section border
+		-- section_border = poe2trade_colors.brown,
+		section_border = poe2trade_colors.brown_transparancy,
+		section_border_title = poe2trade_colors.brown,
+		-- tooltip
+		tooltip_background = colors.black_85,
+		tooltip_border = poe2trade_colors.tooltip_border,
+		-- toast (popups in the bottom left corner)
+		toast_background = colors.dark,
+		toast_border = poe2trade_colors.brown,
+		-- main control (bottom left corner)
+		main_control_background = colors.dark,
+		main_control_border = poe2trade_colors.brown,
+		-- top bar
+		-- top_bar_background = colors.darker_grey,
+		top_bar_background = colors.dark,
+		top_bar_border = poe2trade_colors.brown,
+		-- side bar
+		-- side_bar_background = colors.dark,
+		side_bar_background = poe2trade_colors.row_background,
+		side_bar_border = poe2trade_colors.brown,
+		-- bottom bar
+		bottom_bar_background = poe2trade_colors.row_background,
+		bottom_bar_border = poe2trade_colors.brown,
+		-- current build (box behind build name)
+		current_build_box_background = poe2trade_colors.row_background,
+		current_build_box_border = poe2trade_colors.clickable_background_hover,
+		-- points (box behind skill points at the top)
+		points_box_background = poe2trade_colors.row_background,
+		points_box_border = poe2trade_colors.clickable_background_hover,
+	}
+}
+
+
+local activeTheme = "classic"
+function SetActiveTheme(name)
+	activeTheme = name
+end
+
+local function isHex(s)
+	return string.sub(s, 1, 1) == "#" or string.sub(s, 1, 2):lower() == "0x" or string.sub(s, 1, 2):lower() == "^x"
+end
+
+local function colorNameToHex(colorName)
+	if isHex(colorName) then
+		return colorName
+	end
+	return colorNameToHex(colors[colorName])
+end
+
+-- extends hexToRGB() from Data/Global.lua to also allow for opacity
+local function hexaToRGBA(hex)
+	if isHex(hex) == false then
+		ConPrintf('Error: Trying to convert non-hex number to RGBA: '..hex)
+	end
+	hex = hex:gsub("0x", "") -- Remove "0x" prefix
+	hex = hex:gsub("%^x", "") -- Remove "^x" prefix
+	hex = hex:gsub("#", "") -- Remove '#' if present
+	if #hex ~= 8 and #hex ~= 6 then
+		ConPrintf('Error: Trying to convert non-hex number to RGBA: '..hex)
+		return nil
+	end
+	local r = (tonumber(hex:sub(1, 2), 16)) / 255
+	local g = (tonumber(hex:sub(3, 4), 16)) / 255
+	local b = (tonumber(hex:sub(5, 6), 16)) / 255
+	local a = 1
+	if #hex == 8 then
+		a = (tonumber(hex:sub(7, 8), 16)) / 255
+	end
+	return r, g, b, a
+end
+
+--- Gets the style structure for the given styleName
+---@param styleName Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+local function getStyleFromTheme(styleName)
+	if styleName == nil then
+		ConPrintf('Error: Trying to access style with empty name.')
+	end
+	local style = themes[activeTheme][styleName]
+	if style == nil then
+		ConPrintf('Error: No style found for "'..styleName..'" with theme "'..activeTheme..'". Falling back to classic theme...')
+		style = themes.classic[styleName]
+	end
+	return style
+end
+
+--- Gets the color code (e.g. ^xFFFFFF) for the given style
+---@param styleName Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+function GetStyleColor(styleName)
+	local colorName = getStyleFromTheme(styleName)
+	if type(colorName) == "table" then
+		colorName = colorName.color
+	end
+	local hex = colorNameToHex(colorName)
+	hex = hex:gsub("0x", "^x") -- turn "0x" prefix into "^x" prefix
+	hex = hex:gsub("#", "^x") -- turn "#" prefix into "^x" prefix
+	return hex
+end
+
+--- Sets the draw color to a color defined by a style.
+--- Meant to replace SetDrawColor() when drawing UI.
+--- This internally calls SetDrawColor()
+---@param colorStyle Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+function SetDrawStyle(colorStyle)
+	local hex = GetStyleColor(colorStyle)
+	local r, g, b, a =  hexaToRGBA(hex)
+	SetDrawColor(r, g, b, a)
+end
+
+--- Gets the font name (e.g. VAR) for the given style. Note: not all styles have a font! Only those starting with text_
+---@param fontStyle Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+function GetStyleFont(fontStyle)
+	return getStyleFromTheme(fontStyle).font
+end
+
+--- Wrapper for DrawString(left, top, align, height, font, text) to use a Style definition instead of a static font 
+---@param fontStyle Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+function StyledDrawString(left, top, align, height, fontStyle, text)
+	local font = GetStyleFont(fontStyle)
+	DrawString(left, top, align, height, font, text)
+end
+
+--- Wrapper for DrawStringWidth(height, font, text) to use a Style definition instead of a static font 
+---@param fontStyle Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+function StyledDrawStringWidth(height, fontStyle, text)
+	local font = GetStyleFont(fontStyle)
+	return DrawStringWidth(height, font, text)
+end
+
+--- Wrapper for DrawStringCursorIndex(height, font, text, cursorX, cursorY) to use a Style definition instead of a static font 
+---@param fontStyle Style The name of the style to use. Always use values from Style alias, e.g. `'text_button'`
+function StyledDrawStringCursorIndex(height, fontStyle, text, cursorX, cursorY)
+	local font = GetStyleFont(fontStyle)
+	return DrawStringCursorIndex(height, font, text, cursorX, cursorY)
+end
\ No newline at end of file