Implement dark/light theme toggle

Author: Correct-Syntax

src/app/globals.css

@@ -2,21 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #15191C;
-    --foreground: #0B0C0D;
-  }
-}
-
 body {
-  color: var(--foreground);
-  background: var(--background);
   font-family: "albertSans", Arial, Helvetica, sans-serif;
 }
 
@@ -32,10 +18,6 @@ body {
   max-height: calc(100vh - 48px);
 }
 
-main {
-  height: 90vh;
-}
-
 #uploadArea {
   width: 100%;
   height: 100%;

src/app/page.js

@@ -47,7 +47,7 @@ const imageFiltersConst = [
 
 export default function Home() {
   const [fullscreen, setFullscreen] = useState(false);
-  const [darkTheme, setDarkTheme] = useState(true);
+  const [darkMode, setDarkMode] = useState(true);
 
   const [aboutMenuOpen, setAboutMenuOpen] = useState(false);
 
@@ -88,10 +88,8 @@ export default function Home() {
     //setImageFiltersMenuOpen(false);
   }
 
-  function handleSetToggleDarkTheme() {
-
-
-    setDarkTheme(!darkTheme);
+  function handleSetToggleDarkMode() {
+    setDarkMode(!darkMode);
   }
 
   function handleSetToggleFullscreen() {
@@ -105,12 +103,12 @@ export default function Home() {
       setFileIsValid(true);
       setFile(URL.createObjectURL(uploadedFile));
     } else {
-      setFileIsValid(false);
+      setFileIsValid(false); s
     }
   }
 
   return (
-    <div className="flex flex-col">
+    <div className={`flex flex-col h-full ${darkMode == true ? "dark bg-background" : ""}`}>
       <nav className="flex z-50 flex-row justify-between items-center px-5 py-3 bg-foreground">
         <div className="flex relative justify-center items-center">
           <div onClick={() => setAboutMenuOpen(!aboutMenuOpen)} className="inline-flex space-x-2 group hover:cursor-pointer">
@@ -127,7 +125,6 @@ export default function Home() {
           {aboutMenuOpen && <AboutDropDownMenu items={aboutMenuItemsConst}></AboutDropDownMenu>}
         </div>
 
-
         <div className="flex flex-row space-x-4">
           <div className="relative">
             <IconDropDownButton Icon={ShadowInnerIcon} active={imageFiltersMenuOpen} onClick={() => setImageFiltersMenuOpen(!imageFiltersMenuOpen)}>
@@ -143,8 +140,8 @@ export default function Home() {
 
         <div className="flex flex-row space-x-4">
           <hr className="border-white" />
-          <IconButton onClick={handleSetToggleDarkTheme}>
-            {darkTheme ? <SunIcon className="w-5 h-5"></SunIcon> : <MoonIcon className="w-5 h-5"></MoonIcon>}
+          <IconButton onClick={handleSetToggleDarkMode}>
+            {darkMode ? <SunIcon className="w-5 h-5"></SunIcon> : <MoonIcon className="w-5 h-5"></MoonIcon>}
           </IconButton>
           <IconButton onClick={handleSetToggleFullscreen}>
             {fullscreen ? <ExitFullScreenIcon className="w-5 h-5"></ExitFullScreenIcon> : <EnterFullScreenIcon className="w-5 h-5"></EnterFullScreenIcon>}

tailwind.config.js

@@ -5,13 +5,14 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: 'selector',
   theme: {
     extend: {
       colors: {
         accent: "#DADD15",
         gray: "#C2C2C2",
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        background: "#15191C",
+        foreground: "#0B0C0D",
       },
     },
   },