alan2207 · maliksenpai · Aug 20, 2024 · Aug 25, 2024
diff --git a/apps/react-vite/src/app/provider.tsx b/apps/react-vite/src/app/provider.tsx
@@ -9,6 +9,7 @@ import { Notifications } from '@/components/ui/notifications';
 import { Spinner } from '@/components/ui/spinner';
 import { AuthLoader } from '@/lib/auth';
 import { queryConfig } from '@/lib/react-query';
+import { ThemeController } from '@/themes/theme-controller';
 
 type AppProviderProps = {
   children: React.ReactNode;
@@ -35,6 +36,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
           <QueryClientProvider client={queryClient}>
             {import.meta.env.DEV && <ReactQueryDevtools />}
             <Notifications />
+            <ThemeController />
             <AuthLoader
               renderLoading={() => (
                 <div className="flex h-screen w-screen items-center justify-center">

diff --git a/apps/react-vite/src/app/routes/app/profile.tsx b/apps/react-vite/src/app/routes/app/profile.tsx
@@ -9,7 +9,7 @@ type EntryProps = {
 const Entry = ({ label, value }: EntryProps) => (
   <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
     <dt className="text-sm font-medium text-gray-500">{label}</dt>
-    <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+    <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 dark:text-gray-100">
       {value}
     </dd>
   </div>
@@ -22,7 +22,7 @@ export const ProfileRoute = () => {
 
   return (
     <ContentLayout title="Profile">
-      <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+      <div className="overflow-hidden shadow sm:rounded-lg">
         <div className="px-4 py-5 sm:px-6">
           <div className="flex justify-between">
             <h3 className="text-lg font-medium leading-6 text-gray-900">

diff --git a/apps/react-vite/src/app/routes/landing.tsx b/apps/react-vite/src/app/routes/landing.tsx
@@ -20,9 +20,9 @@ export const LandingRoute = () => {
   return (
     <>
       <Head description="Welcome to bulletproof react" />
-      <div className="flex h-screen items-center bg-white">
+      <div className="flex h-screen items-center">
         <div className="mx-auto max-w-7xl px-4 py-12 text-center sm:px-6 lg:px-8 lg:py-16">
-          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
             <span className="block">Bulletproof React</span>
           </h2>
           <img src={logo} alt="react" />

diff --git a/apps/react-vite/src/components/layouts/auth-layout.tsx b/apps/react-vite/src/components/layouts/auth-layout.tsx
@@ -28,21 +28,21 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
   return (
     <>
       <Head title={title} />
-      <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
+      <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8 dark:bg-gray-900">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <div className="flex justify-center">
             <Link className="flex items-center text-white" to="/">
               <img className="h-24 w-auto" src={logo} alt="Workflow" />
             </Link>
           </div>
 
-          <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900 dark:text-slate-100">
             {title}
           </h2>
         </div>
 
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
+          <div className="px-4 py-8 shadow sm:rounded-lg sm:px-10 dark:shadow-slate-600">
             {children}
           </div>
         </div>

diff --git a/apps/react-vite/src/components/layouts/dashboard-layout.tsx b/apps/react-vite/src/components/layouts/dashboard-layout.tsx
@@ -179,13 +179,17 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
             <DropdownMenuContent align="end">
               <DropdownMenuItem
                 onClick={() => navigate('./profile')}
-                className={cn('block px-4 py-2 text-sm text-gray-700')}
+                className={cn(
+                  'block px-4 py-2 text-sm text-gray-700 dark:text-slate-100',
+                )}
               >
                 Your Profile
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem
-                className={cn('block px-4 py-2 text-sm text-gray-700 w-full')}
+                className={cn(
+                  'block px-4 py-2 text-sm text-gray-700 w-full dark:text-slate-100',
+                )}
                 onClick={() => logout.mutate({})}
               >
                 Sign Out

diff --git a/apps/react-vite/src/components/ui/button/button.tsx b/apps/react-vite/src/components/ui/button/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-slate-700 dark:text-slate-100 hover:dark:bg-slate-600',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:

diff --git a/apps/react-vite/src/components/ui/form/select.tsx b/apps/react-vite/src/components/ui/form/select.tsx
@@ -24,7 +24,7 @@ export const Select = (props: SelectFieldProps) => {
     <FieldWrapper label={label} error={error}>
       <select
         className={cn(
-          'mt-1 block w-full rounded-md border-gray-600 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm',
+          'mt-1 block w-full bg-transparent shadow border border-input rounded-md py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm',
           className,
         )}
         defaultValue={defaultValue}

diff --git a/apps/react-vite/src/components/ui/link/link.tsx b/apps/react-vite/src/components/ui/link/link.tsx
@@ -5,7 +5,10 @@ import { cn } from '@/utils/cn';
 export const Link = ({ className, children, ...props }: LinkProps) => {
   return (
     <RouterLink
-      className={cn('text-slate-600 hover:text-slate-900', className)}
+      className={cn(
+        'text-slate-600 hover:text-slate-900 dark:text-white dark:hover:text-slate-300',
+        className,
+      )}
       {...props}
     >
       {children}

diff --git a/apps/react-vite/src/components/ui/md-preview/md-preview.tsx b/apps/react-vite/src/components/ui/md-preview/md-preview.tsx
@@ -10,7 +10,7 @@ export type MDPreviewProps = {
 export const MDPreview = ({ value = '' }: MDPreviewProps) => {
   return (
     <div
-      className="prose prose-slate w-full p-2"
+      className="prose prose-slate w-full p-2 dark:text-slate-100"
       dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(parse(value) as string),
       }}

diff --git a/apps/react-vite/src/components/ui/table/pagination.tsx b/apps/react-vite/src/components/ui/table/pagination.tsx
@@ -160,7 +160,7 @@ export const TablePagination = ({
             </PaginationLink>
           </PaginationItem>
         )}
-        <PaginationItem className="rounded-sm bg-gray-200">
+        <PaginationItem className="rounded-sm bg-gray-200 dark:bg-slate-800 dark:text-white">
           <PaginationLink href={createHref(currentPage)}>
             {currentPage}
           </PaginationLink>

diff --git a/apps/react-vite/src/components/ui/table/table.tsx b/apps/react-vite/src/components/ui/table/table.tsx
@@ -142,7 +142,7 @@ export const Table = <Entry extends BaseEntity>({
 }: TableProps<Entry>) => {
   if (!data?.length) {
     return (
-      <div className="flex h-80 flex-col items-center justify-center bg-white text-gray-500">
+      <div className="flex h-80 flex-col items-center justify-center bg-white text-gray-500 dark:bg-slate-800">
         <ArchiveX className="size-16" />
         <h4>No Entries Found</h4>
       </div>

diff --git a/apps/react-vite/src/features/comments/components/comments-list.tsx b/apps/react-vite/src/features/comments/components/comments-list.tsx
@@ -35,7 +35,7 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
       <div
         role="list"
         aria-label="comments"
-        className="flex h-40 flex-col items-center justify-center bg-white text-gray-500"
+        className="flex h-40 flex-col items-center justify-center bg-white text-gray-500 dark:bg-slate-700 dark:text-slate-100"
       >
         <ArchiveX className="size-10" />
         <h4>No Comments Found</h4>
@@ -49,7 +49,7 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
           <li
             aria-label={`comment-${comment.body}-${index}`}
             key={comment.id || index}
-            className="w-full bg-white p-4 shadow-sm"
+            className="w-full bg-white p-4 shadow-sm dark:bg-slate-600"
           >
             <Authorization
               policyCheck={POLICIES['comment:delete'](

diff --git a/apps/react-vite/src/features/discussions/components/discussion-view.tsx b/apps/react-vite/src/features/discussions/components/discussion-view.tsx
@@ -37,9 +37,9 @@ export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
           <UpdateDiscussion discussionId={discussionId} />
         </div>
         <div>
-          <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+          <div className="overflow-hidden bg-white shadow sm:rounded-lg dark:bg-slate-700 ">
             <div className="px-4 py-5 sm:px-6">
-              <div className="mt-1 max-w-2xl text-sm text-gray-500">
+              <div className="mt-1 max-w-2xl text-sm text-gray-500 dark:text-slate-100">
                 <MDPreview value={discussion.body} />
               </div>
             </div>

diff --git a/apps/react-vite/src/themes/theme-controller.tsx b/apps/react-vite/src/themes/theme-controller.tsx
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+export const ThemeController = () => {
+  useEffect(() => {
+    if (window.matchMedia && window.matchMedia('prefers-color-scheme: dark')) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  return false;
+};
diff --git a/apps/react-vite/tailwind.config.cjs b/apps/react-vite/tailwind.config.cjs
@@ -4,6 +4,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: "selector",
   theme: {
     container: {
       center: true,