Fascinated/simple-links
1
1
Fork 0
generated from Fascinated/nextjs-13-template-with-tailwindcss
Code Issues 1 Pull Requests 10 Actions Activity

update the light theme to be better
All checks were successful
Publish Docker Image / docker (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
Lee 2023-07-12 11:04:55 +01:00
parent 4a58b7bb31
commit bf64c373c2
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/page.tsx
View File

@ -26,19 +26,25 @@ export default function Home() {
const themeColors: { const themeColors: {
[key: string]: { [key: string]: {
backgroundColor: string; backgroundColor: string;
infoCardColor: string;
textColor: string; textColor: string;
buttonTextColor: string; buttonTextColor: string;
footerTextColor: string;
}; };
} = { } = {
dark: { dark: {
backgroundColor: "bg-neutral-900", backgroundColor: "bg-neutral-800",
infoCardColor: "bg-neutral-900",
textColor: "text-white", textColor: "text-white",
buttonTextColor: "text-white", buttonTextColor: "text-white",
footerTextColor: "text-blue-300",
}, },
light: { light: {
backgroundColor: "bg-white", backgroundColor: "bg-gray-300",
infoCardColor: "bg-white",
textColor: "text-black", textColor: "text-black",
buttonTextColor: "text-white", buttonTextColor: "text-white",
footerTextColor: "text-black",
}, },
}; };
const selectedTheme = themeColors[theme] || themeColors.dark; // The theme to use (fallback of dark) const selectedTheme = themeColors[theme] || themeColors.dark; // The theme to use (fallback of dark)
@ -46,7 +52,7 @@ export default function Home() {
return ( return (
<> <>
<main <main
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-800 ${selectedTheme.textColor}`} className={`flex flex-col items-center justify-center w-screen h-screen ${selectedTheme.backgroundColor} ${selectedTheme.textColor}`}
> >
{/* Background Image */} {/* Background Image */}
{background.showBackground && background.backgroundImage && ( {background.showBackground && background.backgroundImage && (
@ -63,7 +69,7 @@ export default function Home() {
/> />
)} )}
<div <div
className={`${selectedTheme.backgroundColor} rounded-lg text-center shadow-lg`} className={`${selectedTheme.infoCardColor} rounded-lg text-center shadow-lg`}
style={{ style={{
zIndex: 1, zIndex: 1,
opacity: infoCard.transparency, opacity: infoCard.transparency,
@ -136,12 +142,14 @@ export default function Home() {
</div> </div>
{/* Footer */} {/* Footer */}
<div className="absolute bottom-0 right-0 mb-5 mr-5"> <div
className={`absolute bottom-0 right-0 mb-5 mr-5 ${selectedTheme.footerTextColor}`}
>
{options.showSourceLink && ( {options.showSourceLink && (
<a <a
href="https://git.fascinated.cc/Fascinated/simple-links" href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank" target="_blank"
className="mt-5 text-blue-300" className="mt-5"
> >
Website Source Website Source
</a> </a>