fixing ui in dark theme

NEARBuilders · Oct 20, 2024 · 77904a2 · 77904a2
1 parent 38041a6
commit 77904a2
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 6 deletions.
diff --git a/public/near-logo-white.svg b/public/near-logo-white.svg
diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx
@@ -1,7 +1,9 @@
 import { GuestBookMessage, useGuestBookMessages } from "@/lib/guestbook";
+import { useTheme } from "@/components/theme-provider";
 
 export default function Messages() {
   const { data, isLoading, isError } = useGuestBookMessages();
+  const { theme } = useTheme();
 
   if (isLoading) return <div className="text-center">Loading messages...</div>;
   if (isError)
@@ -17,7 +19,7 @@ export default function Messages() {
           data.map((message: GuestBookMessage, i: number) => (
             <div
               key={i}
-              className="rounded-md border border-opacity-30 bg-white bg-opacity-50 p-4 text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100"
+              className={`rounded-md border border-opacity-30 bg-opacity-50 p-4 ${theme === "dark" ? "bg-gray-700 text-white" : "bg-white text-gray-900"} shadow-sm`}
             >
               <p className="mb-2">{message.text}</p>
               <div className="flex justify-between text-sm text-opacity-70">

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
@@ -17,22 +17,22 @@ export function ModeToggle() {
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          className={`focus-visible:ring-0 ${theme === "light" || theme === "system" ? "text-white" : "text-muted"}`}
+          className={`focus-visible:ring-0 ${theme === "dark" ? "text-muted" : "text-white"}`}
           size="icon"
         >
           <Sun
-            className={`h-[1.2rem] w-[1.2rem] rotate-0 transition-all ${theme === "dark" ? "rotate-90 scale-0" : "scale-100"}`}
+            className={`h-[1.2rem] w-[1.2rem] transition-all ${theme === "dark" ? "rotate-90 scale-0" : "rotate-0 scale-100"}`}
           />
 
           <Moon
-            className={`absolute h-[1.2rem] w-[1.2rem] scale-0 transition-all ${theme === "dark" ? "scale-100" : "scale-0"}`}
+            className={`absolute h-[1.2rem] w-[1.2rem] scale-0 transition-all ${theme === "dark" ? "rotate-0 scale-100" : "rotate-90 scale-0"}`}
           />
 
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        className={`mt-1 ${theme === "light" || theme === "system" ? "bg-white" : "bg-slate-800"} rounded-md shadow-lg`}
+        className={`mt-1 ${theme === "dark" ? "bg-slate-800" : "bg-white"} rounded-md shadow-lg`}
       >
         <DropdownMenuItem onClick={() => setTheme("light")}>
           Light

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -5,14 +5,17 @@ import SignIn from "@/components/SignIn";
 import { useWallet } from "@/contexts/near";
 import { createFileRoute } from "@tanstack/react-router";
 import nearLogo from "/near-logo.svg";
+import nearLogoWhite from "/near-logo-white.svg";
 import viteLogo from "/vite.svg";
+import { useTheme } from "@/components/theme-provider";
 
 export const Route = createFileRoute("/")({
   component: HomePage
 });
 
 export default function HomePage() {
   const { signedAccountId } = useWallet();
+  const { theme } = useTheme();
 
   return (
     <div className="flex flex-col items-center">
@@ -23,7 +26,11 @@ export default function HomePage() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img src={nearLogo} className="h-24 w-24" alt="NEAR logo" />
+            <img
+              src={theme === "dark" ? nearLogoWhite : nearLogo}
+              className="h-24 w-24"
+              alt="NEAR logo"
+            />
           </a>
           <a
             href="https://vitejs.dev"