Functional mode switch that flips the theme on click.

Signed-off-by: jmug <u.g.a.mariano@gmail.com>

include/mode_switch.h

@@ -0,0 +1,3 @@
+#pragma once
+
+void RenderModeSwitch();

include/theme.h

@@ -9,9 +9,11 @@ enum Theme_Mode {
 
 struct Theme_t {
 	Clay_Color backgroundColor;
+	Clay_Color foregroundColor;
 	Clay_Color textColor;
 	Clay_Color textShadowColor;
 };
 
 void setThemeMode(enum Theme_Mode m);
+enum Theme_Mode getThemeMode();
 struct Theme_t getCurrentTheme();

src/main.c

@@ -9,6 +9,7 @@
 
 #include "clock.h"
 #include "theme.h"
+#include "mode_switch.h"
 
 #define RAYLIB_VECTOR2_TO_CLAY_VECTOR2(vector) (Clay_Vector2) { .x = vector.x, .y = vector.y }
 
@@ -43,6 +44,7 @@ Clay_RenderCommandArray CreateLayout() {
         }
     }) {
         RenderClock(520, timeinfo->tm_hour, timeinfo->tm_min, timeinfo->tm_sec % 2 == 0);
+        RenderModeSwitch();
     }
     return Clay_EndLayout();
 }
@@ -77,7 +79,7 @@ int main(void)
     Clay_Raylib_Initialize(GetScreenWidth(), GetScreenHeight(), "PiAlarm", FLAG_VSYNC_HINT | FLAG_FULLSCREEN_MODE | FLAG_MSAA_4X_HINT);
     HideCursor();
 
-    setThemeMode(DARK_MODE);
+    setThemeMode(LIGHT_MODE);
 
     while (!WindowShouldClose()) {
         UpdateDrawFrame(NULL);

src/mode_switch.c

@@ -0,0 +1,77 @@
+#include "clay.h"
+#include "theme.h"
+#include "mode_switch.h"
+#include "util.h"
+#include <stdio.h>
+
+void handleModeSwitch(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData) {
+    if (pointerData.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+		enum Theme_Mode cm = getThemeMode();
+		if (cm == LIGHT_MODE) {
+			setThemeMode(DARK_MODE);
+		} else {
+			setThemeMode(LIGHT_MODE);
+		}
+    }
+}
+
+void RenderModeSwitch() {
+	Clay_Color bgC = getCurrentTheme().backgroundColor;
+	Clay_Color fgC = getCurrentTheme().foregroundColor;
+
+	float width = 126;
+	float height = 36;
+	float cornerRadius = 18;
+	float borderWidth = 3;
+
+	CLAY({
+        .layout = {
+            .sizing = {
+                .width = width,
+                .height = height,
+            },
+			.layoutDirection = CLAY_LEFT_TO_RIGHT,
+        },
+		.cornerRadius = CLAY_CORNER_RADIUS(cornerRadius),
+		.border = {
+			.color = fgC,
+			.width = {.left = borderWidth, .right = borderWidth, .top = borderWidth, .bottom = borderWidth},
+		},
+	}) {
+		Clay_OnHover(handleModeSwitch, 0);
+		ExpandedSpacer();
+		CLAY({
+			.backgroundColor = bgC,
+			.layout = {
+				.sizing = {
+                    .width = (width - height) / 2,
+					.height = CLAY_SIZING_GROW(),
+				}
+			},
+		}) {}
+		CLAY({
+			.backgroundColor = fgC,
+			.layout = {
+				.sizing = {
+                    .width = (width - height) / 2,
+					.height = CLAY_SIZING_GROW(),
+				}
+			},
+		}) {}
+		ExpandedSpacer();
+		CLAY({
+			.backgroundColor = fgC,
+			.layout = {
+				.sizing = {
+					.width = height,
+					.height = height,
+				}
+			},
+			.cornerRadius = CLAY_CORNER_RADIUS(height / 2),
+			.floating = {
+				.offset = { .x = width - height },
+				.attachTo = CLAY_ATTACH_TO_PARENT,
+			},
+		}) {}
+	}
+}

src/theme.c

@@ -1,20 +1,27 @@
 #include "theme.h"
 
 struct Theme_t currentTheme = {0};
+enum Theme_Mode currentThemeMode = LIGHT_MODE; // TODO: Load from a config file or set based on time.
 
 struct Theme_t lightModeTheme = {
 	.backgroundColor = {255, 255, 255, 255},
+	.foregroundColor = {0, 0, 0, 255},
 	.textColor = {0x17, 0x17, 0x17, 255},
 	.textShadowColor = {0xe6, 0xe6, 0xe6, 255},
 };
 
 struct Theme_t darkModeTheme = {
 	.backgroundColor = {0, 0, 0, 255},
+	.foregroundColor = {255, 255, 255, 255},
 	.textColor = {0xef, 0xef, 0xef, 255},
 	.textShadowColor = {0x27, 0x27, 0x27, 255},
 };
 
+enum Theme_Mode getThemeMode() {
+	return currentThemeMode;
+}
 void setThemeMode(enum Theme_Mode m) {
+	currentThemeMode = m;
 	switch (m) {
 		case LIGHT_MODE:
 			currentTheme = lightModeTheme;