Dark Mode (Default Theme) + God Rays Css on Header + Adjusted height …

…of global css Dark mode is defaulted and commented out toggle with light mode until fix is found
kmiguel10 · Oct 30, 2023 · 3784d48 · 3784d48
1 parent 27eddbc
commit 3784d48
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/app/components/ui/nav-bar/nav-bar-desktop.tsx b/app/components/ui/nav-bar/nav-bar-desktop.tsx
@@ -6,11 +6,11 @@ import clsx from "clsx";
 import { SunMoon } from "lucide-react";
 
 export default function NavbarDesktop({ selected }: NavBarProps) {
-  const toggleTheme = () => {
-    if (document.body.classList.contains("dark"))
-      document.body.classList.remove("dark");
-    else document.body.classList.add("dark");
-  };
+  // const toggleTheme = () => {
+  //   if (document.body.classList.contains("dark"))
+  //     document.body.classList.remove("dark");
+  //   else document.body.classList.add("dark");
+  // };
   return (
     <nav className="pointer-events-auto sticky top-0 z-popover hidden h-12 items-center border-b border-gray-6 bg-white px-4 dark:bg-black md:flex">
       {/* <Logo />  Can insert picure here or KM logo*/}
@@ -34,12 +34,12 @@ export default function NavbarDesktop({ selected }: NavBarProps) {
       })}
       <div className="flex-grow" />
       <div className="ml-2">
-        <button
+        {/* <button
           onClick={toggleTheme}
           className="px-3 py-1 border border-stone-200 rounded-full drop-shadow-sm text-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/40 backdrop-blur-lg hover:border-stone-300 transition-colors dark:border-stone-500 dark:hover:border-stone-400"
         >
           <SunMoon />
-        </button>
+        </button> */}
       </div>
     </nav>
   );

diff --git a/app/globals.css b/app/globals.css
@@ -7,7 +7,7 @@ body,
 main {
   @apply bg-gray-1 text-gray-12;
   font-weight: 300;
-  height: 93vh;
+  height: 100%;
 }
 
 * {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${inter.className} dark`}>
         {children}
         <Analytics />
       </body>