Dark theme

components/letterhead.js

@@ -63,6 +63,7 @@ const Letterhead = ({
   title,
   desc,
   author = { name: null, avatar: null, url: null },
+  theme = 'light',
   date,
   img,
   path,
@@ -73,8 +74,11 @@ const Letterhead = ({
 }) => (
   <>
     <Meta as={Head} title={title} description={desc} image={img} />
-    <Nav color="text" />
-    <ForceTheme theme="light" />
+    <Nav
+      color={theme === 'light' ? 'text' : 'white'}
+      dark={theme === 'light' ? false : true}
+    />
+    <ForceTheme theme={theme} />
     <Box
       as="header"
       sx={{
@@ -110,7 +114,7 @@ const Letterhead = ({
     >
       {children}
     </Container>
-    <Footer />
+    <Footer dark={theme === 'light' ? false : true} />
   </>
 )
 

pages/content/fiscal-sponsorship.mdx

@@ -5,6 +5,7 @@ import Letterhead from '../../components/letterhead'
   desc="A rundown on fiscal sponsorship, a fast track to 501(c)(3) nonprofit status for your organization."
   img="https://workshop-cards.hackclub.com/Fiscal%20Sponsorship.png?theme=dark&md=1&fontSize=200px&caption=Hack%2520Club%2520Bank&images=https%3A%2F%2Fbank.hackclub.com%2Fbrand%2Fhcb-icon-icon-original.png"
   path="fiscal-sponsorship.mdx"
+  theme="dark"
 >
 
 Working on a project, event, or organization with a mission to serve the public good or your community? Obtaining 501(c)(3) public charity status in the US just got easier.