From 84605cd1ffffd2f69684a100bf518a357ae5a74a Mon Sep 17 00:00:00 2001 From: WasiqB Date: Tue, 8 Oct 2024 10:16:26 +0300 Subject: [PATCH 1/2] feat: :sparkles: added theme toggle for light and dark mode --- app/(app)/globals.css | 6 +- app/(app)/layout.tsx | 14 +- app/(app)/loading/page.tsx | 8 +- app/(app)/page.tsx | 10 +- app/(app)/results/page.tsx | 104 ++++++---- components/data-table/attachment.tsx | 2 +- components/data-table/columns.tsx | 39 ++-- components/home/feature.tsx | 16 +- components/home/footer.tsx | 22 +- components/home/nav-bar.tsx | 10 +- components/home/open-source.tsx | 7 +- components/ui/table.tsx | 4 +- components/ui/theme-toggle.tsx | 40 ++++ components/utils/file-upload.tsx | 10 +- package.json | 4 +- pnpm-lock.yaml | 298 ++++++++++++++++++++------- public/report-1.png | Bin 226910 -> 242835 bytes public/report-2.png | Bin 389981 -> 411590 bytes tailwind.config.ts | 5 +- 19 files changed, 418 insertions(+), 181 deletions(-) create mode 100644 components/ui/theme-toggle.tsx diff --git a/app/(app)/globals.css b/app/(app)/globals.css index d657139..d42bcd3 100644 --- a/app/(app)/globals.css +++ b/app/(app)/globals.css @@ -11,7 +11,7 @@ @layer base { :root { --background: 0 0% 100%; - --foreground: 240 10% 3.9%; + --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; @@ -49,8 +49,8 @@ --color-5: 90 100% 63%; } .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; + --background: 220 13% 18%; + --foreground: 210 40% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx index fdf48c8..d9db993 100644 --- a/app/(app)/layout.tsx +++ b/app/(app)/layout.tsx @@ -3,6 +3,7 @@ import './globals.css'; import { DetailedHTMLProps, HtmlHTMLAttributes } from 'react'; import { Footer } from '@/components/home/footer'; import { GoogleTagManager } from '@next/third-parties/google'; +import { ThemeProvider } from '@/components/utils/theme-provider'; export const metadata: Metadata = { title: 'Ultra Reporter', @@ -18,13 +19,20 @@ const RootLayout = ({ HTMLHtmlElement > => { return ( - + - {children} -