feat: Introducing light and dark mode

services/explorer-ui/src/assets/index.ts

@@ -1,6 +1,7 @@
 import AztecIcon from "./aztec-icon.svg?react";
 import AztecIconWhite from "./aztec-icon-white.svg?react";
 import BackgroundArt from "./background-art.svg?react";
+import BackgroundArtDark from "./background-art-dark.svg?react";
 import CopyIcon from "./copy-icon.svg?react";
 import SuccessIcon from "./success-icon.svg?react";
 import ObscuraLogoWhite from "./obscura-logo-white.svg?react";
@@ -15,6 +16,7 @@ export {
   AztecIcon,
   LoadingIcon,
   BackgroundArt,
+  BackgroundArtDark,
   AztecIconWhite,
   ObscuraLogoWhite,
   CopyIcon,

services/explorer-ui/src/components/copy-text.tsx

@@ -35,9 +35,9 @@ export const CopyableText: FC<Props> = ({
         {textArea ? (
           <Textarea className="text-sm flex-grow" value={text} readOnly />
         ) : (
-          <span className="relative inline-block font-mono ">{text}</span>
+          <span className="relative inline-block font-mono dark:text-white">{text}</span>
         )}
-        <CopyIcon className="cursor-pointer" onClick={handleCopy} />
+        <CopyIcon className="cursor-pointer hover:opacity-80 dark:text-gray-300" onClick={handleCopy} />
       </div>
     </div>
   );

services/explorer-ui/src/components/header.tsx

@@ -7,6 +7,7 @@ import { routes } from "~/routes/__root.tsx";
 import { MagicDevLink } from "./magic-dev-link";
 import { Button } from "./ui";
 import { ChicmozHomeLink } from "./ui/chicmoz-home-link";
+import { ThemeToggle } from "./theme-toggle";
 
 export const Header = () => {
   const navigate = useNavigate();
@@ -48,8 +49,8 @@ export const Header = () => {
         setHasNoResults(true);
       }
     }
-    if (error) setHasNoResults(true);
-    if (!data && isSuccess) setHasNoResults(true);
+    if (error) { setHasNoResults(true); }
+    if (!data && isSuccess) { setHasNoResults(true); }
   }, [data, error, isSuccess, navigate, fetchStatus]);
 
   const handleOnChange = (value: string) => {
@@ -65,16 +66,15 @@ export const Header = () => {
     <div className="mx-auto px-4 mt-10 max-w-[1440px] md:px-[70px]">
       <div className="flex flex-col w-full items-center bg-purple-light rounded-[40px] py-4 pr-4 md:pl-10">
         <div
-          className={`w-full transition-all duration-300 ease-in-out ${
-            isMenuOpen ? "rounded-b-3xl" : ""
-          }`}
+          className={`w-full transition-all duration-300 ease-in-out ${isMenuOpen ? "rounded-b-3xl" : ""
+            }`}
         >
           {/* Header */}
           <div className="w-full mx-auto">
             {/* Desktop Navigation */}
             <div className="hidden md:flex md:w-full md:items-center md:justify-between ">
               <div className="flex items-baseline">
-                <ChicmozHomeLink textClasses="hidden md:block pr-6" />
+                <ChicmozHomeLink textClasses="hidden md:block pr-6 self-center" />
                 <MagicDevLink textClasses="hidden md:block" />
               </div>
               <div className="flex  justify-center items-center w-1/2 sm:w-1/3 ">
@@ -93,11 +93,12 @@ export const Header = () => {
                   <Link
                     key={item.name}
                     to={item.path}
-                    className="text-secondary hover:text-white transition-colors"
+                    className="text-white hover:text-white transition-colors"
                   >
                     {item.name}
                   </Link>
                 ))}
+                <ThemeToggle />
               </div>
             </div>
 
