fix(ui): 🐛 themes now properly display system color text

Author: EightBitByte

public/logo-dl.webp

@@ -16,7 +16,7 @@ export default function NotFound() {
     <div className="flex flex-col flex-grow w-full items-center justify-center">
       <div className="flex flex-col gap-12 items-center">
         <h1 className="text-5xl font-bold">
-          <span className="text-muted-foreground">404 &mdash;</span> Not Found
+          <span className="text-foreground/60">404 &mdash;</span> Not Found
         </h1>
         <StatLink href="/">
           <Button variant="outline">

public/logo-pp.webp

@@ -3,14 +3,40 @@
 import { useTheme } from "next-themes";
 import FooterButton from "../components/ui/footer-button";
 import HomeSection from "../components/ui/home-section";
-import ProjectButton from "../components/ui/project-button";
+import ProjectButton, {ProjectButtonProps} from "../components/ui/project-button";
 import { StatLink } from "@/components/ui/stat-link";
 import { cn } from "@/utils/utils";
 import { useEffect, useState } from "react";
 
+
+const HOMEPAGE_PROJECTS: ProjectButtonProps[] = [
+  {
+    imgSrc: "/logo-pp.webp",
+    href: "https://peterplate.com",
+    title: "PeterPlate",
+    shortDesc: "Discover dining options and plan meals at UC Irvine.",
+    tags: ["Tool", "Web", "UCI"],
+  },
+  {
+    imgSrc: "/logo-dl.webp",
+    href: "https://deadlock.jacobmoy.com",
+    title: "Deadlock Tier List",
+    shortDesc: "Vote on the viability of your favorite characters from Deadlock.",
+    tags: ["Game", "Tool"],
+  },
+  {
+    imgSrc: "/exsanguination.webp",
+    href: "https://github.com/EightBitByte/exsanguination",
+    title: "Exsanguination",
+    shortDesc: "Defend against the encroaching virus and infected hordes.",
+    tags: ["Game", "WIP"],
+  },
+];
+
 export default function Home() {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);
+  const usingLight: boolean = resolvedTheme == "light" || resolvedTheme == "latte"
 
   useEffect(() => {
     setIsMounted(true);
@@ -29,7 +55,7 @@ export default function Home() {
           </h1>
           <div className={cn(
             "flex flex-col gap-5 text-lg md:text-xl tracking-wideish leading-[22px] md:leading-7",
-            theme != "light" && theme != "latte" && "text-foreground/60",
+            !usingLight && "text-foreground/60",
           )}>
             <p>
               My journey with computers began at the age of five when I haphazardly
@@ -48,32 +74,17 @@ export default function Home() {
           </div>
         </HomeSection>
         <HomeSection title="Projects" gap={6}>
-          <ProjectButton
-            imgSrc="/logo-zm.webp"
-            href="https://github.com/icssc/PeterPlate"
-            title="PeterPlate"
-            shortDesc="Discover dining options and plan meals at UC Irvine."
-            tags="Tool,Web,UCI"
-          />
-          <ProjectButton
-            imgSrc="/logo-lc.webp"
-            href="https://github.com/EightBitByte/leetcode-watcher"
-            title="LeetCode Watcher"
-            shortDesc="Monitor friends' progress and get live updates without leaving Discord."
-            tags="Bot,Discord"
-          />
-          <ProjectButton
-            imgSrc="/exsanguination.webp"
-            href="https://github.com/EightBitByte/exsanguination"
-            title="Exsanguination"
-            shortDesc="Defend against the encroaching virus and infected hordes."
-            tags="Game,WIP"
-          />
+          {HOMEPAGE_PROJECTS.map(props => 
+            <ProjectButton 
+              key={props.title}
+              {...props}
+            />
+          )}
         </HomeSection>
         <HomeSection title="Contact" gap={4}>
           <div className={cn(
             "text-lg md:text-xl tracking-wideish leading-[22px] md:leading-7 flex flex-col gap-5",
-            theme != "latte" && theme != "light" && "text-foreground/60"
+            !usingLight && "text-foreground/60",
             )}>
             <p>
               <StatLink

src/app/not-found.tsx

@@ -12,9 +12,13 @@ export function ToasterProvider() {
     setMounted(true);
   }, []);
 
+  if (!mounted) {
+    return null;
+  }
+
   const sonnerTheme = theme === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
 
   return (
-    <Toaster theme={sonnerTheme as "light" | "dark" | "system"} richColors closeButton/>
+    <Toaster theme={sonnerTheme as "light" | "dark" | "system"} richColors closeButton />
   );
 }

src/app/page.tsx

@@ -17,7 +17,7 @@ export default function HomeSection({
 }: HomeSectionProps) {
   return (
     <div
-      className={`grid grid-cols-[9fr_100fr] grid-rows-1 px-4 max-w-full 
+      className={`grid grid-cols-[9fr_100fr] grid-rows-1 px-4 min-w-full max-w-full 
                   md:px-0 lg:w-1/2 ${className}`}
     >
       <p

src/components/toaster-provider.tsx

@@ -13,8 +13,8 @@ export interface ProjectButtonProps {
   title: string;
   /* A short (<80 char) description of the project */
   shortDesc: string;
-  /* Comma delineated tags */
-  tags: string;
+  /* Project organizational tags */
+  tags: string[];
 }
 
 export default function ProjectButton({
@@ -24,7 +24,10 @@ export default function ProjectButton({
   shortDesc,
   tags,
 }: ProjectButtonProps) {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
+  const usingLight: boolean = resolvedTheme == "light" || resolvedTheme == "latte"
+
+  console.log(resolvedTheme == "light")
 
   return (
     <a
@@ -43,20 +46,20 @@ export default function ProjectButton({
           fill
           className={cn(
             "rounded-full",
-            theme != "light" && theme != "latte" && "brightness-65"
+            (!usingLight && "brightness-65")
           )}
         />
       </div>
       <div>
         <h1 className={cn(
           "md:text-xl",
-          theme != "light" && theme != "latte" && "text-foreground/60"
+          !usingLight && "text-foreground/60"
           )}>
           <span className="font-bold text-[var(--foreground)]">{title}</span> -{" "}
           {shortDesc}
         </h1>
         <div className="flex flex-row gap-2">
-          {tags.split(",").map((tag) => (
+          {tags.map((tag) => (
             <p
               key={tag}
               className="rounded-full border-1 border-[var(--divider)]

src/components/ui/home-section.tsx

@@ -192,6 +192,10 @@ export const SHOP_DATA = {
   },
 } as const;
 
+export const LIGHT_THEMES = new Set(["light", "latte"]);
+
+export const DARK_THEMES = new Set(["dark", "mocha", "habamax"]);
+
 export type ShopId = keyof typeof SHOP_DATA;
 
 // --- STORE TYPES ---