dark mode

harshsbhat · Dec 23, 2024 · 8e77d10 · 8e77d10
1 parent 6e49ee5
commit 8e77d10
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 16 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/[...slug]/client.tsx b/src/app/[...slug]/client.tsx
@@ -19,6 +19,7 @@ import { refresh } from "../actions/refresh";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { ModeToggle } from "@/components/ui/mode-toggle";
 import { PlusCircle, X, ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 import {
   DropdownMenu,
@@ -192,6 +193,7 @@ export function Client({ params, decryptedData, hash }: ClientProps) {
             Save
           </LoadingBtn>
           <DeleteSite params={params} currentInitHash={currentInitHash}/>
+          <ModeToggle />
         </div>
       </div>
     );

diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
@@ -0,0 +1,30 @@
+import "@/styles/globals.css";
+
+import { GeistSans } from "geist/font/sans";
+import { Toaster } from "@/components/ui/toaster";
+
+import { ThemeProvider } from "@/components/theme-provider";
+import { ModeToggle } from "@/components/ui/mode-toggle";
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>
+      <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <div className="hidden">
+        <ModeToggle/>
+        </div>
+        {children}
+        <Toaster />
+        </ThemeProvider>    
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,8 +4,6 @@ import { GeistSans } from "geist/font/sans";
 import { type Metadata } from "next";
 import { Toaster } from "@/components/ui/toaster";
 
-import { ThemeProvider } from "@/components/theme-provider";
-
 export const metadata: Metadata = {
   title: "SealNotes: Secure, Lightweight Encrypted Notepad for Privacy",
   description: "SealNotes: A free, open-source encrypted notepad for secure and private note-taking. Enjoy rich text editing and complete privacy—no login required.",
@@ -31,10 +29,8 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${GeistSans.variable}`}>
       <body>
-        <ThemeProvider defaultTheme="system">
         {children}
         <Toaster />
-        </ThemeProvider>    
       </body>
     </html>
   );

diff --git a/src/components/controlModals/create-new-site.tsx b/src/components/controlModals/create-new-site.tsx
@@ -6,7 +6,6 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";

diff --git a/src/components/controlModals/decrypt-old-site.tsx b/src/components/controlModals/decrypt-old-site.tsx
@@ -7,7 +7,6 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"

diff --git a/src/components/editor/Tiptap.tsx b/src/components/editor/Tiptap.tsx
@@ -23,7 +23,7 @@ export default function RichTextEditor({
         },
         editorProps: {
             attributes: {
-                class: "cursor-text rounded-md border border-black p-5 ring-offset-background focus-within:outline-none min-h-[50vh] sm:min-h-[70vh]"
+                class: "cursor-text rounded-md border-2 shadow p-5 ring-offset-background focus-within:outline-none min-h-[50vh] sm:min-h-[70vh]"
 
             }
         },

diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -29,7 +29,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-black h-[10vh] bg-background text-foreground",
+        default: "border-lime-600 h-[10vh] bg-background text-foreground",
         destructive:
           "destructive group h-[12vh] border-rose-700 bg-background text-foreground",
       },