@@ -114,9 +115,9 @@ export const Header = () => {
                 >
                   <span className="flex items-center">
                     {isMenuOpen ? (
-                      <X className="h-6 w-6 mr-2 text-secondary" />
+                      <X className="h-6 w-6 mr-2 text-white" />
                     ) : (
-                      <Menu className="h-6 w-6 mr-2 text-secondary" />
+                      <Menu className="h-6 w-6 mr-2 text-white" />
                     )}
                   </span>
                 </Button>
@@ -126,9 +127,8 @@ export const Header = () => {
             {/* Mobile Menu Content */}
             <div
               className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out
-              ${
-                isMenuOpen ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
-              }`}
+              ${isMenuOpen ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
+                }`}
             >
               <div className="px-4 py-4 space-y-3">
                 {/* Search bar */}
@@ -144,6 +144,11 @@ export const Header = () => {
                   />
                 </div>
 
+                <div className="flex items-center justify-between pt-2">
+                  <span className="text-white mr-2">Toggle theme:</span>
+                  <ThemeToggle />
+                </div>
+
                 {/* Navigation Items */}
                 <div className="flex flex-col space-y-2">
                   {navigationItems.map((item) => (

services/explorer-ui/src/components/info-badge.tsx

@@ -14,13 +14,14 @@ export const InfoBadge: FC<InfoBadgeProps> = ({
   error,
 }) => {
   const text = useMemo(() => {
-    if (error) return error.message;
-    if (data) return data;
+    if (error) { return error.message; }
+    if (data) { return data; }
     return "No Data";
   }, [data, error]);
+
   return (
-    <div className="flex flex-col bg-white w-full justify-between rounded-lg shadow-md p-4 ">
-      <p className="text-sm">{title}</p>
+    <div className="flex flex-col bg-white w-full justify-between rounded-lg shadow-md p-4">
+      <p className="text-sm text-primary dark:text-white">{title}</p>
       {isLoading ? (
         <Loader amount={1} />
       ) : (

services/explorer-ui/src/components/info-display/key-value-row.tsx

@@ -35,21 +35,22 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
   else if (extLink) { displayType = DisplayType.EXTERNAL_LINK; }
   else if (label.includes("status")) { displayType = DisplayType.BADGE; }
 
-  const commonTextClasses = "text-sm flex-grow text-end justify-end";
+  const commonTextClasses = "text-sm flex-grow text-end justify-end ";
+
   return (
     <div
       key={label}
-      className={`flex items-center gap-2 py-3 ${!isLast ? "border-b border-gray-200" : ""
+      className={`flex items-center gap-2 py-3 ${!isLast ? "border-b border-gray-200 dark:border-gray-700" : ""
         }`}
     >
-      <span className="text-gray-600 w-1/3">{label}</span>
+      <span className="text-gray-600 dark:text-gray-300 w-1/3">{label}</span>
       {displayType === DisplayType.TEXT && (
         <span className={commonTextClasses}>{value}</span>
       )}
       {displayType === DisplayType.LINK && (
         <Link
           to={link}
-          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer`}
+          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer hover:opacity-80`}
         >
           {value.startsWith("0x") ? truncateHashString(value) : value}
           <span className="ml-1">🔗</span>
@@ -73,7 +74,7 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
           href={extLink}
           target="_blank"
           rel="noreferrer"
-          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer`}
+          className={`${commonTextClasses} text-primary-600 text-primary cursor-pointer hover:opacity-80`}
         >
           {value}
           <span className="ml-1">↗️</span>

services/explorer-ui/src/components/magic-dev-link.tsx

@@ -25,7 +25,7 @@ Reason: ${systemHealth.reason}`}
   return (
     <div className={className}>
       <Link to={routes.dev.route} className="flex flex-row items-center">
-        <p className={`${textClasses} font-space-grotesk text-secondary`}>
+        <p className={`${textClasses} font-space-grotesk text-white`}>
           {L2_NETWORK_ID}
         </p>
         <CustomTooltip content={tooltipContent}>

services/explorer-ui/src/components/theme-toggle.tsx

@@ -0,0 +1,34 @@
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme as useNextTheme } from "next-themes";
+import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useNextTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch by only rendering after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <Button variant="ghost" size="icon" className="w-9 px-0" />;
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="w-9 px-0 text-white hover:text-white hover:bg-purple-light/20"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="h-5 w-5" />
+      )}
+    </Button>
+  );
+}

services/explorer-ui/src/components/ui/input.tsx

@@ -3,8 +3,7 @@ import { CrossIcon, LoadingIcon, SearchIcon } from "~/assets";
 
 import { cn } from "~/lib/utils";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -32,7 +31,7 @@ export interface SearchInputProps
 const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   ({ className, type, onIconClick, isLoading, noResults, ...props }, ref) => {
     return (
-      <div className="flex items-center pl-3 w-full bg-white rounded-md focus-visible:ring-1 focus-visible:ring-ring">
+      <div className="flex items-center pl-3 gap-1 w-full bg-white rounded-md focus-visible:ring-1 focus-visible:ring-ring">
         {noResults ? (
           <div>
             <CrossIcon />

services/explorer-ui/src/components/ui/textarea.tsx

@@ -2,15 +2,14 @@ import * as React from "react"
 
 import { cn } from "~/lib/utils"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 dark:text-white dark:border-gray-700",
           className
         )}
         ref={ref}

services/explorer-ui/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import "~/styles/global.css";
-import { QueryProvider, TanstackRouterProvider } from "./providers";
+import { QueryProvider, TanstackRouterProvider, ThemeProvider } from "./providers";
 
 // NOTE: these two lines are necessary for proper parsing of ChicmozL2Block
 import { Buffer } from "buffer";
@@ -15,14 +15,16 @@ if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <QueryProvider>
-        <TanstackRouterProvider />
-        <Toaster
-          icons={{
-            success: <SuccessIcon />,
-          }}
-        />
-      </QueryProvider>
+      <ThemeProvider>
+        <QueryProvider>
+          <TanstackRouterProvider />
+          <Toaster
+            icons={{
+              success: <SuccessIcon />,
+            }}
+          />
+        </QueryProvider>
+      </ThemeProvider>
     </StrictMode>,
   );
 }

services/explorer-ui/src/providers/index.ts

@@ -1,2 +1,3 @@
 export * from "./query-provider";
 export * from "./router-provider";
+export * from "./theme-provider";

services/explorer-ui/src/providers/theme-provider.tsx

@@ -0,0 +1,10 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </NextThemesProvider>
+  );
+}