OmniaFramework/extra/DefaultThemeDark.oss

% ================== DefaultTheme.oss ==================


% ==== Variables ====
const $accentColor = #2FB000FF
const $textColor = #CCEECCFF
const $borderColor = #111111FF
const $darkColor = #223322FF
const $accentColorLight = #87FF5CFF
const $accentColorDark = #3B7500FF
const $backgroundColor = rgba(30, 30, 30, 255)
% ===================


% ====== Root Widget ======
(window) {
	backgroundColor = $backgroundColor
	(tooltip) {
		backgroundColor = #FFF7D6FF
		borderColor = rgb(30, 30, 30)
		textColor = rgb(30, 30, 30)
		borderWidth = 1
		fontSize = 20
	}
}
% =========================


% ====== Panel ======
(panel) {
	backgroundColor = $backgroundColor
	titleColor =  $accentColorDark
	titlebarColor = $borderColor
	titlebarBorderColor = $borderColor
	borderColor = $borderColor
	borderRadius = 0
	borderWidth = 2
	titlebarBorderWidth = 2
	showBorder = true
	showBackground = true
	titlebarType =  full
	titlebarHeight = 18
	titlebarFontSize = 18
	titlebarTextAlign = text_left
	scrollSpeed = 1.2
	scrollSmoothFactor = 0.7
	padding = rect(15, 15, 15, 15)
	margin = rect(0, 0, 0, 0)
}
% ===================



% ====== TabPanel ======
(tabPanel) {
	backgroundColor = $backgroundColor
	borderColor = $borderColor
	borderRadius = 0
	borderWidth = 2
	showBorder = true
	showBackground = true
	margin = rect(0, 0, 0, 0)
	textColor = $textColor
	fontSize = 18

	(tabBar) {
		height = 35.0
		backgroundColor = $darkColor
		borderColor = $borderColor
		borderWidth = 1
		sidePadding = 20.0
	}
}
(@panel_tab panel) {
}
% ======================



% ====== Scrollbar ======
(scrollbar) {
	(thumb) {
		color = $darkColor
		borderRadius = 30.0
		borderColor = $borderColor
		showBorder = true
	}
	(track) {
		color = #111111FF
	}
	width = 18.0
}
(scrollbar:hover) {
	(thumb) {
		color = $accentColorDark
	}
}
(scrollbar:pressed) {
	(thumb) {
		color = #225500FF
	}
	(track) {
		color = #001100FF
	}
}
% =======================



% ====== CheckBox ======
(checkbox) {
	checkBorderColor = $accentColorDark
	checkBoxColor = $accentColor
	textColor = $textColor
	fontSize = 20
	borderRadius = 0
	borderWidth = 0
	checkBorderRadius = 6
	checkBorderWidth = 2
	showBackground = false
	showBorder = false
	padding = rect(15, 15, 15, 15)
	margin = rect(0, 0, 0, 0)
}
(checkbox:hover) {
	checkBorderColor = $accentColorLight
}
(checkbox:pressed) {
	checkBoxColor = $accentColor
	textColor = $accentColorDark
	checkBorderColor = $accentColor
}
(checkbox:active) {
	checkBoxColor = $accentColor
	checkBorderColor = $accentColor
	textColor = $accentColorDark
}
% ======================



% ====== RadioButton ======
(radioButton) {
	innerCircleColor = $accentColorDark
	outerCircleColor = $accentColor
	outerCircleBorderWidth = 2
	textColor = $textColor
	fontSize = 20
	showBackground = false
	showBorder = false
	padding = rect(4, 4, 4, 4)
	margin = rect(0, 0, 0, 0)
}
(radioButton:hover) {
	outerCircleColor = $accentColorLight
}
(radioButton:pressed) {
	outerCircleColor = $accentColor
	textColor = $accentColorDark
	innerCircleColor = $accentColor
}
(radioButton:active) {
	innerCircleColor = $accentColor
	outerCircleColor = $accentColor
	textColor = $accentColorDark
}
% =========================



% ====== Label ======
(label) {
	textColor = $textColor
	fontSize = 20
	borderRadius = 0
	borderWidth = 0
	showBackground = false
	showBorder = false
	padding = rect(15, 15, 15, 15)
	margin = rect(0, 0, 0, 0)
}
% ===================



