Add support for custom theme in config.json

CMakeLists.txt

@@ -65,6 +65,7 @@ qt_add_qml_module(mirai
 		src/qml/AppText.qml
 		src/qml/AppComboBox.qml
 		src/qml/TaskItem.qml
+		src/qml/ThemeLoader.qml
 		src/qml/forms/TaskForm.qml
 		src/qml/forms/FilesForm.qml
 		src/qml/forms/TagsConfigForm.qml

src/qml/Main.qml

@@ -24,17 +24,8 @@ Window {
 		id: backend
 	}
 
-	Item {
+	ThemeLoader {
 		id: colorPalette
-		property QtObject selected: OneDark
-
-		function applyCustomThemeFromConfig() {
-			//console.log(backend.getThemeColor("text"))
-		}
-
-		Component.onCompleted: {
-			applyCustomThemeFromConfig()
-		}
 	}
 
 	function capitalize(str) {

src/qml/SideMenu.qml

@@ -44,7 +44,7 @@ Rectangle {
 			Rectangle {
 				Layout.preferredHeight: childrenRect.height
 				Layout.fillWidth: true
-				color: backend.activeResourcesFilter.includes(modelData.name) ? colorPalette.selected.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
+				color: backend.activeResourcesFilter.includes(modelData.name) ? colorPalette.selected.filterSelected : mouse.hovered ? colorPalette.selected.filterHovered : "transparent"
 				radius: 4
 				AppText {
 					text: modelData.name
@@ -94,7 +94,7 @@ Rectangle {
 			Rectangle {
 				Layout.preferredHeight: childrenRect.height
 				Layout.fillWidth: true
-				color: backend.activeTagsFilter.includes(modelData.name) ? colorPalette.selected.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
+				color: backend.activeTagsFilter.includes(modelData.name) ? colorPalette.selected.filterSelected : mouse.hovered ? colorPalette.selected.filterHovered : "transparent"
 				radius: 4
 				QtObject {
 					id: internal

src/qml/TaskItem.qml

@@ -24,7 +24,7 @@ RowLayout {
 		id: checkbox
 		text: control.getFormatedText()
 		checked: task.state === 'DONE'
-		textComponent.font.pointSize: 14	
+		//textComponent.font.pointSize: 14	
 		textComponent.color: task.date < internal.todayDate ? colorPalette.selected.red
 			// : task.date === internal.todayDate ? colorPalette.selected.palette.sapphire
 			: colorPalette.selected.text

src/qml/ThemeLoader.qml

@@ -0,0 +1,49 @@
+/* 
+ * Mirai. Copyright (C) 2024 Vyn
+ * This file is licensed under version 3 of the GNU General Public License (GPL-3.0-only)
+ * The license can be found in the LICENSE file or at https://www.gnu.org/licenses/gpl-3.0.txt
+ */
+
+import QtQuick
+import QtQuick.Window
+import Mirai
+
+Item {
+	property QtObject selected: OneDark
+
+	function applyCustomThemeFromConfig() {
+		//console.log(backend.getThemeColor("text"))
+		console.log(Object.keys(selected))
+		selected.background = getThemeColor("background")
+		selected.pane = getThemeColor("pane")
+		selected.text = getThemeColor("text")
+		selected.textPlaceholder = getThemeColor("textPlaceholder")
+		selected.accent = getThemeColor("accent")
+		selected.fieldBackground = getThemeColor("fieldBackground")
+		selected.buttonIcon = getThemeColor("buttonIcon")
+		selected.buttonBackground = getThemeColor("buttonBackground")
+		selected.buttonHovered = getThemeColor("buttonHovered")
+		selected.filterHovered = getThemeColor("filterHovered")
+		selected.filterSelected = getThemeColor("filterSelected")
+		selected.modalBorder = getThemeColor("modalBorder")
+		selected.calendarLines = getThemeColor("calendarLines")
+		selected.calendarCurrentTime = getThemeColor("calendarCurrentTime")
+		selected.calendarEvent = getThemeColor("calendarEvent")
+		selected.green = getThemeColor("green")
+		selected.red = getThemeColor("red")
+	}
+
+	// Proxy function for backend.getThemeColor that do not override the value if
+	// no custom color are defined for this element
+	function getThemeColor(element) {
+		let elementColor = backend.getThemeColor(element)
+		if (!elementColor) {
+			return selected[element];
+		}
+		return elementColor;
+	}
+
+	Component.onCompleted: {
+		applyCustomThemeFromConfig()
+	}
+}