add basic theme support
All checks were successful
Publish Docker Image / docker (push) Successful in 1m44s

This commit is contained in:
Lee 2023-07-10 03:54:12 +01:00
parent b9d54cab59
commit b0f2bad98e
2 changed files with 34 additions and 5 deletions

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

@ -9,12 +9,40 @@ import Config from "../../config.json";
library.add(fab, far, fas); // Loading in the icons from FontAwesome library.add(fab, far, fas); // Loading in the icons from FontAwesome
export default function Home() { export default function Home() {
const { background, infoCard, avatar, name, links, options, description } = const {
Config; // All of the settings pulled from the config file 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 ( 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 <div
className={`absolute inset-0 filter ${ className={`absolute inset-0 filter ${
background.blur && "blur-sm" background.blur && "blur-sm"
@ -34,7 +62,7 @@ export default function Home() {
} }
></div> ></div>
<div <div
className={`bg-neutral-800 rounded-lg text-center shadow-lg`} className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{ style={{
zIndex: 1, zIndex: 1,
opacity: infoCard.transparency, opacity: infoCard.transparency,
@ -68,7 +96,7 @@ export default function Home() {
> >
<div <div
key={index} 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 && ( {link.icon && (
<> <>