% ====== Button ======
(button) {
	textColor = $textColor
	backgroundGradient = gradientV($accentColor - $accentColorDark)
	borderColor = $accentColorDark
	fontSize = 20
	borderRadius = 0
	borderWidth = 1
	showBackground = false
	showBorder = true
	useBackgroundGradient = true
	padding = rect(5, 5, 5, 5)
	margin = rect(0, 0, 0, 0)
	showIcon = false
	(icon) {
	}
}
(button:hover) {
	borderColor = $accentColorLight
}
(button:pressed) {
	borderColor = $accentColorDark
	textColor = #BBBBBBFF
	backgroundGradient = gradientV($accentColorDark - $accentColor)
}
% ====================



% ====== Image ======
(image) {
}
% ===================



% ====== ProgressBar ======
(progressbar) {
	borderColor = $accentColor
	borderWidth = 1
	showDecimal = false
	showText = true
	useBackgroundGradient = true
	backgroundGradient = gradientV($darkColor - $accentColorDark)
	useProgressGradient = true
	progressGradient = gradientV($accentColor - $accentColorDark)
}
% =========================



% ====== Slider ======
(slider) {
	(handle) {
		color = $accentColor
		size = vec2(10, 18)
	}
	(track) {
		color = $accentColorDark
		progressColor = $accentColor
		width = 6.0
	}
	showStepTicks = true
	stepTickHeight = 6.0
	stepTickColor = $accentColor
	padding = rect(5, 5, 5, 5)
}
% ===================



% ====== Context Menu ======
(context) {
	padding = rect(16, 0, 16, 0)
	itemSpacing = 6.0
	fontSize = 18
	backgroundColor = $darkColor
	selectionColor = $accentColor
	selectionTextColor = $accentColorLight
	separatorLineColor = $borderColor
	textColor = $textColor
	submenuIndicatorColor = $accentColorDark
	borderColor = $borderColor
	useSelectionGradient = true
	selectionGradient = gradientV($accentColor - $accentColorDark)
	animateOpen = true
	animationDelay = 120
}
% ==========================



% ====== MenuBar ======
(menubar) {
	height = 24.0
	itemPadding = rect(0, 0, 15, 0)
	fontSize = 16
	backgroundColor = $darkColor
	textColor = $textColor
	selectionColor = $accentColor
	selectionTextColor = $accentColorLight
	showBorder = false
	borderColor = $borderColor
}
% =====================



% ====== ToolBar ======
(toolbar) {
	height = 30.0
	fontSize = 16
	backgroundColor = $darkColor
	textColor = $textColor
	selectionColor = $accentColor
	selectionTextColor = $accentColorLight
	borderColor = $borderColor
	showBorder = true
	showBackground = true
}
(@tool_button button) {
	fontSize = 18
	padding = rect(5, 0, 5, 0)
	margin = rect(5, 0, 0, 0)
	showBackground = true
	backgroundColor = $darkColor
	useBackgroundGradient = false
	showBorder = false
	borderColor = color_black
	showIcon = true
	(icon) {
		tint = $accentColorLight
	}
}
(@tool_button button:hover) {
	borderColor = $textColor
	backgroundColor = $accentColorDark
	showBorder = true
	(icon) {
		tint = $textColor
	}
}
(@tool_button button:pressed) {
	borderColor = $accentColorDark
	showBorder = true
	(icon) {
		tint = $accentColorLight
	}
}
% =====================



% ====== ComboBox ======
(combo) {
	borderColor = $accentColor
	backgroundColor = $darkColor
	borderWidth = 1
	showBackground = true
	showBorder = true
	triangleIndicatorColor = $accentColor
	triangleIndicatorPadding = 8.0
	textColor = $textColor
	fontSize = 18
}
(combo:hover) {
	triangleIndicatorColor = $accentColorLight
	borderColor = $accentColorLight
}
(combo:active) {
	triangleIndicatorColor = $accentColorLight
	borderColor = $accentColorLight
}
% ======================



% ====== TreeView ======
(tree) {
	linePadding = rect(5, 5, 20, 0)
	selectionColor = $accentColor
	selectionTextColor = color_white
	iconSpacing = 0.0
	iconInset = 4.0
	showIcons = true
	fontSize = 16
	textColor = $textColor
	backgroundColor = $darkColor
	borderColor = $borderColor
	separatorLineColor = $borderColor
	showSeparatorLine = true
	iconTintColor = $accentColorLight
	indentWidth = 16.0
	chevronColor = $accentColorDark
	chevronInset = 4.0
	branchLineColor = $textColor
	showBranchLines = true
	branchLineThickness = 1.0
}
% ======================