From fe9a43dc0ba4c770b425009b97a5b53bef90f0c8 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sat, 26 Oct 2024 18:22:48 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20light/dark=20theme=20+=20c?=
 =?UTF-8?q?ustom=20theme=20switcher=20&=20update=20UI=20components=20with?=
 =?UTF-8?q?=20new=20theme=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/app/components/card.tsx           |   7 +-
 website/app/components/footer.tsx         |  14 +-
 website/app/components/getCode/index.tsx  |   7 +-
 website/app/components/header.tsx         |  20 +-
 website/app/components/installCommand.tsx |   3 +-
 website/app/components/loading.tsx        |   2 +-
 website/app/components/navbar/index.tsx   |  11 +-
 website/app/components/settings.tsx       |  11 +
 website/app/components/themeSwitcher.tsx  |  41 ++++
 website/app/providers/sonner.tsx          |   5 +-
 website/app/root.tsx                      |  42 +++-
 website/app/routes/_index.tsx             |   2 +-
 website/app/routes/action.set-theme.tsx   |  27 +++
 website/app/routes/folders._index.tsx     |   2 +-
 website/app/styles/globals.css            |  12 +
 website/app/theme/themeProvider.tsx       | 283 ++++++++++++++++++++++
 website/app/theme/themeServer.ts          |  31 +++
 website/app/ui/button.tsx                 |   2 +-
 website/app/ui/dialog.tsx                 |   6 +-
 website/app/ui/divider.tsx                |   9 +-
 website/app/ui/icons/feather.tsx          |  44 ++++
 21 files changed, 537 insertions(+), 44 deletions(-)
 create mode 100644 website/app/components/settings.tsx
 create mode 100644 website/app/components/themeSwitcher.tsx
 create mode 100644 website/app/routes/action.set-theme.tsx
 create mode 100644 website/app/theme/themeProvider.tsx
 create mode 100644 website/app/theme/themeServer.ts

