feat: DARK MODE!!1!

components/Feed.js

@@ -23,7 +23,7 @@ const Feed = ({
             });
           }}
         >
-          <img alt={url} loading="lazy" src={previewPath} className={`aspect-${type} bg-neutral-100`} />
+          <img alt={url} loading="lazy" src={previewPath} className={`aspect-${type} bg-neutral-100 dark:bg-neutral-900`} />
         </a>
       ))}
   </main>

components/Footer.js

@@ -24,7 +24,7 @@ const Footer = ({ license, links, repo, commitID }) => (
         <p>
           &copy; {YEAR_TO_BUMP}{" "}
           <Link
-            className="text-neutral-600"
+            className="text-neutral-600 dark:text-neutral-200"
             target="_blank"
             rel="noopener noreferer"
             href="https://github.com/faultables"
@@ -37,7 +37,7 @@ const Footer = ({ license, links, repo, commitID }) => (
           </Link>{" "}
           unless stated otherwise •{" "}
           <Link
-            className="text-neutral-600"
+            className="text-neutral-600 dark:text-neutral-200"
             target="_blank"
             rel="noopener noreferer"
             href={`${repo}/commit/${commitID}`}

components/Navbar.js

@@ -1,7 +1,7 @@
 import Link from "next/link";
 
 const Navbar = ({ name, logo }) => (
-  <nav className="flex py-2 border-b">
+  <nav className="flex py-2 border-b dark:border-neutral-800">
     <div className="w-3/12 md:w-7/12 md:mx-auto">
       <div className="md:w-2/12">
         <Link href="/">

components/Profile.js

@@ -5,7 +5,7 @@ const Profile = ({ profile, totalPosts }) => (
         loading="lazy"
         alt={profile.display_name}
         src={profile.avatar}
-        className="w-100 rounded-full mx-auto border bg-neutral-100 border-gray-200 p-1"
+        className="w-full rounded-full mx-auto border bg-neutral-100 border-gray-200 p-1 dark:border-neutral-800 dark:bg-black"
       />
     </div>
     <div className="lg:w-9/12 md:w-10/12 mb-5 md:p-5 ml-5">
@@ -13,13 +13,13 @@ const Profile = ({ profile, totalPosts }) => (
         <h2 className="text-2xl font-semibold">{profile.username}</h2>
         <div className="md:ml-4 my-4">
           <a
-            className="rounded-md bg-gray-100 px-5 font-semibold py-2 md:ml-2 text-sm leading-relaxed"
+            className="rounded-md bg-gray-100 px-5 font-semibold py-2 md:ml-2 text-sm leading-relaxed dark:bg-neutral-800"
             href={profile.follow_url}
           >
             Follow
           </a>
           <a
-            className="rounded-md bg-gray-100 px-5 font-semibold py-2 ml-2 text-sm leading-relaxed"
+            className="rounded-md bg-gray-100 px-5 font-semibold py-2 ml-2 text-sm leading-relaxed dark:bg-neutral-800"
             href={profile.message_url}
           >
             Message
@@ -31,7 +31,7 @@ const Profile = ({ profile, totalPosts }) => (
       </div>
       <p className="font-bold mb-1">{profile.display_name}</p>
       <p>{profile.about}</p>
-      <p className="leading-loose font-semibold text-blue-900">
+      <p className="leading-loose font-semibold text-blue-900 dark:text-blue-200">
         <a
           target="_blank"
           rel="noopener noreferer"

components/Tab.js

@@ -1,8 +1,8 @@
 const isActiveTab = (currentTab, activeTab) =>
-  currentTab === activeTab ? "border-t" : "";
+  currentTab === activeTab ? "border-t dark:border-neutral-400" : "";
 
 const Tab = ({ activeTab, setActiveTab }) => (
-  <div className="flex items-center justify-center text-center gap-5 border-t mb-4">
+  <div className="flex items-center justify-center text-center gap-5 border-t mb-4 dark:border-neutral-800">
     <button
       onClick={() => setActiveTab("photos")}
       className={`uppercase tracking-tight font-semibold text-sm border-black pt-3 px-3 ${isActiveTab(

pages/_app.js

@@ -2,8 +2,6 @@ import "../styles/globals.css";
 
 import Script from "next/script";
 
-import { Fragment } from "react";
-
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 
@@ -16,7 +14,7 @@ const Content = ({ children }) => (
 );
 
 const App = ({ Component, pageProps }) => (
-  <Fragment>
+  <div className='bg-white dark:bg-black dark:text-neutral-200'>
     <Navbar name={config.navbar.logotype} logo={config.navbar.logo} />
     <Content>
       <Component {...pageProps} />
@@ -34,7 +32,7 @@ const App = ({ Component, pageProps }) => (
         data-website-id={process.env.UMAMI_WEBSITE_ID}
       />
     ) : null}
-  </Fragment>
+  </div>
 );
 
 export default App;

pages/static/about.js

@@ -1,7 +1,7 @@
 const About = () => (
   <div className="p-2">
-    <div className="md:border p-5 md:w-8/12 md:shadow md:rotate-[-0.5deg] mx-auto text-neutral-600">
+    <div className="md:border p-5 md:w-8/12 md:shadow md:rotate-[-0.5deg] mx-auto text-neutral-600 dark:text-neutral-200 dark:border-neutral-800">
-      <h2 className="font-bold text-3xl leading-loose mb-2 text-black">
+      <h2 className="font-bold text-3xl leading-loose mb-2 text-black dark:text-neutral-200">
         Notes from @faultables
       </h2>
       <p className="mb-6">