this is my app/provider.tsx
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
and here in app/layout.tsx the children are correctly bound in theme provider and the default theme is set to dark
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "./provider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Augusta's Portfolio",
description: "Modern full-stack developer portfolio",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);
}
and here in Hero.tsx i am making use of a grid structure which should be black as the default theme is set to black although it’s showing white
import React from "react";
import { Spotlight } from "./ui/Spotlight";
const Hero = () => {
return (
<div className="pb-20 pt-36">
<div>
<Spotlight
className="-top-40 -left-10 md:-left-32 md:-top-20 h-screen"
fill="white"
/>
<Spotlight
className="top-10 left-full h-[80vh] w-[50vw]"
fill="purple"
/>
<Spotlight className="top-28 left-80 h-[80vh] w-[50vw]" fill="blue" />
</div>
<div
className="h-screen w-full dark:bg-black-100 bg-white dark:bg-grid-white/[0.3] bg-grid-black/[0.2]
relative flex items-center justify-center"
>
<div
className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black-100 bg-white
[mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"
/>
</div>
</div>
);
};
export default Hero;
i tried checking and changing my css styles also gone through my entire tailwind config to check whether it’s due to a style, also i i changed background variant to dark to see if that works and many more though copilot too but nothing is working and i can’t seems to understand what’s wrong here.