feat: darkmode

Redot-Engine · Jan 10, 2025 · 2313e30 · 2313e30
1 parent b686df6
commit 2313e30
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 18 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -61,7 +61,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
 }
 
@@ -1211,3 +1211,10 @@
 .article .highlight pre:has(+ .zeroclipboard-container) {
   min-height: 52px;
 }
+
+html,
+img,
+video,
+.rinvert {
+  filter: invert(1) hue-rotate(180deg) brightness(105%) contrast(105%);
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Banner.tsx b/components/Banner.tsx
@@ -18,8 +18,8 @@ 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 border-b border-black/10 bg-white py-3 text-sm font-medium text-black">
+      <p className="hidden text-black/60 md:block">{subMessage}</p>
       {subMessage && (
         <div>
           {link ? (

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -17,7 +17,7 @@ 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-white 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">
@@ -45,15 +45,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-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-black/60 transition duration-300 hover:text-black"
                           target={item.newTab ? "_blank" : "_self"}
                           rel={item.newTab ? "noopener noreferrer" : undefined}
                         >
@@ -71,7 +71,7 @@ export const Footer = () => {
           </div>
 
           <div className="flex flex-col gap-8">
-            <Separator className="bg-white/30" />
+            <Separator className="bg-black/30" />
 
             <div className="flex flex-wrap items-center justify-between gap-8">
               <Image
@@ -81,15 +81,15 @@ export const Footer = () => {
                 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-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-black/70"
                   >
                     {t("copyright.sourceCode")}
                   </Link>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -22,7 +22,7 @@ export const Header = () => {
           <div className="flex items-center justify-between">
             <Link
               href="/"
-              className="rounded-md border border-slate-800 bg-black p-2"
+              className="border-white-800 rounded-md border bg-white p-2"
             >
               <Image
                 src="/logo.webp"

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-gray-950/[.1] p-4 transition-transform duration-300 hover:scale-105 hover:bg-gray-950/[.01]">
         <div className="flex flex-col gap-4">
           <div className="relative aspect-video w-full">
             <Image

diff --git a/components/landing/FeatureItem.tsx b/components/landing/FeatureItem.tsx
@@ -4,7 +4,7 @@ export const FeatureItem = ({ icon, label }: FeaturesList) => {
   return (
     <figure className="relative w-fit">
       <div className="flex flex-row items-center gap-2">
-        <div className="flex h-6 w-6 items-center justify-center rounded border border-rose-800 bg-rose-950 text-white">
+        <div className="rinvert flex h-6 w-6 items-center justify-center rounded border border-red-900 bg-red-950/75 text-white">
           {icon}
         </div>
         <p className="text-sm font-medium">{label}</p>

diff --git a/components/landing/FeaturesHighlight.tsx b/components/landing/FeaturesHighlight.tsx
@@ -7,7 +7,7 @@ export default function FeaturesHighlight({
 }: Readonly<FeaturesHighlightList>) {
   return (
     <div className="mx-auto flex max-w-sm flex-col items-center space-y-2.5 text-center">
-      <div className="flex h-8 w-8 items-center justify-center rounded border border-rose-800 bg-rose-950 text-white">
+      <div className="rinvert flex h-8 w-8 items-center justify-center rounded border border-red-900 bg-red-950/75 text-white">
         {icon}
       </div>
       <div className="space-y-2">

diff --git a/components/sections/download/DownloadHero.tsx b/components/sections/download/DownloadHero.tsx
@@ -34,7 +34,7 @@ export const DownloadHero = ({ platform }: { platform: string }) => {
     <div className="px-5 lg:px-40">
       <section
         ref={ref}
-        className="rounded-xl bg-[url('https://image.redotengine.org/darkCover.png')] bg-cover bg-center text-white"
+        className="rinvert rounded-xl bg-[url('https://image.redotengine.org/darkCover.png')] bg-cover bg-center text-white"
       >
         <motion.div
           initial={{ opacity: 0, y: 50 }}
@@ -90,7 +90,6 @@ export const DownloadHero = ({ platform }: { platform: string }) => {
                     alt="OS Logo"
                     width={16}
                     height={16}
-                    style={{ filter: "invert(100%)" }}
                   />
                 </div>
               </Button>
@@ -101,7 +100,11 @@ export const DownloadHero = ({ platform }: { platform: string }) => {
               transition={{ duration: 0.5, delay: 0.8 }}
               className="w-full md:w-auto"
             >
-              <Button className="w-full md:w-auto" size="sm">
+              <Button
+                variant="secondary"
+                className="w-full invert md:w-auto"
+                size="sm"
+              >
                 <Link href={getMonoPlatformDownloadLink(platform)}>
                   {t("buttons.downloadMono")}
                 </Link>

diff --git a/components/sections/landing/Hero.tsx b/components/sections/landing/Hero.tsx
@@ -24,7 +24,7 @@ export const Hero = () => {
           type="image/webp"
         />
       </Head>
-      <section className="bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#FF4E40,#FFFFFF_80%)] pb-20 pt-8">
+      <section className="bg-gradient-to-b from-[#fff] to-[#FFD2D2] pb-20 pt-8">
         <div className="px-5 lg:px-40">
           <div className="grid grid-cols-1 place-content-between gap-10 md:grid-cols-12 md:items-center">
             <div className="md:col-span-6">

diff --git a/components/sections/landing/ProductShowcase.tsx b/components/sections/landing/ProductShowcase.tsx
@@ -14,7 +14,7 @@ export const ProductShowcase = () => {
   return (
     <section
       ref={ref}
-      className="overflow-x-clip bg-gradient-to-b from-[#ffffff] to-[#FFD2D2] py-24"
+      className="overflow-x-clip bg-gradient-to-b from-[#FFD2D2] to-[#fff] py-24"
     >
       <motion.div
         initial={{ opacity: 0, y: 50 }}