Adding Dark mode 🌗

components/ui/App.jsx

@@ -1,9 +1,29 @@
 import classNames from 'classnames';
+import { Plugins } from '@capacitor/core';
+import { useEffect, useState } from 'react';
 
-const App = ({ children, className, ...props }) => (
-  <div {...props} className={classNames('flex h-screen flex-col', className)}>
+const { DarkMode } = Plugins;
+
+const App = ({ children, className, ...props }) => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(async() => {
+    let darkmodeConfig = await DarkMode.isDarkModeOn();
+    setDarkMode(darkmodeConfig.isDarkModeOn);
+    DarkMode.addListener("darkModeStateChanged", (state) => {
+      setDarkMode(state.isDarkModeOn);
+    });
+  }, []);
+
+  return (<div {...props} className={classNames(
+    'flex h-screen flex-col', 
+    className,
+    {
+      'dark': darkMode
+    }
+    )}>
     {children}
-  </div>
-);
+  </div>);
+}
 
 export default App;

components/ui/Card.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 
 const Card = ({ children, className, ...props }) => (
   <div {...props} className={classNames('max-w-xl', className)}>
-    <div className="bg-white shadow-md rounded-b-xl">{children}</div>
+    <div className="bg-white shadow-md rounded-b-xl dark:bg-black">{children}</div>
   </div>
 );
 

components/ui/Menu.jsx

@@ -4,22 +4,20 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { useDrag } from 'react-use-gesture';
 
+const { DarkMode } = Plugins;
+
 const Menu = ({ open, onClose, children, className, ...props }) => {
   const ref = useRef();
   const [x, setX] = useState(-100000);
   const [rect, setRect] = useState(null);
   const [dragging, setDragging] = useState(false);
 
-  useEffect(() => {
-    if (open) {
-      Plugins.StatusBar.setStyle({
-        style: 'LIGHT',
-      }).catch(() => {});
-    } else {
-      Plugins.StatusBar.setStyle({
-        style: 'DARK',
-      }).catch(() => {});
-    }
+  useEffect(async () => {
+    let darkmodeConfig = await DarkMode.isDarkModeOn();
+    console.log({open, darkMode: darkmodeConfig.isDarkModeOn})
+    Plugins.StatusBar.setStyle({
+      style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
+    }).catch(() => {});
   }, [open]);
 
   useLayoutEffect(() => {
@@ -76,7 +74,7 @@ const Menu = ({ open, onClose, children, className, ...props }) => {
         transform: `translateX(${x}px)`,
       }}
       className={classNames(
-        'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100',
+        'fixed z-40 transform-gpu translate w-48 h-full bg-gray-100 dark:bg-gray-800',
         className,
         {
           'transition-transform': !dragging,

components/ui/Nav.jsx

@@ -165,28 +165,28 @@ const Nav = ({ page }) => {
               <div
                 className={`${
                   showProfileMenu ? '' : 'hidden'
-                } origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5`}
+                } origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5`}
                 role="menu"
                 aria-orientation="vertical"
                 aria-labelledby="user-menu"
               >
                 <a
                   href="#"
-                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400"
                   role="menuitem"
                 >
                   Your Profile
                 </a>
                 <a
                   href="#"
-                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400"
                   role="menuitem"
                 >
                   Settings
                 </a>
                 <a
                   href="#"
-                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400"
                   role="menuitem"
                 >
                   Sign out

components/ui/Tab.jsx

@@ -6,8 +6,8 @@ const Tab = ({ title, icon, selected, selectedIcon, onClick }) => (
     onClick={onClick}
     href="#"
     className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
-      'text-gray-500': !selected,
-      'text-gray-800': selected,
+      'text-gray-500 dark:text-white': !selected,
+      'text-gray-800 dark:text-gray-600': selected,
     })}
   >
     {icon && (

components/ui/TabBar.jsx

@@ -1,7 +1,7 @@
 const TabBar = ({ children }) => (
   <nav
     id="tab-bar"
-    className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50 z-10"
+    className="py-2 h-16 w-full flex justify-center items-start bg-gray-50 z-10 dark:bg-gray-800"
     style={{
       height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`,
     }}