Adding Dark mode 🌗

components/MenuContent.jsx

@@ -6,7 +6,7 @@ const MenuItem = ({ children, ...props }) => (
   <li {...props}>
     <a
       href="#"
-      className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
+      className="text-gray-800 hover:text-gray-400 dark:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
     >
       {children}
     </a>
@@ -24,7 +24,7 @@ const MenuContent = () => {
   return (
     <>
       <div className="p-4">
-        <h2 className="text-xl select-none">Menu</h2>
+        <h2 className="text-xl select-none dark:text-gray-500">Menu</h2>
       </div>
       <ul>
         {menuLinks.map(p => {

components/Notifications.jsx

@@ -6,14 +6,14 @@ import ListItem from './ui/ListItem';
 import VirtualScroll from './ui/VirtualScroll';
 
 const NotificationItem = ({ i }) => (
-  <ListItem className="flex align-center">
+  <ListItem className="flex align-center dark:bg-black">
     <img
       src={`/img/faces/image-${(i % 66) + 1}.png`}
       alt="Notification"
       className="block rounded-full w-8 h-8 mr-4"
     />
     <div className="flex-1">
-      <span className="p-0 m-0 align-middle">You have a new friend request</span>
+      <span className="p-0 m-0 align-middle dark:text-gray-500">You have a new friend request</span>
     </div>
     <div>
       <Button className="background-transparent px-1 py-1 text-green-400 text-lg">
@@ -27,9 +27,9 @@ const NotificationItem = ({ i }) => (
 );
 
 const Notifications = () => (
-  <div className="w-full h-full flex flex-col">
-    <div className="p-4">
-      <h2 className="text-xl">Notifications</h2>
+  <div className="w-full h-full flex flex-col dark:bg-black">
+    <div className="p-4 rounded-tl-md rounded-tr-md dark:bg-black">
+      <h2 className="text-xl dark:text-gray-600">Notifications</h2>
     </div>
     <List className="flex-1">
       <VirtualScroll

components/pages/Home.jsx

@@ -9,10 +9,10 @@ const HomeCard = ({ title, type, text, author, image }) => (
     <div>
       <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
     </div>
-    <div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
-      <h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
-      <h2 className="font-bold text-2xl text-gray-800">{title}</h2>
-      <p className="sm:text-sm text-s text-gray-500 mr-1 my-3">{text}</p>
+    <div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
+      <h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">{type}</h4>
+      <h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">{title}</h2>
+      <p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">{text}</p>
     </div>
   </Card>
 );
@@ -21,7 +21,7 @@ const Home = ({ selected }) => {
   const homeItems = Store.useState(selectors.getHomeItems);
 
   return (
-    <Content visible={selected} className="p-4">
+    <Content visible={selected} className="p-4 dark:bg-black">
       {homeItems.map((i, index) => (
         <HomeCard {...i} key={index} />
       ))}

components/pages/Lists.jsx

@@ -7,7 +7,7 @@ import List from '../ui/List';
 import VirtualScroll from '../ui/VirtualScroll';
 
 const ListEntry = ({ list, ...props }) => (
-  <div {...props} className="p-4 border-solid border-b cursor-pointer">
+  <div {...props} className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200">
     <span className="text-md">{list.name}</span>
   </div>
 );
@@ -29,7 +29,7 @@ const AllLists = ({ onSelect }) => {
 
 const Lists = ({ selected }) => {
   return (
-    <Content visible={selected} className="p-4">
+    <Content visible={selected} className="p-4 dark:bg-black">
       <List className="h-full w-full">
         {selected && (
           <AllLists

components/pages/Settings.jsx

@@ -12,10 +12,10 @@ const Settings = ({ selected }) => {
   const settings = Store.useState(selectors.getSettings);
 
   return (
-    <Content visible={selected} className="p-4">
+    <Content visible={selected} className="p-4 dark:bg-black">
       <List>
         <ListItem className="flex">
-          <span className="text-md flex-1">Enable Notifications</span>
+          <span className="text-md flex-1 dark:text-gray-200">Enable Notifications</span>
           <Toggle
             checked={settings.enableNotifications}
             onChange={e =>

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) {
+  useEffect(async () => {
+    let darkmodeConfig = await DarkMode.isDarkModeOn();
+    console.log({open, darkMode: darkmodeConfig.isDarkModeOn})
     Plugins.StatusBar.setStyle({
-        style: 'LIGHT',
+      style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
     }).catch(() => {});
-    } else {
-      Plugins.StatusBar.setStyle({
-        style: '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)`,
     }}

ios/App/App.xcodeproj/project.pbxproj

@@ -346,11 +346,12 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = CTXHACVRPM;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = com.example.app;
+				PRODUCT_BUNDLE_IDENTIFIER = com.partidodigital.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "DEBUG USE_PUSH";
 				SWIFT_VERSION = 5.0;
@@ -364,10 +365,11 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = CTXHACVRPM;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = com.example.app;
+				PRODUCT_BUNDLE_IDENTIFIER = com.partidodigital.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = USE_PUSH;
 				SWIFT_VERSION = 5.0;

ios/App/App/Info.plist

@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>nextjs-tailwind-capacitor</string>
+	<string>Partido Digital</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>

ios/App/Podfile

@@ -10,7 +10,7 @@ def capacitor_pods
   # Automatic Capacitor Pod dependencies, do not delete
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  
+  pod 'CapacitorDarkMode', :path => '../../node_modules/capacitor-dark-mode'
   # Do not delete
 end
 

package-lock.json

@@ -307,11 +307,52 @@
       "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.0.3.tgz",
       "integrity": "sha512-XtzzPX2R4+MIyu1waEQUo2tiNwWVEkmObA6pboRCDTPOs4Ri8ckaIE08lN5A5opyF6GVN+IEq/J8KQrgsePsZQ=="
     },
+    "@rollup/plugin-node-resolve": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz",
+      "integrity": "sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==",
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.17.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
+    },
     "@types/json-schema": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
       "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw=="
     },
+    "@types/node": {
+      "version": "14.14.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+      "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw=="
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@virtuoso.dev/react-urx": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.2.tgz",
@@ -1021,6 +1062,11 @@
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
     },
+    "builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA=="
+    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -1106,6 +1152,14 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001166.tgz",
       "integrity": "sha512-nCL4LzYK7F4mL0TjEMeYavafOGnBa98vTudH5c8lW9izUjnB99InG6pmC1ElAI1p0GlyZajv4ltUdFXvOHIl1A=="
     },
+    "capacitor-dark-mode": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/capacitor-dark-mode/-/capacitor-dark-mode-1.0.5.tgz",
+      "integrity": "sha512-M/4+iCUR1axcL2kCue+JSQlOWTmHGG6sSU4WIAzI6NtlhvbxesbcTlgPIMEp/ThWbD/AWkhX44Jz4dEdNbyVdQ==",
+      "requires": {
+        "@rollup/plugin-node-resolve": "^9.0.0"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -1638,6 +1692,11 @@
       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
       "optional": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "define-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
@@ -2010,6 +2069,11 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2897,6 +2961,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@capacitor/core": "^2.4.5",
     "@capacitor/ios": "^2.4.5",
     "autoprefixer": "^10.1.0",
+    "capacitor-dark-mode": "^1.0.5",
     "classnames": "^2.2.6",
     "next": "10.0.3",
     "postcss": "^8.2.1",

tailwind.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   purge: [],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'class',
   theme: {
     extend: {},
   },