diff --git a/website/app/components/card.tsx b/website/app/components/card.tsx
index 4423632..0cdeaac 100644
--- a/website/app/components/card.tsx
+++ b/website/app/components/card.tsx
@@ -24,14 +24,17 @@ const Card = (props: iCard) => {
   };
 
   return (
-    <div className="group flex flex-col items-center justify-center space-y-1 rounded-lg border border-zinc-800 px-4 pb-2 pt-4 transition-colors hover:bg-zinc-800/50">
+    <div className="group flex flex-col items-center justify-center space-y-1 rounded-lg border border-zinc-200 px-4 pb-2 pt-4 hover:bg-zinc-200/50 dark:border-zinc-800 dark:hover:bg-zinc-800/50">
       <props.icon width={props.iconSize} height={props.iconSize} />
-      <p className="text-sm tracking-tight text-white">{props.name}</p>
+      <p className="text-sm tracking-tight text-black dark:text-white">
+        {props.name}
+      </p>
       <div className="flex items-center space-x-1">
         <Button
           variant="ghost"
           size="icon"
           onClick={handleCopy}
+          className="transition-none"
           title="Copy to clipboard"
         >
           <CopyIcon width={17} height={17} strokeWidth={1.5} />
diff --git a/website/app/components/footer.tsx b/website/app/components/footer.tsx
index ca74715..b6eee48 100644
--- a/website/app/components/footer.tsx
+++ b/website/app/components/footer.tsx
@@ -4,37 +4,37 @@ import { containerClasses } from "@/ui/container";
 
 const Footer = () => {
   return (
-    <footer className="animate-in slide-in-from-bottom-3 fade-in-30 fixed bottom-0 w-full bg-zinc-900/80 py-4 text-sm text-zinc-400 backdrop-blur-sm duration-500">
+    <footer className="animate-in slide-in-from-bottom-3 fade-in-30 fixed bottom-0 w-full bg-zinc-50 py-4 text-sm text-zinc-600 backdrop-blur-sm dark:bg-zinc-900/80 dark:text-zinc-400">
       <div
         className={cn(containerClasses, "flex items-center justify-between")}
       >
         <ExternalLink
           title="Miguel Solorio"
           href="https://www.miguelsolorio.com/"
-          className="group flex items-center space-x-2 transition-colors hover:text-white"
+          className="group flex items-center space-x-2 transition-colors hover:text-black dark:hover:text-white"
         >
           <span className="hidden md:block">Icons crafted by </span>
           <img
-            className="h-6 w-6 rounded-full transition-shadow group-hover:ring-2 group-hover:ring-react-symbol-pink"
+            className="group-hover:ring-react-symbol-pink h-6 w-6 rounded-full transition-shadow group-hover:ring-2"
             src="https://avatars.githubusercontent.com/u/35271042?v=4"
             alt="Miguel Solorio"
           />
-          <span className="underline decoration-zinc-500 decoration-wavy underline-offset-[4px] group-hover:decoration-react-symbol-pink">
+          <span className="group-hover:decoration-react-symbol-pink underline decoration-zinc-500 decoration-wavy underline-offset-[4px]">
             Miguel Solorio
           </span>
         </ExternalLink>
         <ExternalLink
           title="Pablo Hernández"
           href="https://pheralb.dev"
-          className="group flex items-center space-x-2 transition-colors hover:text-white"
+          className="group flex items-center space-x-2 transition-colors hover:text-black dark:hover:text-white"
         >
           <span className="hidden md:block">Website by</span>
           <img
-            className="h-6 w-6 rounded-full transition-shadow group-hover:ring-2 group-hover:ring-react-symbol-aqua"
+            className="group-hover:ring-react-symbol-aqua h-6 w-6 rounded-full transition-shadow group-hover:ring-2"
             src="https://avatars.githubusercontent.com/u/62877300?v=4"
             alt="Pablo Hernández"
           />
-          <span className="underline decoration-zinc-500 decoration-wavy underline-offset-[4px] group-hover:decoration-react-symbol-aqua">
+          <span className="group-hover:decoration-react-symbol-aqua underline decoration-zinc-500 decoration-wavy underline-offset-[4px]">
             Pablo Hernández
           </span>
         </ExternalLink>
diff --git a/website/app/components/getCode/index.tsx b/website/app/components/getCode/index.tsx
index 3da5b81..a26c060 100644
--- a/website/app/components/getCode/index.tsx
+++ b/website/app/components/getCode/index.tsx
@@ -74,6 +74,7 @@ const GetCode = (props: iGetCode) => {
         variant="ghost"
         size="icon"
         onClick={() => handleGetCode()}
+        className="transition-none"
         title="Get React Component"
       >
         <CodeIcon width={17} height={17} strokeWidth={1.5} />
@@ -95,11 +96,11 @@ const GetCode = (props: iGetCode) => {
             </div>
           ) : fileContent ? (
             <div className="my-1 flex flex-col space-y-1 overflow-hidden">
-              <div className="mr-1 flex items-center justify-end space-x-2 font-mono text-[12px] text-zinc-400">
+              <div className="mr-1 flex items-center justify-end space-x-2 font-mono text-[12px] text-zinc-600 dark:text-zinc-400">
                 <Reactjs width={16} height={16} />
                 <span>{camelCase(props.componentName)}.tsx</span>
               </div>
-              <div className="max-h-80 rounded-lg border border-zinc-800 p-3 font-mono text-sm hover:overflow-auto">
+              <div className="max-h-80 rounded-lg border border-zinc-200 p-3 font-mono text-sm hover:overflow-auto dark:border-zinc-800">
                 <pre
                   className="select-all"
                   dangerouslySetInnerHTML={{ __html: highlight(fileContent) }}
@@ -109,7 +110,7 @@ const GetCode = (props: iGetCode) => {
           ) : (
             <div className="my-4 flex flex-col items-center justify-center gap-2">
               <AlertIcon
-                height={25}
+                height={30}
                 className="flex items-center justify-center"
               />
               <p className="text-sm text-zinc-400">
diff --git a/website/app/components/header.tsx b/website/app/components/header.tsx
index 517ecef..7f4e361 100644
--- a/website/app/components/header.tsx
+++ b/website/app/components/header.tsx
@@ -29,6 +29,10 @@ const linkClasses = buttonVariants({
   className: "rounded-3xl w-auto group",
 });
 
+const arrowClasses = cn(
+  "text-zinc-400 transition-transform group-hover:translate-x-[0.1rem] group-hover:text-black dark:group-hover:text-white",
+);
+
 interface iHeaderProps {
   npmVersion: string;
 }
@@ -38,7 +42,7 @@ const Header = (props: iHeaderProps) => {
     <section
       className={cn(
         "pb-4 pt-8 md:py-10",
-        "flex flex-col space-y-6",
+        "flex flex-col space-y-5",
         containerClasses,
       )}
     >
@@ -51,17 +55,17 @@ const Header = (props: iHeaderProps) => {
           >
             React-Symbols
           </Link>
-          <div className="flex flex-col items-start space-x-0 space-y-2 text-sm text-zinc-400 md:flex-row md:space-x-2 md:space-y-0 md:text-[16px]">
+          <div className="flex flex-col items-start space-x-0 space-y-2 text-sm text-zinc-600 md:flex-row md:space-x-2 md:space-y-0 md:text-[16px] dark:text-zinc-400">
             <span>
               Beautifully File & Folder Icons for your React projects.
             </span>
           </div>
         </div>
       </div>
-      <div className="flex w-full flex-col items-center space-x-0 space-y-4 md:w-auto md:flex-row md:space-x-4 md:space-y-0">
+      <div className="mb-1 flex w-full flex-col items-center space-x-0 space-y-4 md:w-auto md:flex-row md:space-x-4 md:space-y-0">
         <InstallCommand className="w-full md:w-auto" />
         <Divider className="hidden md:block" />
-        <nav className="container flex items-center space-x-2 overflow-y-auto md:w-auto">
+        <nav className="container flex items-center space-x-2 overflow-y-auto pb-1 md:w-auto">
           <ExternalLink
             title="NPM Package"
             href="https://www.npmjs.com/package/@react-symbols/icons"
@@ -73,7 +77,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.1rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
           <ExternalLink
@@ -87,7 +91,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
           <ExternalLink
@@ -101,7 +105,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
           <ExternalLink
@@ -115,7 +119,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
         </nav>
diff --git a/website/app/components/installCommand.tsx b/website/app/components/installCommand.tsx
index c3ecc68..9870324 100644
--- a/website/app/components/installCommand.tsx
+++ b/website/app/components/installCommand.tsx
@@ -77,8 +77,9 @@ const InstallCommand = (props: iInstallCommandProps) => {
       className={cn(
         buttonVariants({
           variant: "outline",
+          className: "active:scale-100",
         }),
-        "select-all space-x-3 rounded-3xl text-zinc-400 transition-colors hover:bg-transparent hover:text-white dark:hover:bg-transparent",
+        "select-all space-x-3 rounded-3xl text-zinc-600 transition-colors hover:bg-transparent dark:text-zinc-400 dark:hover:bg-transparent dark:hover:text-white",
         props.className,
       )}
     >
diff --git a/website/app/components/loading.tsx b/website/app/components/loading.tsx
index cf148c9..6c15af1 100644
--- a/website/app/components/loading.tsx
+++ b/website/app/components/loading.tsx
@@ -8,7 +8,7 @@ interface iLoading {
 const Loading = (props: iLoading) => (
   <div
     className={cn(
-      "animate-in animate-out fade-in-40 flex flex-col space-y-2 duration-1000",
+      "animate-in animate-out fade-in-40 flex flex-col space-y-2 ",
       props.className,
     )}
   >
diff --git a/website/app/components/navbar/index.tsx b/website/app/components/navbar/index.tsx
index daa1466..0cb4c98 100644
--- a/website/app/components/navbar/index.tsx
+++ b/website/app/components/navbar/index.tsx
@@ -26,7 +26,7 @@ const NavIconsRoutes = [
 const Navbar = () => {
   const location = useLocation();
   return (
-    <nav className="sticky -top-1 z-50 border-y border-zinc-800 bg-zinc-900/80 py-[10px] backdrop-blur-sm">
+    <nav className="sticky -top-1 z-40 border-y border-zinc-200 bg-zinc-100/80 py-[10px] backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-900/80">
       <div
         className={cn(
           containerClasses,
@@ -46,7 +46,7 @@ const Navbar = () => {
                   ? `Search ${totalFolders} folder icons...`
                   : `Search ${totalLibraryIcons} icons...`
             }
-            className="rounded-none border-b border-l-0 border-r-0 border-t-0 pl-[34px] text-[16px] placeholder:text-[16px] focus:border-none focus:ring-0 md:border-none md:pl-[38px] dark:focus:border-none"
+            className="rounded-none border-b border-l-0 border-r-0 border-t-0 pl-[34px] text-[16px] shadow-none placeholder:text-[16px] focus:border-none focus:ring-0 focus-visible:ring-0 md:border-none md:pl-[38px] dark:focus:border-none dark:focus:ring-0"
           />
         </div>
         <Divider className="hidden md:block" />
@@ -61,11 +61,12 @@ const Navbar = () => {
               className={cn(
                 buttonVariants({
                   variant: "outline",
+                  className: "shadow-none",
                 }),
                 "w-full md:w-auto",
                 location.pathname === link.href
-                  ? "border-zinc-400 text-white"
-                  : "border-none bg-transparent text-zinc-400 hover:text-white dark:bg-transparent",
+                  ? "border-zinc-200 text-black dark:border-zinc-800 dark:text-white"
+                  : "border-none bg-transparent text-zinc-600 hover:text-black dark:bg-transparent dark:text-zinc-400 dark:hover:text-white",
               )}
             >
               {location.pathname === link.href ? (
@@ -78,7 +79,7 @@ const Navbar = () => {
           ))}
         </div>
         <Divider className="hidden md:block" />
-        <div className="flex w-full flex-col space-y-1 pb-1 text-zinc-400 transition-colors hover:text-white md:w-56 md:pb-0">
+        <div className="flex w-full flex-col space-y-1 pb-1 text-zinc-600 hover:text-black md:w-56 md:pb-0 dark:text-zinc-400 dark:hover:text-white">
           <p className="select-none text-xs font-medium uppercase">Size</p>
           <IconSize />
         </div>
diff --git a/website/app/components/settings.tsx b/website/app/components/settings.tsx
new file mode 100644
index 0000000..2f3518e
--- /dev/null
+++ b/website/app/components/settings.tsx
@@ -0,0 +1,11 @@
+import ThemeSwitcher from "./themeSwitcher";
+
+const Settings = () => {
+  return (
+    <nav className="fixed right-3 top-2 z-50 md:top-3">
+      <ThemeSwitcher />
+    </nav>
+  );
+};
+
+export default Settings;
diff --git a/website/app/components/themeSwitcher.tsx b/website/app/components/themeSwitcher.tsx
new file mode 100644
index 0000000..e5d7269
--- /dev/null
+++ b/website/app/components/themeSwitcher.tsx
@@ -0,0 +1,41 @@
+import { type Theme, useTheme } from "@/theme/themeProvider";
+import { MoonIcon, SunIcon } from "@/ui/icons/feather";
+import { cn } from "@/utils";
+
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useTheme();
+
+  const buttons = [
+    {
+      label: "dark" as const,
+      icon: <MoonIcon width={14} />,
+      active: theme === "dark",
+    },
+    {
+      label: "light" as const,
+      icon: <SunIcon width={14} />,
+      active: theme === "light",
+    },
+  ];
+
+  return (
+    <span className="flex w-fit items-center gap-0.5 overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-800/80">
+      {buttons.map(({ label, icon, active }) => (
+        <button
+          type="button"
+          title={`Switch to ${label} theme`}
+          key={label}
+          onClick={() => setTheme(() => label as Theme)}
+          className={cn(
+            "flex h-6 w-6 items-center justify-center rounded-none transition-all hover:opacity-50",
+            active && "bg-zinc-200 dark:bg-zinc-900",
+          )}
+        >
+          {icon}
+        </button>
+      ))}
+    </span>
+  );
+};
+
+export default ThemeSwitcher;
diff --git a/website/app/providers/sonner.tsx b/website/app/providers/sonner.tsx
index 9e3a1c4..9789c5a 100644
--- a/website/app/providers/sonner.tsx
+++ b/website/app/providers/sonner.tsx
@@ -11,8 +11,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-zinc-900 group-[.toaster]:text-zinc-50 group-[.toaster]:border-zinc-800 group-[.toaster]:shadow-lg",
-          description: "group-[.toaster]:text-zinc-400 font-mono",
+            "group toast group-[.toaster]:bg-zinc-100 dark:group-[.toaster]:bg-zinc-900 group-[.toaster]:text-zinc-950 dark:group-[.toaster]:text-zinc-50 group-[.toaster]:border-zinc-200 dark:group-[.toaster]:border-zinc-800 group-[.toaster]:shadow-lg",
+          description:
+            "group-[.toaster]:text-zinc-600 dark:group-[.toaster]:text-zinc-400 font-mono",
           icon: "group-[.toaster]:mr-3",
         },
       }}
diff --git a/website/app/root.tsx b/website/app/root.tsx
index 51b3b38..78d46d5 100644
--- a/website/app/root.tsx
+++ b/website/app/root.tsx
@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
-import type { LinksFunction, MetaFunction } from "@vercel/remix";
+import type {
+  LinksFunction,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "@vercel/remix";
 
 import {
   json,
@@ -25,6 +29,16 @@ import Navbar from "./components/navbar";
 // Providers:
 import { Toaster } from "./providers/sonner";
 
+// Theme:
+import {
+  ThemeBody,
+  ThemeHead,
+  ThemeProvider,
+  useTheme,
+} from "./theme/themeProvider";
+import { getThemeSession } from "./theme/themeServer";
+import Settings from "./components/settings";
+
 // Links:
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: tailwind },
@@ -82,16 +96,18 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export async function loader() {
+export async function loader({ request }: LoaderFunctionArgs) {
   const metadata = await getLatestVersion(globals.npmPackageName);
-  return json({ version: metadata.version });
+  const themeSession = await getThemeSession(request);
+  return json({ version: metadata.version, theme: themeSession.getTheme() });
 }
 
 // App Layout:
-export function Layout({ children }: { children: ReactNode }) {
+function App({ children }: { children: ReactNode }) {
   const data = useLoaderData<typeof loader>();
+  const [theme] = useTheme();
   return (
-    <html lang="en" className="dark" style={{ colorScheme: "dark" }}>
+    <html lang="en" className={cn(theme)} style={{ colorScheme: theme! }}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -125,18 +141,21 @@ export function Layout({ children }: { children: ReactNode }) {
         <meta name="twitter:title" content="React-Symbols" />
         <Meta />
         <Links />
+        <ThemeHead ssrTheme={Boolean(data.theme)} />
       </head>
       <body
         className={cn(
           "font-sans antialiased",
           "bg-zinc-50 text-black dark:bg-zinc-900 dark:text-white",
           "selection:bg-zinc-300 selection:text-zinc-900 dark:selection:bg-zinc-700 dark:selection:text-zinc-50",
-          "scroll-smooth",
+          "relative",
         )}
       >
         <Header npmVersion={data.version!} />
+        <Settings />
         <Navbar />
         {children}
+        <ThemeBody ssrTheme={Boolean(data.theme)} />
         <Footer />
         <Toaster />
         <ScrollRestoration />
@@ -146,6 +165,13 @@ export function Layout({ children }: { children: ReactNode }) {
   );
 }
 
-export default function App() {
-  return <Outlet />;
+export default function AppWithProviders() {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <ThemeProvider specifiedTheme={data.theme}>
+      <App>
+        <Outlet />
+      </App>
+    </ThemeProvider>
+  );
 }
diff --git a/website/app/routes/_index.tsx b/website/app/routes/_index.tsx
index 571efed..7ae0a2a 100644
--- a/website/app/routes/_index.tsx
+++ b/website/app/routes/_index.tsx
@@ -35,7 +35,7 @@ export default function Index() {
   ) as iIcons[];
 
   return (
-    <main className="animate-in fade-in-60 duration-700">
+    <main className="animate-in fade-in-60">
       {filteredIcons.length === 0 ? (
         <NotFound input={search} />
       ) : (
diff --git a/website/app/routes/action.set-theme.tsx b/website/app/routes/action.set-theme.tsx
new file mode 100644
index 0000000..6cdd1b8
--- /dev/null
+++ b/website/app/routes/action.set-theme.tsx
@@ -0,0 +1,27 @@
+import type { ActionFunctionArgs } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
+
+import { isTheme } from "@/theme/themeProvider";
+import { getThemeSession } from "@/theme/themeServer";
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const themeSession = await getThemeSession(request);
+  const requestText = await request.text();
+  const form = new URLSearchParams(requestText);
+  const theme = form.get("theme");
+
+  if (!isTheme(theme)) {
+    return json({
+      success: false,
+      message: `theme value of ${theme} is not a valid theme`,
+    });
+  }
+
+  themeSession.setTheme(theme);
+  return json(
+    { success: true },
+    { headers: { "Set-Cookie": await themeSession.commit() } },
+  );
+};
+
+export const loader = async () => redirect("/", { status: 404 });
diff --git a/website/app/routes/folders._index.tsx b/website/app/routes/folders._index.tsx
index bb63a10..54da562 100644
--- a/website/app/routes/folders._index.tsx
+++ b/website/app/routes/folders._index.tsx
@@ -33,7 +33,7 @@ export default function Folders() {
   ) as iIcons[];
 
   return (
-    <main className="animate-in fade-in-60 duration-700">
+    <main className="animate-in fade-in-60">
       {filteredIcons.length === 0 ? (
         <NotFound input={search} isFolder={true} />
       ) : (
diff --git a/website/app/styles/globals.css b/website/app/styles/globals.css
index cd03f34..650bb45 100644
--- a/website/app/styles/globals.css
+++ b/website/app/styles/globals.css
@@ -4,6 +4,18 @@
 
 @layer base {
   :root {
+    --radius: 0.5rem;
+    --sh-class: #648de8;
+    --sh-sign: #14abc2;
+    --sh-string: #14abc2;
+    --sh-keyword: #c084fc;
+    --sh-comment: #565f89;
+    --sh-jsxliterals: #648de8;
+    --sh-property: #14abc2;
+    --sh-entity: #c084fc;
+  }
+
+  .dark {
     --radius: 0.5rem;
     --sh-class: #648de8;
     --sh-sign: #21cee8;
diff --git a/website/app/theme/themeProvider.tsx b/website/app/theme/themeProvider.tsx
new file mode 100644
index 0000000..a6275a8
--- /dev/null
+++ b/website/app/theme/themeProvider.tsx
@@ -0,0 +1,283 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+
+import { useFetcher } from "@remix-run/react";
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+enum Theme {
+  DARK = "dark",
+  LIGHT = "light",
+}
+
+const themes: Array<Theme> = Object.values(Theme);
+
+type ThemeContextType = [Theme | null, Dispatch<SetStateAction<Theme | null>>];
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const prefersDarkMQ = "(prefers-color-scheme: dark)";
+const getPreferredTheme = () =>
+  window.matchMedia(prefersDarkMQ).matches ? Theme.DARK : Theme.LIGHT;
+
+function ThemeProvider({
+  children,
+  specifiedTheme,
+}: {
+  children: ReactNode;
+  specifiedTheme: Theme | null;
+}) {
+  const [theme, setTheme] = useState<Theme | null>(() => {
+    // On the server, if we don't have a specified theme then we should
+    // return null and the clientThemeCode will set the theme for us
+    // before hydration. Then (during hydration), this code will get the same
+    // value that clientThemeCode got so hydration is happy.
+    if (specifiedTheme) {
+      if (themes.includes(specifiedTheme)) {
+        return specifiedTheme;
+      } else {
+        return null;
+      }
+    }
+
+    // there's no way for us to know what the theme should be in this context
+    // the client will have to figure it out before hydration.
+    if (typeof document === "undefined") {
+      return null;
+    }
+
+    return getPreferredTheme();
+  });
+  const persistTheme = useFetcher();
+  const persistThemeRef = useRef(persistTheme);
+  useEffect(() => {
+    persistThemeRef.current = persistTheme;
+  }, [persistTheme]);
+
+  const mountRun = useRef(false);
+
+  useEffect(() => {
+    if (!mountRun.current) {
+      mountRun.current = true;
+      return;
+    }
+    if (!theme) {
+      return;
+    }
+
+    persistThemeRef.current.submit(
+      { theme },
+      { action: "action/set-theme", method: "post" },
+    );
+  }, [theme]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(prefersDarkMQ);
+    const handleChange = () => {
+      setTheme(mediaQuery.matches ? Theme.DARK : Theme.LIGHT);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={[theme, setTheme]}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+const clientThemeCode = `
+// hi there dear reader 👋
+// this is how I make certain we avoid a flash of the wrong theme. If you select
+// a theme, then I'll know what you want in the future and you'll not see this
+// script anymore.
+;(() => {
+  const theme = window.matchMedia('${prefersDarkMQ}').matches
+    ? '${Theme.DARK}'
+    : '${Theme.LIGHT}';
+
+  const cl = document.documentElement.classList;
+  if (
+    cl.contains('${Theme.LIGHT}') || cl.contains('${Theme.DARK}')
+  ) {
+    // The theme is already applied...
+    // this script shouldn't exist if the theme is already applied!
+    console.warn("See theme-provider.tsx>clientThemeCode>cl.contains");
+    // Hi there, could you let me know you're seeing this console.warn? Thanks!
+  } else {
+    cl.add(theme);
+  }
+
+  const meta = document.querySelector('meta[name=color-scheme]');
+  if (meta) {
+    meta.content = theme === '${Theme.DARK}' ? 'dark light' : 'light dark';
+  } else {
+    console.warn("See theme-provider.tsx>clientThemeCode>meta");
+    // Hey, could you let me know you're seeing this console.warn? Thanks!
+  }
+})();
+`
+  // Remove double slash comments & replace excess white space with a single space.
+  .replace(/((?<=[^:])\/\/.*|\s)+/g, " ")
+  .trim();
+
+const themeStylesCode = `
+  /* default light, but app-preference is "dark" */
+  html.dark {
+    light-mode {
+      display: none;
+    }
+  }
+
+  /* default light, and no app-preference */
+  html:not(.dark) {
+    dark-mode {
+      display: none;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /* prefers dark, but app-preference is "light" */
+    html.light {
+      dark-mode {
+        display: none;
+      }
+    }
+
+    /* prefers dark, and app-preference is "dark" */
+    html.dark,
+    /* prefers dark and no app-preference */
+    html:not(.light) {
+      light-mode {
+        display: none;
+      }
+    }
+  }
+`;
+
+function ThemeHead({ ssrTheme }: { ssrTheme: boolean }) {
+  const [theme] = useTheme();
+
+  return (
+    <>
+      {/*
+        On the server, "theme" might be `null`, so clientThemeCode ensures that
+        this is correct before hydration.
+      */}
+      <meta
+        name="color-scheme"
+        content={theme === "light" ? "light dark" : "dark light"}
+      />
+      {/*
+        If we know what the theme is from the server then we don't need
+        to do fancy tricks prior to hydration to make things match.
+      */}
+      {ssrTheme ? null : (
+        <>
+          <script
+            // NOTE: we cannot use type="module" because that automatically makes
+            // the script "defer". That doesn't work for us because we need
+            // this script to run synchronously before the rest of the document
+            // is finished loading.
+            dangerouslySetInnerHTML={{ __html: clientThemeCode }}
+          />
+          <style dangerouslySetInnerHTML={{ __html: themeStylesCode }} />
+        </>
+      )}
+    </>
+  );
+}
+
+const clientDarkAndLightModeElsCode = `;(() => {
+  const theme = window.matchMedia(${JSON.stringify(prefersDarkMQ)}).matches
+    ? 'dark'
+    : 'light';
+  const darkEls = document.querySelectorAll("dark-mode");
+  const lightEls = document.querySelectorAll("light-mode");
+  for (const darkEl of darkEls) {
+    if (theme === "dark") {
+      for (const child of darkEl.childNodes) {
+        darkEl.parentElement?.append(child);
+      }
+    }
+    darkEl.remove();
+  }
+  for (const lightEl of lightEls) {
+    if (theme === "light") {
+      for (const child of lightEl.childNodes) {
+        lightEl.parentElement?.append(child);
+      }
+    }
+    lightEl.remove();
+  }
+})();`;
+
+function ThemeBody({ ssrTheme }: { ssrTheme: boolean }) {
+  return ssrTheme ? null : (
+    <script
+      dangerouslySetInnerHTML={{ __html: clientDarkAndLightModeElsCode }}
+    />
+  );
+}
+
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+/**
+ * This allows you to render something that depends on the theme without
+ * worrying about whether it'll SSR properly when we don't actually know
+ * the user's preferred theme.
+ */
+function Themed({
+  dark,
+  light,
+  initialOnly = false,
+}: {
+  dark: ReactNode | string;
+  light: ReactNode | string;
+  initialOnly?: boolean;
+}) {
+  const [theme] = useTheme();
+  const [initialTheme] = useState(theme);
+  const themeToReference = initialOnly ? initialTheme : theme;
+  const serverRenderWithUnknownTheme =
+    !theme && typeof document === "undefined";
+
+  if (serverRenderWithUnknownTheme) {
+    // stick them both in and our little script will update the DOM to match
+    // what we'll render in the client during hydration.
+    return (
+      <>
+        {createElement("dark-mode", null, dark)}
+        {createElement("light-mode", null, light)}
+      </>
+    );
+  }
+
+  return <>{themeToReference === "light" ? light : dark}</>;
+}
+
+function isTheme(value: unknown): value is Theme {
+  return typeof value === "string" && themes.includes(value as Theme);
+}
+
+export {
+  isTheme,
+  Theme,
+  Themed,
+  ThemeBody,
+  ThemeHead,
+  ThemeProvider,
+  useTheme,
+};
diff --git a/website/app/theme/themeServer.ts b/website/app/theme/themeServer.ts
new file mode 100644
index 0000000..5f495a8
--- /dev/null
+++ b/website/app/theme/themeServer.ts
@@ -0,0 +1,31 @@
+import type { Theme } from "./themeProvider";
+
+import { createCookieSessionStorage } from "@remix-run/node";
+import { isTheme } from "./themeProvider";
+
+const sessionSecret = process.env.SESSION_SECRET ?? "DEFAULT_SECRET";
+
+const themeStorage = createCookieSessionStorage({
+  cookie: {
+    name: "react-symbols-theme",
+    secure: true,
+    secrets: [sessionSecret],
+    sameSite: "lax",
+    path: "/",
+    httpOnly: true,
+  },
+});
+
+async function getThemeSession(request: Request) {
+  const session = await themeStorage.getSession(request.headers.get("Cookie"));
+  return {
+    getTheme: () => {
+      const themeValue = session.get("theme");
+      return isTheme(themeValue) ? themeValue : null;
+    },
+    setTheme: (theme: Theme) => session.set("theme", theme),
+    commit: () => themeStorage.commitSession(session),
+  };
+}
+
+export { getThemeSession };
diff --git a/website/app/ui/button.tsx b/website/app/ui/button.tsx
index 986cfeb..78c1c74 100644
--- a/website/app/ui/button.tsx
+++ b/website/app/ui/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center space-x-2 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-200 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-700",
+  "inline-flex items-center space-x-2 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-transform focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-200 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-700 active:scale-[0.97]",
   {
     variants: {
       variant: {
diff --git a/website/app/ui/dialog.tsx b/website/app/ui/dialog.tsx
index de7c8f7..b458569 100644
--- a/website/app/ui/dialog.tsx
+++ b/website/app/ui/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-zinc-900/80",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-zinc-200/80 dark:bg-zinc-900/80",
       className,
     )}
     {...props}
@@ -35,13 +35,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:border-zinc-800 dark:bg-zinc-900",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-zinc-50 p-6 shadow-lg duration-200 sm:rounded-lg dark:border-zinc-800 dark:bg-zinc-900",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-zinc-950 focus:ring-0 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-zinc-950 disabled:pointer-events-none data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-500 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300 dark:data-[state=open]:bg-zinc-800 dark:data-[state=open]:text-zinc-400">
         <CrossIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/website/app/ui/divider.tsx b/website/app/ui/divider.tsx
index f717c07..d5a2b65 100644
--- a/website/app/ui/divider.tsx
+++ b/website/app/ui/divider.tsx
@@ -5,7 +5,14 @@ interface iDividerProps {
 }
 
 const Divider = (props: iDividerProps) => {
-  return <div className={cn("h-7 w-[1.8px] bg-zinc-800", props.className)} />;
+  return (
+    <div
+      className={cn(
+        "h-7 w-[1.8px] bg-zinc-200 dark:bg-zinc-800",
+        props.className,
+      )}
+    />
+  );
 };
 
 export default Divider;
diff --git a/website/app/ui/icons/feather.tsx b/website/app/ui/icons/feather.tsx
index 46ea945..9f4de0c 100644
--- a/website/app/ui/icons/feather.tsx
+++ b/website/app/ui/icons/feather.tsx
@@ -153,3 +153,47 @@ export const AlertIcon = (props: SVGProps<SVGSVGElement>) => (
     <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01" />
   </svg>
 );
+
+export const MoonIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
+export const SunIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx={12} cy={12} r={5} />
+    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+  </svg>
+);
+
+export const MonitorIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <rect width={20} height={14} x={2} y={3} rx={2} ry={2} />
+    <path d="M8 21h8M12 17v4" />
+  </svg>
+);