Redot-Engine · charlottewiltshire0 · Jan 10, 2025 · Jan 10, 2025 · Jan 10, 2025 · Jan 10, 2025
diff --git a/app/(root)/blog/[slug]/not-found.tsx b/app/(root)/blog/[slug]/not-found.tsx
@@ -10,7 +10,7 @@ export default function NotFound() {
 
   return (
     <section className="flex min-h-screen flex-col">
-      <div className="flex-grow overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-32">
+      <div className="flex-grow overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-32 dark:from-transparent dark:to-[#1F0000]">
         <div className="mx-auto max-w-[540px]">
           <div className="flex flex-col items-center justify-center gap-4">
             <Image
@@ -20,10 +20,10 @@ export default function NotFound() {
               height={160}
             />
             <div className="flex flex-col">
-              <h2 className="mt-5 text-center text-4xl font-bold tracking-tighter md:text-[54px] md:leading-[60px]">
+              <h2 className="mt-5 text-center text-4xl font-bold tracking-tighter text-zinc-900 dark:text-white md:text-[54px] md:leading-[60px]">
                 {t("title")}
               </h2>
-              <p className="mt-5 text-center text-xl tracking-tighter text-black/60 md:text-[22px] md:leading-[30px]">
+              <p className="mt-5 text-center text-xl tracking-tighter text-muted-foreground md:text-[22px] md:leading-[30px]">
                 {t("description")}
               </p>
             </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -43,8 +43,15 @@ export default async function RootLayout({
         <link rel="preconnect" href="https://image.redotengine.org" />
       </head>
       <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID ?? ""} />
-      <body className={`${inter.className} bg-background antialiased`}>
-        <ThemeProvider attribute="class" defaultTheme="light">
+      <body
+        className={`${inter.className} bg-background antialiased dark:bg-black`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
           <NextIntlClientProvider messages={messages}>
             {children}
           </NextIntlClientProvider>

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Banner.tsx b/components/Banner.tsx
@@ -18,8 +18,10 @@ export default function Banner({
   if (!mainMessage) return null;
 
   return (
-    <div className="flex items-center justify-center gap-3 bg-black py-3 text-sm font-medium text-white">
-      <p className="hidden text-white/60 md:block">{subMessage}</p>
+    <div className="flex items-center justify-center gap-3 bg-black py-3 text-sm font-medium text-white dark:bg-white dark:text-black">
+      <p className="hidden text-white/60 dark:text-black/60 md:block">
+        {subMessage}
+      </p>
       {subMessage && (
         <div>
           {link ? (

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -12,12 +12,13 @@ import { footer } from "@/constants/footer";
 import { useTranslations } from "next-intl";
 import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { IconArrowUpRight } from "@tabler/icons-react";
+import { ModeToggle } from "@/components/ModeToggle";
 
 export const Footer = () => {
   const t = useTranslations("footer");
 
   return (
-    <footer className="relative bottom-0 z-[50] w-full bg-black text-white">
+    <footer className="relative bottom-0 z-[50] w-full bg-black text-white dark:bg-white dark:text-black">
       <div className="px-10 py-16 lg:px-40">
         <div className="flex flex-col gap-10">
           <div className="mb-2 flex flex-col justify-between gap-6 md:flex-row">
@@ -36,7 +37,7 @@ export const Footer = () => {
                       alt={`${social.icon} logo`}
                       width={28}
                       height={28}
-                      className="opacity-60 transition-all duration-300 hover:opacity-70"
+                      className="opacity-60 transition-all duration-300 hover:opacity-70 dark:invert"
                     />
                   </Link>
                 ))}
@@ -45,15 +46,15 @@ export const Footer = () => {
             <div className="grid grid-cols-2 gap-16 lg:grid-cols-3">
               {footer.map((category) => (
                 <div key={category.title} className="text-sm">
-                  <h3 className="font-medium text-white/80">
+                  <h3 className="font-medium text-white/80 dark:text-black/80">
                     {t(category.title)}
                   </h3>
                   <ul className="mt-4 space-y-2">
                     {category.children?.map((item) => (
                       <li key={item.title}>
                         <Link
                           href={item.href ?? "#"}
-                          className="flex items-center text-white/60 transition duration-300 hover:text-white"
+                          className="flex items-center text-white/60 transition duration-300 hover:text-white dark:text-black/60 dark:hover:text-black"
                           target={item.newTab ? "_blank" : "_self"}
                           rel={item.newTab ? "noopener noreferrer" : undefined}
                         >
@@ -71,34 +72,38 @@ export const Footer = () => {
           </div>
 
           <div className="flex flex-col gap-8">
-            <Separator className="bg-white/30" />
+            <Separator className="bg-white/30 dark:bg-black/30" />
 
             <div className="flex flex-wrap items-center justify-between gap-8">
               <Image
                 src="/logo.webp"
                 alt="Redot Engine Logo"
+                className="dark:invert"
                 width={36}
                 height={36}
               />
 
-              <span className="order-first w-full text-center text-sm text-white/60 md:order-none md:w-auto">
+              <span className="order-first w-full text-center text-sm text-white/60 dark:text-black/60 md:order-none md:w-auto">
                 {t("copyright.text")}&nbsp;
                 <span className="block lg:inline">
                   {t("copyright.website")}&nbsp;
                   <Link
                     href={links.websiteGithub}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline underline-offset-4 transition-all duration-300 hover:text-white/70"
+                    className="underline underline-offset-4 transition-all duration-300 hover:text-white/70 dark:hover:text-black/70"
                   >
                     {t("copyright.sourceCode")}
                   </Link>
                 </span>
               </span>
 
-              <Button variant="secondary" asChild>
-                <Link href="/settings">{t("buttons.settings")}</Link>
-              </Button>
+              <div className="flex flex-row gap-4">
+                <ModeToggle />
+                <Button variant="secondary" asChild>
+                  <Link href="/settings">{t("buttons.settings")}</Link>
+                </Button>
+              </div>
             </div>
           </div>
         </div>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -36,7 +36,7 @@ export const Header = () => {
                 {header.map((link) => (
                   <Link
                     key={link.label}
-                    className="flex items-center text-base font-medium text-black/60 transition-colors duration-300 hover:text-black"
+                    className="flex items-center text-base font-medium text-black/60 transition-colors duration-300 hover:text-black dark:text-white/60 dark:hover:text-white"
                     href={link.href}
                     target={link.newTab ? "_blank" : "_self"}
                     rel={link.newTab ? "noopener noreferrer" : undefined}

diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
@@ -43,14 +43,14 @@ export default function LanguageSwitcher() {
   };
 
   return (
-    <div className="dark">
+    <div className="">
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <button
             role="combobox"
             aria-expanded={open}
             aria-controls="language-selector-list"
-            className="flex items-center justify-between gap-2 text-white/80"
+            className="flex items-center justify-between gap-2 text-white dark:text-zinc-900"
             disabled={!value}
           >
             <Image

diff --git a/components/MobileSidebar.tsx b/components/MobileSidebar.tsx
@@ -32,7 +32,7 @@ export const MobileSidebar = () => {
               alt="Redot Engine Logo"
               width={160}
               height={50}
-              className="invert"
+              className="invert dark:invert-0"
               priority
             />
             <SheetPrimitive.Close className="rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">

diff --git a/components/ModeToggle.tsx b/components/ModeToggle.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/SectionHeader.tsx b/components/SectionHeader.tsx
@@ -110,7 +110,7 @@ export default function SectionHeader({
           animate={inView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.5, delay: 0.6 }}
           className={cn(
-            "mt-5 text-xl tracking-tighter text-black/60 md:text-[22px] md:leading-[30px]",
+            "mt-5 text-xl tracking-tighter text-zinc-500 dark:text-zinc-400 md:text-[22px] md:leading-[30px]",
             descriptionTextAlignClass
           )}
         >

diff --git a/components/SectionLink.tsx b/components/SectionLink.tsx
@@ -30,7 +30,7 @@ export const SectionLink = ({
           <p className="text-zinc-500 dark:text-zinc-400">{description}</p>
         </div>
       </div>
-      <IconArrowRight className="text-zinc-400 transition-all duration-300 group-hover:text-zinc-900" />
+      <IconArrowRight className="text-zinc-400 transition-all duration-300 group-hover:text-zinc-900 dark:group-hover:text-white" />
     </div>
   </Link>
 );
diff --git a/components/SectionWithButtons.tsx b/components/SectionWithButtons.tsx
@@ -45,7 +45,7 @@ export const SectionWithButtons = ({
     <section
       ref={ref}
       className={cn(
-        "overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-20 md:py-36",
+        "overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#1F0000] to-[#FFD2D2] py-20 dark:from-transparent dark:to-[#1F0000] md:py-36",
         additionalClassNames
       )}
     >
@@ -60,7 +60,7 @@ export const SectionWithButtons = ({
             initial={{ opacity: 0, y: 20 }}
             animate={inView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.5, delay: 0.4 }}
-            className="mt-5 bg-gradient-to-b from-black to-[#7F0000] bg-clip-text text-center text-4xl font-bold tracking-tighter text-transparent md:text-[54px] md:leading-[60px]"
+            className="mt-5 bg-gradient-to-b from-black to-[#7F0000] bg-clip-text text-center text-4xl font-bold tracking-tighter text-transparent dark:from-white dark:to-white md:text-[54px] md:leading-[60px]"
           >
             {t(titleKey)}
           </motion.h2>
@@ -69,7 +69,7 @@ export const SectionWithButtons = ({
             initial={{ opacity: 0, y: 20 }}
             animate={inView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.5, delay: 0.6 }}
-            className="mt-5 text-center text-xl tracking-tighter text-black/60 md:text-[22px] md:leading-[30px]"
+            className="mt-5 text-center text-xl tracking-tighter text-zinc-500 dark:text-zinc-400 md:text-[22px] md:leading-[30px]"
           >
             {t(descriptionKey)}
           </motion.p>

diff --git a/components/UnderConstruction.tsx b/components/UnderConstruction.tsx
@@ -10,7 +10,7 @@ export default function UnderConstruction() {
 
   return (
     <section className="flex min-h-screen flex-col">
-      <div className="flex-grow overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-32">
+      <div className="flex-grow overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-32 dark:from-transparent dark:to-[#1F0000]">
         <div className="mx-auto max-w-[660px]">
           <div className="flex flex-col items-center justify-center gap-4">
             <Image
@@ -23,12 +23,12 @@ export default function UnderConstruction() {
               <h2 className="mt-5 text-center text-4xl font-bold tracking-tighter md:text-[54px] md:leading-[60px]">
                 {t("title")}
               </h2>
-              <p className="mt-5 text-center text-xl tracking-tighter text-black/60 md:text-[22px] md:leading-[30px]">
+              <p className="mt-5 text-center text-xl tracking-tighter text-muted-foreground md:text-[22px] md:leading-[30px]">
                 {t("description")}
               </p>
             </div>
             <Button asChild>
-              <Link href="/blog">{t("backButton")}</Link>
+              <Link href="/">{t("backButton")}</Link>
             </Button>
           </div>
         </div>

diff --git a/components/blog/ArticleCard.tsx b/components/blog/ArticleCard.tsx
@@ -17,13 +17,13 @@ export const ArticleCard = ({
     "text-base": size === "small",
   });
 
-  const excerptClasses = cn("line-clamp-3 text-base text-black/60", {
+  const excerptClasses = cn("line-clamp-3 text-base text-muted-foreground", {
     "text-sm": size === "small",
   });
 
   return (
     <Link href={`blog/${article.slug.current}`}>
-      <div className="relative h-full cursor-pointer overflow-hidden rounded-xl border border-gray-950/[.1] p-4 hover:bg-gray-950/[.01]">
+      <div className="relative h-full cursor-pointer overflow-hidden rounded-xl border border-zinc-950/[.1] p-4 hover:bg-zinc-950/[.01] dark:border-zinc-50/[.1] dark:hover:bg-zinc-50/[.1]">
         <div className="flex flex-col gap-4">
           {article.imageUrl && (
             <div className="relative aspect-video w-full">
@@ -51,7 +51,7 @@ export const ArticleCard = ({
               <p className="text-sm font-medium">
                 {article.author?.name || "Unknown Author"}
               </p>
-              <p className="text-xs font-medium text-black/60">
+              <p className="text-xs font-medium text-muted-foreground">
                 {formatDate(article.publishedAt)}
               </p>
             </div>

diff --git a/components/blog/ArticleSplash.tsx b/components/blog/ArticleSplash.tsx
@@ -61,7 +61,7 @@ export const ArticleSplash = ({ article }: { article: Post }) => {
           <p className="text-sm font-medium">
             {article.author?.name || "Unknown Author"}
           </p>
-          <p className="text-xs font-medium text-black/60">
+          <p className="text-xs font-medium text-muted-foreground">
             {formatDate(article.publishedAt)}
           </p>
         </div>

diff --git a/components/community/CommunityCard.tsx b/components/community/CommunityCard.tsx
@@ -16,7 +16,7 @@ export const CommunityCard = ({
 }: Readonly<CommunityCardProps>) => {
   return (
     <Link href={href} target="_blank" rel="noopener noreferrer">
-      <div className="relative h-full cursor-pointer overflow-hidden rounded-xl border border-gray-950/[.1] p-4 hover:bg-gray-950/[.01]">
+      <div className="relative h-full cursor-pointer overflow-hidden rounded-xl border border-zinc-950/[.1] p-4 hover:bg-zinc-950/[.01] dark:border-zinc-50/[.1] dark:hover:bg-zinc-50/[.1]">
         <div className="flex flex-col gap-4">
           <div className="relative aspect-video w-full">
             <Image
@@ -28,7 +28,7 @@ export const CommunityCard = ({
           </div>
           <div>
             <h2 className="text-lg font-medium">{label}</h2>
-            <p className="text-base text-black/60">{description}</p>
+            <p className="text-base text-muted-foreground">{description}</p>
           </div>
         </div>
       </div>

diff --git a/components/contact/ContactCard.tsx b/components/contact/ContactCard.tsx
@@ -23,14 +23,14 @@ export const ContactCard = ({
   });
 
   return (
-    <div className="border-gray-250 flex h-[15rem] flex-col justify-between rounded-xl border bg-background p-4">
-      <div className="border-gray-250 flex h-[36px] w-[36px] items-center justify-center rounded-lg border">
+    <div className="border-zinc-250 flex h-[15rem] flex-col justify-between rounded-xl border bg-background p-4 dark:border-zinc-50/[.1]">
+      <div className="border-zinc-250 flex h-[36px] w-[36px] items-center justify-center rounded-lg border dark:border-zinc-50/[.1]">
         {icon}
       </div>
       <div className="flex flex-col gap-4">
         <div className="flex flex-col">
           <p className="text-lg font-medium">{title}</p>
-          <p className="text-base text-black/80">{description}</p>
+          <p className="text-base text-muted-foreground">{description}</p>
         </div>
         <div className={cn("flex flex-wrap gap-2", directionClass)}>
           {links.map(({ label, url }) => (

diff --git a/components/download/SupportedPlatformItem.tsx b/components/download/SupportedPlatformItem.tsx
@@ -18,7 +18,7 @@ export const SupportedPlatformItem = ({
   return (
     <Link
       className={cn(
-        "flex cursor-pointer flex-row items-center justify-center gap-4 overflow-hidden rounded-xl border border-gray-950/[.1] bg-gray-950/[.01] p-4 hover:bg-gray-950/[.05]",
+        "flex cursor-pointer flex-row items-center justify-center gap-4 overflow-hidden rounded-xl border border-zinc-950/[.1] p-4 hover:bg-zinc-950/[.01] dark:border-zinc-50/[.1] dark:hover:bg-zinc-50/[.1]",
         className
       )}
       href={href}
@@ -28,7 +28,7 @@ export const SupportedPlatformItem = ({
         alt={`${label} icon`}
         width={32}
         height={32}
-        style={{ filter: "invert(100%)" }}
+        className="invert dark:invert-0"
       />
       <p className="text-lg font-medium">{label}</p>
     </Link>

diff --git a/components/download/ThreeStepsItem.tsx b/components/download/ThreeStepsItem.tsx
@@ -14,7 +14,7 @@ export const ThreeStepsItem = ({
   return (
     <div className="flex flex-col gap-4 p-6">
       <h3 className="text-xl font-medium">{title}</h3>
-      <p className="text-black/60">{description}</p>
+      <p className="text-muted-foreground">{description}</p>
       <div className="flex flex-col gap-2">
         {links.map((link) => (
           <Link

diff --git a/components/landing/FeatureItem.tsx b/components/landing/FeatureItem.tsx
@@ -7,7 +7,7 @@ export const FeatureItem = ({ icon, label }: FeaturesList) => {
         <div className="flex h-6 w-6 items-center justify-center rounded border border-rose-800 bg-rose-950 text-white">
           {icon}
         </div>
-        <p className="text-sm font-medium">{label}</p>
+        <p className="text-sm font-medium dark:text-white">{label}</p>
       </div>
     </figure>
   );