add theme toggle

src/components/projects/Project.astro

@@ -4,6 +4,7 @@ import { Image } from "astro:assets";
 interface Props {
 	position?: "left" | "right";
 	image?: ImageMetadata;
+	image_light?: ImageMetadata;
 	alt?: string;
 	href: string;
 	title: string;
@@ -14,6 +15,7 @@ interface Props {
 
 const {
 	image,
+	image_light,
 	alt,
 	href,
 	title,
@@ -40,17 +42,41 @@ const leftProject = position == "left";
 					<Image
 						src={image}
 						alt={alt}
-						class="background-img absolute top-1/2 left-1/2 aspect-video max-w-full rounded-xl border-2 border-solid border-gray-800 opacity-40"
-						class:list={leftProject ? "left" : "right"}
+						class="project-image-dark background-img absolute top-1/2 left-1/2 aspect-video max-w-full rounded-xl border-2 border-solid border-gray-800 opacity-40"
+						class:list={[
+							leftProject ? "left" : "right",
+							{ "has-light-image": Boolean(image_light) },
+						]}
 						width={700}
 					/>
 					<Image
 						src={image}
 						alt={alt}
 						width={700}
-						class="frontfacing-img absolute top-1/2 left-1/2 aspect-video max-w-full rounded-xl border-2 border-solid border-gray-800 opacity-100"
-						class:list={leftProject ? "left" : "right"}
+						class="project-image-dark frontfacing-img absolute top-1/2 left-1/2 aspect-video max-w-full rounded-xl border-2 border-solid border-gray-800 opacity-100"
+						class:list={[
+							leftProject ? "left" : "right",
+							{ "has-light-image": Boolean(image_light) },
+						]}
 					/>
+					{image_light && (
+						<>
+							<Image
+								src={image_light}
+								alt={alt}
+								class="project-image-light background-img absolute top-1/2 left-1/2 hidden aspect-video max-w-full rounded-xl border-2 border-solid border-gray-300 opacity-40"
+								class:list={leftProject ? "left" : "right"}
+								width={700}
+							/>
+							<Image
+								src={image_light}
+								alt={alt}
+								width={700}
+								class="project-image-light frontfacing-img absolute top-1/2 left-1/2 hidden aspect-video max-w-full rounded-xl border-2 border-solid border-gray-300 opacity-100"
+								class:list={leftProject ? "left" : "right"}
+							/>
+						</>
+					)}
 				</>
 			)
 		}
@@ -106,6 +132,14 @@ const leftProject = position == "left";
 </div>
 
 <style>
+	:global(html[data-theme="light"]) .project-image-dark.has-light-image {
+		display: none;
+	}
+
+	:global(html[data-theme="light"]) .project-image-light {
+		display: block;
+	}
+
 	.image-container img {
 		transition: transform 0.5s ease-in-out;
 	}

src/components/projects/ProjectsComponent.astro

@@ -1,8 +1,11 @@
 ---
 import TaskWidget from "./TaskWidget.svelte";
 import CoworkingGuide from "../images/projects/coworking-guide.webp";
+import CoworkingGuideLight from "../images/projects/coworking-guide-light.webp";
 import PortfolioRoastBot from "../images/projects/portfolio-roast-bot.webp";
+import PortfolioRoastBotLight from "../images/projects/lightmode-portfolioroastbot.webp";
 import DsecNotebook from "../images/projects/dsec-notebook.webp";
+import DsecNotebookLight from "../images/projects/dsec-notebook-light.webp";
 import Project from "./Project.astro";
 ---
 
@@ -14,6 +17,7 @@ import Project from "./Project.astro";
 		<Project
 			position="left"
 			image={CoworkingGuide}
+			image_light={CoworkingGuideLight}
 			alt="coworking guide"
 			href="https://coworking-guide.vercel.app/"
 			title="Coworking Guide"
@@ -25,6 +29,7 @@ import Project from "./Project.astro";
 		<Project
 			position="right"
 			image={DsecNotebook}
+			image_light={DsecNotebookLight}
 			alt="DSEC Notebook"
 			href="https://notebook.dsec.club/"
 			title="DSEC Notebook"
@@ -36,6 +41,7 @@ import Project from "./Project.astro";
 		<Project
 			position="left"
 			image={PortfolioRoastBot}
+			image_light={PortfolioRoastBotLight}
 			alt="Portfolio Roast Bot"
 			href="https://codeberg.org/RythonDev/portfolio-roast-bot"
 			label="View Repository"

src/components/projects/TaskWidget.svelte

@@ -145,7 +145,7 @@
 	<!-- task bot -->
 	<div class="task-widget absolute flex h-full min-h-[50vh] w-full flex-col">
 		<div
-			class="flex w-full flex-row items-center justify-between
+			class="task-widget-header flex w-full flex-row items-center justify-between
                     rounded-md
                     border-3 border-solid
                     border-gray-600 bg-black
@@ -161,7 +161,7 @@
 			<div class="scroll-element primary absolute w-full px-1">
 				{#each streamers as { streamer, tasks }}
 					<div
-						class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
+						class="task-widget-item my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
                                     text-sm overflow-ellipsis whitespace-nowrap text-white lg:text-base"
 					>
 						{streamer} :
@@ -169,8 +169,8 @@
 							{#each tasks as task}
 								<li
 									class={task.completed
-										? "text-gray-400 line-through"
-										: "text-white"}
+										? "task-completed text-gray-400 line-through"
+										: "task-incomplete text-white"}
 								>
 									{task.name}
 								</li>
@@ -182,14 +182,16 @@
 			<div class="scroll-element secondary absolute w-full px-1">
 				{#each streamers as { streamer, tasks }}
 					<div
-						class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
+						class="task-widget-item my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
                                     text-sm overflow-ellipsis whitespace-nowrap text-white lg:text-base"
 					>
 						{streamer} :
 						<ol class="list-inside list-decimal">
 							{#each tasks as task}
 								<li
-									class={task.completed ? "line-through" : ""}
+									class={task.completed
+										? "task-completed line-through"
+										: "task-incomplete"}
 								>
 									{task.name}
 								</li>
@@ -203,6 +205,25 @@
 </div>
 
 <style>
+	:global(html[data-theme="light"]) .task-widget-header {
+		border-color: #cbd5e1;
+		background-color: #f8fafc;
+		color: #0f172a;
+	}
+
+	:global(html[data-theme="light"]) .task-widget-item {
+		background-color: #e2e8f0;
+		color: #0f172a;
+	}
+
+	:global(html[data-theme="light"]) .task-incomplete {
+		color: #0f172a;
+	}
+
+	:global(html[data-theme="light"]) .task-completed {
+		color: #64748b;
+	}
+
 	.background-widget.left {
 		transform: translate(-50%, -50%);
 	}