Adding Dark mode 🌗

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 =>