Component background color "black" is not match the page background color in dark mode

[Z. Jiang]

TL;DR: Some components background in the Sample Site was set to use bg-black in the Dark Mode。 But the original CSS isn't "black".

Details:

Some of components background is set to use Tailwindcss background-color (bg-black) but the actually webpage CSS colour is set to HSL(224, 71%, 4%) (RGB(3, 7, 17)) which isn't black (RGB(0,0,0))

.dark {
  --background: 224 71% 4%;
   ...
}

I think it effected following components (Not sure if it's expected)

apps/nextjs/src/components/globe.tsx
apps/nextjs/src/components/sparkles.tsx

The closed one would be bg-gray-950 background-color: rgb(3 7 18);

diff --git a/apps/nextjs/src/components/globe.tsx b/apps/nextjs/src/components/globe.tsx
index fbd5ef0..7d51875 100644
--- a/apps/nextjs/src/components/globe.tsx
+++ b/apps/nextjs/src/components/globe.tsx
@@ -396,7 +396,7 @@ export function Globes() {
   ];

   return (
-    <div className="relative flex h-screen w-full flex-row items-center justify-center bg-white py-20 dark:bg-black md:h-auto">
+    <div className="relative flex h-screen w-full flex-row items-center justify-center bg-white py-20 dark:bg-gray-950 md:h-auto">
       <div className="relative mx-auto h-full w-full max-w-7xl overflow-hidden px-4 md:h-[40rem]">
         <motion.div
           initial={{
@@ -420,7 +420,7 @@ export function Globes() {
             for the next generation of businesses.
           </p>
         </motion.div>
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 h-40 w-full select-none bg-gradient-to-b from-transparent to-white dark:to-black" />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 h-40 w-full select-none bg-gradient-to-b from-transparent to-white dark:to-gray-950" />
         <div className="absolute -bottom-20 z-10 h-72 w-full md:h-full">
           <World data={sampleArcs} globeConfig={globeConfig} />;
         </div>
diff --git a/apps/nextjs/src/components/sparkles.tsx b/apps/nextjs/src/components/sparkles.tsx
index 9ac6208..e1cc66b 100644
--- a/apps/nextjs/src/components/sparkles.tsx
+++ b/apps/nextjs/src/components/sparkles.tsx
@@ -12,7 +12,7 @@ export function Sparkless() {
     color = "#000000";
   }
   return (
-    <div className="flex flex-col items-center justify-center overflow-hidden rounded-md bg-white dark:bg-black">
+    <div className="flex flex-col items-center justify-center overflow-hidden rounded-md bg-white dark:bg-gray-950">
       <h1 className="relative z-20 text-center font-bold text-black dark:text-white">
         Saasfly: A new SaaS player?
       </h1>
@@ -34,7 +34,7 @@ export function Sparkless() {
         />

         {/* Radial Gradient to prevent sharp edges */}
-        <div className="absolute inset-0 h-full w-full bg-white [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)] dark:bg-black"></div>
+        <div className="absolute inset-0 h-full w-full bg-white [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)] dark:bg-gray-950"></div>
       </div>
     </div>
   );

PS: I think there are similar issue with Light Mode as well. Not exact same though

[nextify]

Great feedback , Can you create a PR to help us solve this problem? @Zenuncl 🙏

[Z. Jiang]

Pushed 2 changes, one for dark mode and one for light mode. I just modified components

apps/nextjs/src/components/globe.tsx
apps/nextjs/src/components/sparkles.tsx
apps/nextjs/src/components/infiniteMovingCards.tsx

I'll submit a PR later today.

In addition: Looks like there is a weird margin issue between the saasfly section and company section (InfiniteMovingCardss) in the sample page (located: apps/nextjs/src/app/[lang]/(marketing)/page.tsx (see screenshot below)

Not sure if it's intentionally like that, I think remove mb-8 in

      <section
        id="company"
        className="container mb-8 space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-12"
      >

would fix this. I'll leave it as is. It just looks a little bit off since that's only two section having mb-8

[nextify]

Fixed