add basic theme support

config.json

@@ -11,6 +11,7 @@
 		},
 		"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg"
 	},
+	"theme": "dark",
 	"infoCard": {
 		"transparency": 0.85
 	},

src/app/page.tsx

@@ -9,12 +9,40 @@ import Config from "../../config.json";
 library.add(fab, far, fas); // Loading in the icons from FontAwesome
 
 export default function Home() {
-	const { background, infoCard, avatar, name, links, options, description } =
-		Config; // All of the settings pulled from the config file
+	const {
+		background,
+		infoCard,
+		avatar,
+		name,
+		links,
+		options,
+		description,
+		theme = "dark", // Fallback to dark if no theme was found
+	} = Config; // All of the settings pulled from the config file
+
+	// Theme colors to use when using the selected theme
+	const themeColors: {
+		[key: string]: {
+			background: string;
+			textColor: string;
+		};
+	} = {
+		dark: {
+			background: "bg-neutral-900",
+			textColor: "text-white",
+		},
+		light: {
+			background: "bg-white",
+			textColor: "text-black",
+		},
+	};
+	const selectedTheme = themeColors[theme]; // The theme to use
 
 	return (
 		<>
-			<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
+			<main
+				className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
+			>
 				<div
 					className={`absolute inset-0 filter ${
 						background.blur && "blur-sm"
@@ -34,7 +62,7 @@ export default function Home() {
 					}
 				></div>
 				<div
-					className={`bg-neutral-800 rounded-lg text-center shadow-lg`}
+					className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
 					style={{
 						zIndex: 1,
 						opacity: infoCard.transparency,
@@ -68,7 +96,7 @@ export default function Home() {
 									>
 										<div
 											key={index}
-											className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:brightness-75 transition`}
+											className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded text-white ${link.color.normal} hover:brightness-75 transition`}
 										>
 											{link.icon && (
 												<>