feat(global): init light mode commit

src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx

@@ -41,12 +41,12 @@ export async function generateMetadata() {
 
 const heroDescription = (
   <div className="flex flex-col gap-y-4 z-20 relative font-inter max-w-3xl">
-    <p className="text-sm md:text-base text-gray-400">
+    <p className="text-sm md:text-base text-gray-700 dark:text-gray-400">
       Explore our curated lists of coding questions, ranging from Javascript, React, Node, Web
       Development. Perfect for your daily coding practice.
     </p>
     <div className="flex flex-col gap-y-2">
-      <p className="text-gray-400">Can't find what you're looking for?</p>
+      <p className="text-gray-700 dark:text-gray-400">Can't find what you're looking for?</p>
       <div className="flex items-center gap-x-2">
         <Button href="/questions" variant="secondary">
           View all questions
@@ -161,9 +161,9 @@ export default async function ExploreQuestionsPage() {
                 missionsPromise={missionsPromise}
                 userMissionRecordsPromise={userMissionRecordsPromise}
               />
-              <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-black-50 p-4 rounded-lg h-fit">
-                <div className="flex items-center space-x-2 text-white">
-                  <Mail className="size-5 text-white" />
+              <div className="bg-secondary dark:bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-secondary dark:border-black-50 p-4 rounded-lg h-fit">
+                <div className="flex items-center space-x-2 text-black dark:text-white">
+                  <Mail className="size-5 text-black dark:text-white" />
                   <span>Suggest a roadmap</span>
                 </div>
                 <p className="text-sm text-muted-foreground">

src/app/(app)/providers.tsx

@@ -7,10 +7,14 @@ export default function RootProvider({ children }: { children: React.ReactNode }
 
   return (
     <main
-      className={cn('w-full transition-[width] duration-200 ease-in-out', 'py-4 lg:pb-5', {
-        'lg:w-[calc(100%-15rem)]': state === 'expanded',
-        'lg:w-[calc(100%-3rem)]': state === 'collapsed',
-      })}
+      className={cn(
+        'w-full transition-[width] duration-200 ease-in-out bg-white dark:bg-[#000000]',
+        'py-4 lg:pb-5',
+        {
+          'lg:w-[calc(100%-15rem)]': state === 'expanded',
+          'lg:w-[calc(100%-3rem)]': state === 'collapsed',
+        }
+      )}
     >
       {children}
     </main>

src/app/globals.css

@@ -255,7 +255,7 @@ html {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 5% 1;
+    --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -266,7 +266,7 @@ html {
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 237 59.3% 60%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
@@ -278,13 +278,13 @@ html {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --sidebar-background: 0 0% 7%;
-    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 10% 3.9%;
     --sidebar-primary: 224.3 76.3% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 240 5.9% 90%;
     --sidebar-ring: 217.2 91.2% 59.8%;
     --mantine-color-text: var(--foreground) !important;
     --mantine-color-red-6: var(--foreground) !important;
@@ -294,14 +294,44 @@ html {
     --mantine-primary-color-light-hover: rgba(94, 102, 214, 0.12) !important;
     --mantine-color-gray-0: var(--background) !important;
   }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 5% 1;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 237 59.3% 60%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --sidebar-background: 0 0% 7%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-white dark:bg-background text-foreground;
   }
 
   h1,

src/app/layout.tsx

@@ -3,17 +3,24 @@ import { OnestFont } from './styles/fonts/font';
 import { UbuntuFont } from './styles/fonts/font';
 import { SatoshiFont } from './styles/fonts/font';
 import { InterFont } from './styles/fonts/font';
+import { ThemeProvider } from '@/components/theme-provider';
 import './globals.css';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <ReactQueryClientProvider>
-      <html lang="en">
+      <html lang="en" suppressHydrationWarning>
         <body
           className={`${InterFont.variable} ${SatoshiFont.variable} ${UbuntuFont.variable} ${OnestFont.variable} antialiased`}
-          suppressHydrationWarning
         >
-          {children}
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
         </body>
       </html>
     </ReactQueryClientProvider>

src/components/app/dashboard/all-questions-bento-box.tsx

@@ -42,15 +42,20 @@ export default function AllQuestionsDashboardBentoBox() {
   return (
     <section className="flex flex-col gap-y-5 group p-4 relative overflow-hidden h-[350px] lg:h-fit">
       <div className="space-y-3 z-10 relative">
-        <Chip color="bg-white" text="Questions" textColor="text-black" border="border-black-50" />
-        <h6 className="text-lg lg:text-xl flex items-center">
+        <Chip
+          color="bg-white"
+          text="Questions"
+          textColor="text-black"
+          border="border-secondary dark:border-black-50"
+        />
+        <h6 className="text-lg lg:text-xl flex items-center text-black dark:text-white">
           View all Questions
           <ArrowRight className="size-4 inline-block ml-1 group-hover:ml-2 duration-300" />
         </h6>
       </div>
 
       <div className="relative overflow-hidden mt-3 md:h-64 xl:h-[20rem]">
-        <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-[#000] to-transparent z-10" />
+        <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-white dark:from-[#000] to-transparent z-10" />
 
         {/* Scrolling content */}
         <div
@@ -63,7 +68,7 @@ export default function AllQuestionsDashboardBentoBox() {
         </div>
 
         {/* Bottom fade effect */}
-        <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-[#000] to-transparent z-10" />
+        <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-[#000] to-transparent z-10" />
       </div>
     </section>
   );

src/components/app/dashboard/dashboard-bento-grid.tsx

@@ -19,19 +19,19 @@ export default async function DashboardBentoGrid() {
     },
     {
       header: <AllQuestionsDashboardBentoBox />,
-      className: 'col-span-2 text-white lg:min-h-auto lg:h-[370px]',
+      className: 'col-span-2 text-black dark:text-white lg:min-h-auto lg:h-[370px]',
       href: '/questions',
       padded: false,
     },
     {
       header: <ProgressBentoBox />,
-      className: 'col-span-2 text-white lg:h-[370px]',
+      className: 'col-span-2 text-black dark:text-white lg:h-[370px]',
       padded: false,
     },
     {
       header: <NextRoadmapBentoBox />,
       className:
-        'h-full text-white justify-center min-h-[18rem] lg:h-[370px] col-span-2 lg:col-span-1',
+        'h-full text-black dark:text-white justify-center min-h-[18rem] lg:h-[370px] col-span-2 lg:col-span-1',
       href: studyPath ? `/roadmaps/${studyPath.studyPath.slug}` : '/roadmaps',
       padded: false,
       gradientBg: true,

src/components/app/dashboard/dashboard-question-card.tsx

@@ -13,16 +13,16 @@ export default function DashboardQuestionCard(opts: DashboardQuestionCardProps)
   const { name, correct } = opts.question;
 
   return (
-    <div className="bg-black-100 border border-black-50 rounded-md p-4 mb-4">
+    <div className="bg-secondary dark:bg-black-100 border border-secondary dark:border-black-50 rounded-md p-4 mb-4">
       <div className="flex items-center">
-        <div className="flex items-center justify-center size-4 border rounded-sm border-black-50 mr-3">
+        <div className="flex items-center justify-center size-4 border rounded-sm border-secondary dark:border-black-50 mr-3">
           {correct ? (
-            <Check className="w-4 h-4 text-green-500" />
+            <Check className="size-4 text-green-500" />
           ) : (
-            <X className="w-4 h-4 text-red-500" />
+            <X className="size-4 text-red-500" />
           )}
         </div>
-        <span className={`text-sm font-ubuntu`}>{name}</span>
+        <span className={`text-sm font-ubuntu text-black dark:text-white`}>{name}</span>
       </div>
     </div>
   );

src/components/app/dashboard/next-question-bento-box.tsx

@@ -41,8 +41,8 @@ export default async function NextQuestionBentoBox() {
       <>
         <div className="flex w-full justify-between mb-4 gap-4">
           <div className="space-y-1">
-            <h6 className="text-xl">Your Next Challenge Awaits</h6>
-            <p className="text-xs font-onest text-gray-400">
+            <h6 className="text-xl text-black dark:text-white">Your Next Challenge Awaits</h6>
+            <p className="text-xs font-onest text-gray-600 dark:text-gray-400">
               Take just 2 minutes to answer your next question and keep your streak alive!
             </p>
           </div>
@@ -52,7 +52,7 @@ export default async function NextQuestionBentoBox() {
         </div>
         <div className="flex flex-wrap space-y-2 w-full items-end justify-between">
           <div className="space-y-1">
-            <h6>Topics to Explore:</h6>
+            <h6 className="text-black dark:text-white">Topics to Explore:</h6>
             <div className="flex gap-x-2 mt-2">
               <TagDisplay tags={tags} numberOfTags={2} variant="default" />
             </div>
@@ -61,8 +61,11 @@ export default async function NextQuestionBentoBox() {
 
         <div className="w-fit flex self-center relative -bottom-8 sm:-bottom-20 md:-bottom-8 lg:-bottom-20 group-hover:lg:-bottom-14 duration-300">
           <DatePicker
-            className="z-30 text-white bg-black-100 border border-black-50 p-2 rounded-md hover:cursor-default xs:scale-100 sm:scale-125 md:scale-105 xl:scale-[1.2] group-hover:lg:scale-[1.07] group-hover:xl:scale-[1.22] duration-300"
-            color="white"
+            className="
+              z-30 text-black dark:text-white bg-secondary dark:bg-black-100 border border-white/80 dark:border-black-50 
+              dark:border-white-50 p-2 rounded-md hover:cursor-default xs:scale-100 sm:scale-125 md:scale-105 xl:scale-[1.2] 
+              group-hover:lg:scale-[1.07] group-hover:xl:scale-[1.22] duration-300
+            "
             type="range"
             value={dateArray}
             c="gray"

src/components/app/dashboard/progression-bento-box.tsx

@@ -64,21 +64,21 @@ export default async function ProgressBentoBox() {
     >
       <div className="absolute z-10">
         <Chip
-          textColor="text-white"
-          color="bg-primary"
+          textColor="text-black dark:text-white"
+          color="bg-secondarybg-primary"
           text={user?.userLevel === 'FREE' ? 'Upgrade to access Roadmaps' : 'Roadmaps'}
-          border="border-black-50"
+          border="border-secondary dark:border-black-50"
         />
       </div>
       <Grid size={20} position="top-right" />
       <div className="h-full flex items-center justify-center relative">
         <InfiniteMovingCards items={items} speed="slow" />
-        <Separator className="absolute top-1/2 -translate-y-1/2 z-50 bg-black-50" />
+        <Separator className="absolute top-1/2 -translate-y-1/2 z-50 bg-secondary dark:bg-black-50" />
       </div>
       <div className="flex flex-col md:flex-row gap-y-2 w-full justify-between items-end">
         <div className="space-y-1">
-          <h6 className="text-xl">Personalised Progression</h6>
-          <p className="hidden md:block font-satoshi text-sm">
+          <h6 className="text-xl text-black dark:text-white">Personalised Progression</h6>
+          <p className="hidden md:block font-satoshi text-sm text-black dark:text-white">
             Your very own, personalised progression framework to help you grow as a developer.
           </p>
         </div>

src/components/app/navigation/sidebar-dropdown.tsx

@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import LogoutButton from '@/components/auth/logout';
 import ProfilePicture from '@/components/ui/profile-picture';
+import { ThemeToggle } from '@/components/theme-toggle';
 
 import type { UserRecord } from '@/types/User';
 import { getUserDisplayName } from '@/utils/user';
@@ -38,30 +39,30 @@ export default function SidebarAreaComponent(opts: {
   const { user } = opts;
 
   return (
-    <SidebarContent className="bg-[#000000] w-full p-0">
+    <SidebarContent className="bg-white dark:bg-[#000000] w-full p-0">
       <SidebarMenu>
         <SidebarMenuItem>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <SidebarMenuButton variant="default" className="text-white h-fit">
+              <SidebarMenuButton variant="default" className="text-black dark:text-white h-fit">
                 <ProfilePicture
                   src={user?.userProfilePicture}
                   alt="Profile Picture"
                   className="group-data-[collapsible=icon]:size-[18px] size-9 "
                 />
 
                 <div className="flex flex-col">
-                  <span className="text-white font-medium text-lg line-clamp-1">
+                  <span className="text-black dark:text-white font-medium text-lg line-clamp-1">
                     {user && getUserDisplayName(user)}
                   </span>
-                  <span className="text-xs text-white">
+                  <span className="text-xs text-black dark:text-white">
                     {capitalise(user?.userLevel || 'Anonymous')}
                   </span>
                 </div>
                 <ChevronsUpDown className="ml-auto" />
               </SidebarMenuButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56 bg-[#000] !text-white border-black-50">
+            <DropdownMenuContent className="w-56 bg-white dark:bg-[#000000] !text-black dark:text-white border-black-50 dark:border-white-50">
               <DropdownMenuItem>
                 <Link href={getUpgradeUrl()} className="w-full">
                   Upgrade
@@ -84,6 +85,16 @@ export default function SidebarAreaComponent(opts: {
               <DropdownMenuItem>
                 <Link href="https://git.new/blitz">GitHub</Link>
               </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Button
+                  variant="ghost"
+                  padding="none"
+                  className="flex items-center gap-x-2 h-auto !bg-transparent justify-between"
+                >
+                  <span>Theme</span>
+                  <ThemeToggle />
+                </Button>
+              </DropdownMenuItem>
               {user && (
                 <DropdownMenuItem>
                   <LogoutButton variant="ghost" padding="none" />

src/components/app/navigation/sidebar-footer.tsx

@@ -14,7 +14,7 @@ export default function SidebarFooter({ user }: SidebarFooterProps) {
   const pathname = usePathname();
 
   return (
-    <div className="p-4 flex flex-col gap-4">
+    <div className="p-4 flex flex-col gap-4 bg-white dark:bg-[#000000] border-t-0">
       {!user && (
         <SidebarMenuItem className="group-data-[collapsible=icon]:hidden flex flex-col gap-2">
           <Button variant="default" fullWidth className="" href={`/login?redirectUrl=${pathname}`}>