diff --git a/components/Article/index.jsx b/components/Article/index.jsx
index 66b66a4..9c8edc0 100644
--- a/components/Article/index.jsx
+++ b/components/Article/index.jsx
@@ -51,7 +51,9 @@ export default class Article extends React.Component {
             margin: 20px 0;
           `}
         >
+          
           <AuthorCard
+            darkmode={this.props.darkmode}
             image={
               author.simple_local_avatar != null
                 ? author.simple_local_avatar.full
@@ -89,7 +91,7 @@ export default class Article extends React.Component {
           display: block;
           padding: 10px;
           box-shadow: ${globals.cardShadow};
-          background-color: #ffffff;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
         `}
       >
         <div
@@ -121,10 +123,10 @@ export default class Article extends React.Component {
 
             font-family: ${globals.headlineFont};
             font-style: normal;
-            font-weight: bold;
+            font-weight: ${this.props.darkmode ? 550 : "bold"};
             font-size: 30px;
             line-height: 1.25;
-            color: #000000;
+            color: ${this.props.darkmode ? "#ddd" : "#000"};
           `}
           style={{
             fontStyle:
@@ -194,12 +196,12 @@ export default class Article extends React.Component {
                   line-height: 21px;
                   padding: 5px 0 0;
 
-                  color: #000000;
+                  color: ${this.props.darkmode ? "#ddd" : "#000"};
 
                   a {
                     text-decoration: none;
                     color: #0080c6;
-                    background-color: #ffffff;
+                    background-color: ${this.props.darkmode ? "#222" : "#fff"};
                   }
                   a:hover {
                     text-decoration: underline;
@@ -216,6 +218,7 @@ export default class Article extends React.Component {
                   font-weight: 300;
                   font-size: 12px;
                   line-height: 15px;
+                  color: ${this.props.darkmode ? "#fff" : "000"};
                 `}
               >
                 {moment.utc(this.props.date).format("MMM D, YYYY h:mm a")}
@@ -227,7 +230,7 @@ export default class Article extends React.Component {
               css={css`
                 font-size: 12px;
                 font-family: ${globals.bodyFont};
-                color: ${globals.darkGray};
+                color: ${this.props.darkmode ? "#fff" : globals.darkGray};
                 max-width: 640px;
                 margin: 20px auto 0;
               `}
@@ -243,7 +246,7 @@ export default class Article extends React.Component {
               text-align: left;
               line-height: 1.75;
 
-              color: #000000;
+              color: ${this.props.darkmode  ? "#fff" : "#000"};
               display: block;
               max-width: 640px;
               margin: auto;
@@ -294,6 +297,7 @@ export default class Article extends React.Component {
               }
 
               & iframe {
+                ${this.props.darkmode ? "filter: brightness(0.6);" : ""}
                 width: 100%;
               }
 
@@ -338,6 +342,7 @@ export default class Article extends React.Component {
           />
           <div>
             <ShareButtons
+              darkmode={this.props.darkmode}
               title={this.props.headline}
               url={this.props.link}
             ></ShareButtons>
diff --git a/components/ArticleCard/Full.jsx b/components/ArticleCard/Full.jsx
index 8259ca0..fbb4d78 100644
--- a/components/ArticleCard/Full.jsx
+++ b/components/ArticleCard/Full.jsx
@@ -14,7 +14,7 @@ export default function Full(props) {
         display: block;
         padding: 10px;
         box-shadow: ${globals.cardShadow};
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
       `}
     >
       <span>
@@ -43,9 +43,9 @@ export default function Full(props) {
             dangerouslySetInnerHTML={{ __html: props.category.name }}
           />
         </a>
-        <span
+        <span          
           css={css`
-            border-left: 1px solid #000;
+            border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
             margin: 0;
             padding-left: 4px;
             font-family: ${globals.bodyFont};
@@ -53,6 +53,8 @@ export default function Full(props) {
             font-weight: 300;
             font-size: 11px;
             line-height: 14px;
+            color: ${props.darkmode ? "#ddd" : "#000"};
+
           `}
         >
           {moment(props.date).format("MMM D, YYYY h:mm a")}
@@ -62,7 +64,7 @@ export default function Full(props) {
         <div
           css={css`
             margin: 2px 0 6px;
-            ${locals.headline};
+            ${props.darkmode ? locals.darkheadline : locals.headline};
           `}
           style={{
             fontStyle:
@@ -89,14 +91,15 @@ export default function Full(props) {
               margin: 4px 0;
             }
 
-            color: #000000;
+            color: ${props.darkmode ? "#ddd" : "#000"};
+
           `}
           dangerouslySetInnerHTML={{ __html: props.caption }}
         />
         <div
           css={css`
             margin: 0 0 5px;
-            ${locals.excerpt}
+            ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
           `}
           dangerouslySetInnerHTML={{ __html: props.excerpt }}
         />
@@ -110,7 +113,8 @@ export default function Full(props) {
           font-weight: bold;
           font-size: 11px;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
+
         `}
       >
         By {utilities.renderAuthors(props.authors)}
diff --git a/components/ArticleCard/Horz.jsx b/components/ArticleCard/Horz.jsx
index 9cc6184..5fd7cd8 100644
--- a/components/ArticleCard/Horz.jsx
+++ b/components/ArticleCard/Horz.jsx
@@ -14,7 +14,7 @@ export default function Horz(props) {
         display: flex;
         box-shadow: ${globals.cardShadow};
         padding: 0px;
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
       `}
     >
       <div
@@ -58,7 +58,7 @@ export default function Horz(props) {
             font-size: 8px;
             text-align: right;
 
-            color: #000000;
+            color: ${props.darkmode ? "#ddd" : "#000"};
           `}
         >
           {props.photographer}
@@ -99,7 +99,7 @@ export default function Horz(props) {
           </a>
           <span
             css={css`
-              border-left: 1px solid #000;
+              border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
               margin: 0;
               padding-left: 4px;
               font-family: ${globals.bodyFont};
@@ -107,6 +107,8 @@ export default function Horz(props) {
               font-weight: 300;
               font-size: 11px;
               line-height: 14px;
+              color: ${props.darkmode ? "#ddd" : "#000"};
+
             `}
           >
             {moment(props.date).format("MMM D, YYYY h:mm a")}
@@ -116,7 +118,7 @@ export default function Horz(props) {
           <div
             css={css`
               margin: 2px 0 4px;
-              ${locals.headline};
+              ${props.darkmode ? locals.darkheadline : locals.headline};
             `}
             style={{
               fontStyle:
@@ -127,7 +129,7 @@ export default function Horz(props) {
           <div
             css={css`
               margin: 0 0 5px;
-              ${locals.excerpt}
+              ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
             `}
             dangerouslySetInnerHTML={{ __html: props.excerpt }}
           />
@@ -141,7 +143,8 @@ export default function Horz(props) {
             font-weight: bold;
             font-size: 11px;
 
-            color: #000000;
+            color: ${props.darkmode ? "#ddd" : "#000"};
+
           `}
         >
           By {utilities.renderAuthors(props.authors)}
diff --git a/components/ArticleCard/Long.jsx b/components/ArticleCard/Long.jsx
index 2f9234c..3b3debf 100644
--- a/components/ArticleCard/Long.jsx
+++ b/components/ArticleCard/Long.jsx
@@ -14,7 +14,7 @@ export default function Long(props) {
         box-shadow: ${globals.cardShadow};
         height: 100%;
         padding: 0px;
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
       `}
     >
       <div
@@ -51,7 +51,7 @@ export default function Long(props) {
           </a>
           <span
             css={css`
-              border-left: 1px solid #000;
+              border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
               margin: 0;
               padding-left: 4px;
               font-family: ${globals.bodyFont};
@@ -59,6 +59,7 @@ export default function Long(props) {
               font-weight: 300;
               font-size: 11px;
               line-height: 14px;
+              color: ${props.darkmode ? "#ddd" : "#000"};
             `}
           >
             {moment(props.date).format("MMM D, YYYY h:mm a")}
@@ -68,7 +69,7 @@ export default function Long(props) {
           <h1
             css={css`
               margin: 2px 0;
-              ${locals.headline};
+              ${props.darkmode ? locals.darkheadline : locals.headline};
             `}
             style={{
               fontStyle:
@@ -80,7 +81,7 @@ export default function Long(props) {
         <a href={props.as} style={{ textDecoration: "none" }}>
           <div
             css={css`
-              ${locals.excerpt}
+              ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
             `}
             dangerouslySetInnerHTML={{ __html: props.excerpt }}
           />
@@ -94,7 +95,7 @@ export default function Long(props) {
             font-weight: bold;
             font-size: 11px;
 
-            color: #000000;
+            color: ${props.darkmode ? "#ddd" : "#000"};
           `}
         >
           By {utilities.renderAuthors(props.authors)}
diff --git a/components/ArticleCard/Mini.jsx b/components/ArticleCard/Mini.jsx
index 3467fca..fa0da80 100644
--- a/components/ArticleCard/Mini.jsx
+++ b/components/ArticleCard/Mini.jsx
@@ -14,7 +14,7 @@ export default function Mini(props) {
         display: flex;
         box-shadow: ${globals.cardShadow};
         padding: 0px;
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
       `}
     >
       <div
@@ -84,7 +84,7 @@ export default function Mini(props) {
           <h1
             css={css`
               margin: 2px 0 4px;
-              ${locals.headline};
+              ${props.darkmode ? locals.darkheadline : locals.headline};
               font-size: 0.85rem;
               font-weight: 550;
             `}
diff --git a/components/ArticleCard/Podcast.jsx b/components/ArticleCard/Podcast.jsx
index 02ad4d6..034f1a6 100644
--- a/components/ArticleCard/Podcast.jsx
+++ b/components/ArticleCard/Podcast.jsx
@@ -14,7 +14,7 @@ export default function Podcast(props) {
         display: block;
         padding: 10px;
         box-shadow: ${globals.cardShadow};
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
         height: 100%;
       `}
     >
@@ -50,7 +50,7 @@ export default function Podcast(props) {
           font-size: 8px;
           text-align: right;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
         `}
       >
         {props.photographer}
@@ -83,7 +83,7 @@ export default function Podcast(props) {
         </a>
         <span
           css={css`
-            border-left: 1px solid #000;
+            border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
             margin: 0;
             padding-left: 4px;
             font-family: ${globals.bodyFont};
@@ -91,6 +91,7 @@ export default function Podcast(props) {
             font-weight: 300;
             font-size: 11px;
             line-height: 14px;
+            color: ${props.darkmode ? "#ddd" : "#000"};
           `}
         >
           {moment(props.date).format("MMM D, YYYY h:mm a")}
@@ -100,14 +101,14 @@ export default function Podcast(props) {
         <div
           css={css`
             margin: 2px 0 4px;
-            ${locals.headline}
+            ${props.darkmode ? locals.darkheadline : locals.headline};
           `}
           dangerouslySetInnerHTML={{ __html: props.headline }}
         />
         <div
           css={css`
             margin: 0 0 5px;
-            ${locals.excerpt}
+            ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
           `}
           dangerouslySetInnerHTML={{ __html: props.excerpt }}
         />
@@ -121,7 +122,7 @@ export default function Podcast(props) {
           font-weight: 700;
           font-size: 11px;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
         `}
       >
         By {utilities.renderAuthors(props.authors)}
diff --git a/components/ArticleCard/Vert.jsx b/components/ArticleCard/Vert.jsx
index c8358dc..b84d3eb 100644
--- a/components/ArticleCard/Vert.jsx
+++ b/components/ArticleCard/Vert.jsx
@@ -14,7 +14,7 @@ export default function Vert(props) {
         display: block;
         padding: 10px;
         box-shadow: ${globals.cardShadow};
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
       `}
     >
       <a href={props.as} style={{ textDecoration: "none" }}>
@@ -36,7 +36,7 @@ export default function Vert(props) {
           font-size: 8px;
           text-align: right;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
         `}
       >
         {props.photographer}
@@ -69,7 +69,7 @@ export default function Vert(props) {
         </a>
         <span
           css={css`
-            border-left: 1px solid #000;
+            border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
             margin: 0;
             padding-left: 4px;
             font-family: ${globals.bodyFont};
@@ -77,6 +77,8 @@ export default function Vert(props) {
             font-weight: 300;
             font-size: 11px;
             line-height: 14px;
+            color: ${props.darkmode ? "#ddd" : "#000"};
+
           `}
         >
           {moment(props.date).format("MMM D, YYYY h:mm a")}
@@ -86,7 +88,7 @@ export default function Vert(props) {
         <div
           css={css`
             margin: 2px 0 4px;
-            ${locals.headline};
+            ${props.darkmode ? locals.darkheadline : locals.headline};
           `}
           style={{
             fontStyle:
@@ -97,7 +99,7 @@ export default function Vert(props) {
         <div
           css={css`
             margin: 0 0 5px;
-            ${locals.excerpt}
+            ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
           `}
           dangerouslySetInnerHTML={{ __html: props.excerpt }}
         />
@@ -111,7 +113,8 @@ export default function Vert(props) {
           font-weight: 700;
           font-size: 11px;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
+
         `}
       >
         By {utilities.renderAuthors(props.authors)}
diff --git a/components/ArticleCard/Video.jsx b/components/ArticleCard/Video.jsx
index c90fcec..d4285b7 100644
--- a/components/ArticleCard/Video.jsx
+++ b/components/ArticleCard/Video.jsx
@@ -14,10 +14,11 @@ export default function Video(props) {
         display: block;
         padding: 10px;
         box-shadow: ${globals.cardShadow};
-        background-color: #ffffff;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
         height: 100%;
       `}
     >
+     
       <a href={props.as} style={{ textDecoration: "none" }}>
         <div
           css={css`
@@ -40,6 +41,7 @@ export default function Video(props) {
           />
         </div>
       </a>
+    
       <h4
         css={css`
           margin: 2px 0;
@@ -50,7 +52,7 @@ export default function Video(props) {
           font-size: 8px;
           text-align: right;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
         `}
       >
         {props.photographer}
@@ -83,7 +85,7 @@ export default function Video(props) {
         </a>
         <span
           css={css`
-            border-left: 1px solid #000;
+            border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
             margin: 0;
             padding-left: 4px;
             font-family: ${globals.bodyFont};
@@ -91,6 +93,7 @@ export default function Video(props) {
             font-weight: 300;
             font-size: 11px;
             line-height: 14px;
+            color: ${props.darkmode ? "#ddd" : "#000"};
           `}
         >
           {moment(props.date).format("MMM D, YYYY h:mm a")}
@@ -100,14 +103,14 @@ export default function Video(props) {
         <div
           css={css`
             margin: 2px 0 4px;
-            ${locals.headline}
+            ${props.darkmode ? locals.darkheadline : locals.headline};
           `}
           dangerouslySetInnerHTML={{ __html: props.headline }}
         />
         <div
           css={css`
             margin: 0 0 5px;
-            ${locals.excerpt}
+            ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
           `}
           dangerouslySetInnerHTML={{ __html: props.excerpt }}
         />
@@ -121,7 +124,7 @@ export default function Video(props) {
           font-weight: 700;
           font-size: 11px;
 
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};;
         `}
       >
         By {utilities.renderAuthors(props.authors)}
diff --git a/components/ArticleCard/locals.js b/components/ArticleCard/locals.js
index 3d75b6c..982aace 100644
--- a/components/ArticleCard/locals.js
+++ b/components/ArticleCard/locals.js
@@ -6,7 +6,18 @@ export const headline = `
   font-weight: bold;
   font-size: 1.5rem;
   line-height: 1.25;
-  color: #000000;
+  color: #000;
+  &:hover {
+    color: ${globals.DBblue};
+  }`;
+
+export const darkheadline = `
+  font-family: ${globals.headlineFont};
+  font-style: normal;
+  font-weight: 550;
+  font-size: 1.5rem;
+  line-height: 1.25;
+  color: #ddd;
   &:hover {
     color: ${globals.DBblue};
   }`;
@@ -15,7 +26,22 @@ export const excerpt = `
   font-family: ${globals.bodyFont};
   font-weight: 300;
   font-size: 0.75rem;
-  color: #000000;
+  color: #000;
+
+  p {
+    margin: 0;
+  }
+  
+  br {
+    display: none;
+  }
+  `;
+
+export const darkexcerpt = `
+  font-family: ${globals.bodyFont};
+  font-weight: 300;
+  font-size: 0.75rem;
+  color: #ddd;
 
   p {
     margin: 0;
diff --git a/components/AuthorCard/index.jsx b/components/AuthorCard/index.jsx
index 8765654..8a237a8 100644
--- a/components/AuthorCard/index.jsx
+++ b/components/AuthorCard/index.jsx
@@ -47,7 +47,8 @@ export default class AuthorCard extends React.Component {
     return (
       <div
         css={css`
-          background-color: white;
+          background-color: ${this.props.darkmode? "#222" : "#fff"};
+          color:  ${this.props.darkmode? "#fff" : "#000"};
           box-shadow: ${globals.cardShadow};
           height: auto;
           border-top: 7px solid #000;
@@ -109,7 +110,8 @@ export default class AuthorCard extends React.Component {
             >
               <a
                 css={css`
-                  color: #000;
+                  background-color: ${this.props.darkmode? "#222" : "#fff"};
+                  color:  ${this.props.darkmode? "#fff" : "#000"};
                 `}
                 href={this.props.link}
               >
@@ -117,6 +119,7 @@ export default class AuthorCard extends React.Component {
               </a>
               <span
                 css={css`
+                  color:  ${this.props.darkmode? "#fff" : "#000"};
                   @media (max-width: 600px) {
                     display: none;
                   }
@@ -130,7 +133,7 @@ export default class AuthorCard extends React.Component {
                 css={css`
                   font-family: ${globals.bodyFont};
                   font-size: 16px;
-
+                  color:  ${this.props.darkmode? "#fff" : "#000"};
                   @media (max-width: 600px) {
                     display: block;
                   }
diff --git a/components/BreakingBanner/index.jsx b/components/BreakingBanner/index.jsx
index 8466d1a..3aceb25 100644
--- a/components/BreakingBanner/index.jsx
+++ b/components/BreakingBanner/index.jsx
@@ -11,7 +11,7 @@ export default class BreakingBanner extends React.Component {
     return (
       <div
         css={css`
-          background-color: white;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
           padding: ${globals.cardPadding};
           box-shadow: ${globals.cardShadow};
           display: table;
@@ -62,7 +62,7 @@ export default class BreakingBanner extends React.Component {
               font-size: 16px;
               font-family: ${globals.bodyFont};
               font-weight: 700;
-              color: #000;
+              color: ${this.props.darkmode ? "#ddd" : "#000"};
               text-decoration: none;
               &:hover {
                 color: ${globals.DBblue};
diff --git a/components/ClassifiedsCard/index.jsx b/components/ClassifiedsCard/index.jsx
index 300f547..493c21e 100644
--- a/components/ClassifiedsCard/index.jsx
+++ b/components/ClassifiedsCard/index.jsx
@@ -34,11 +34,12 @@ function Classified(props) {
           font-family: ${globals.bodyFont};
           font-weight: 300;
           font-size: 11px;
-          color: #000000;
+          color: ${props.darkmode ? "#ddd" : "#000"};
           text-decoration: none;
+          background-color: ${props.darkmode ? "#222" : "#fff"};
 
           &:hover {
-            color: #444;
+            color: ${props.darkmode ? "#bbb" : "#444"};
             text-decoration: none;
           }
 
@@ -55,18 +56,25 @@ function Classified(props) {
 export default class ClassifiedsCard extends React.Component {
   constructor(props) {
     super(props);
+    this.renderedClassifieds = [];
   }
 
   render() {
-    const renderedClassifieds = [];
+    this.renderedClassifieds = [];
     if (this.props.classifieds != null) {
       for (const i of this.props.classifieds) {
-        renderedClassifieds.push(
-          <Classified
-            key={i.content.url}
-            category={i.category}
-            content={i.content}
-          />
+        let c = (<Classified
+          darkmode={this.props.darkmode}
+          key={i.content.url}
+          category={i.category}
+          content={i.content}
+        />);
+        this.renderedClassifieds.push(
+          <div className={css.card} key={i}>
+            {React.cloneElement(c, {
+              darkmode: this.props.darkmode
+            })}
+          </div>
         );
       }
     }
@@ -75,12 +83,11 @@ export default class ClassifiedsCard extends React.Component {
       <div
         css={css`
           box-shadow: ${globals.cardShadow};
-          background-color: #ffffff;
         `}
       >
         <div
           css={css`
-            background-color: #000000;
+            background-color: #000;
             height: 27px;
             padding: 2px 10px 0;
 
@@ -91,7 +98,8 @@ export default class ClassifiedsCard extends React.Component {
             line-height: 24px;
             text-transform: uppercase;
 
-            color: #ffffff;
+            color: ${this.props.darkmode ? "#ddd" : "#fff"};
+            /* color: #fff; */
           `}
         >
           {this.props.header}
@@ -99,9 +107,11 @@ export default class ClassifiedsCard extends React.Component {
         <div
           css={css`
             padding: 0 12px;
+            background-color: ${this.props.darkmode ? "#222" : "#fff"};
+            color: ${this.props.darkmode ? "#ddd" : "#000"};
           `}
         >
-          {renderedClassifieds}
+          {this.renderedClassifieds}
         </div>
         <div style={{ textAlign: "right", padding: "12px 12px 6px" }}>
           <a
diff --git a/components/CommentsCard/index.jsx b/components/CommentsCard/index.jsx
index 14f534c..6ae867a 100644
--- a/components/CommentsCard/index.jsx
+++ b/components/CommentsCard/index.jsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 /** @jsx jsx */
 import { css, jsx } from "@emotion/core";
-
+import * as globals from "../globals";
 import { cardShadow, cardPadding, menuFont } from "../globals";
 import { DiscussionEmbed } from "disqus-react";
 
@@ -10,12 +10,11 @@ export default function CommentsCard(props) {
     <div
       css={css`
         box-shadow: ${cardShadow};
-        background-color: #ffffff;
       `}
     >
       <div
         css={css`
-          background-color: #000000;
+          background-color: #000;
           height: 27px;
           padding: 2px 10px 0;
 
@@ -26,7 +25,7 @@ export default function CommentsCard(props) {
           line-height: 24px;
           text-transform: uppercase;
 
-          color: #ffffff;
+          color: #fff;
         `}
       >
         COMMENTS
diff --git a/components/EmailSignUp/index.jsx b/components/EmailSignUp/index.jsx
index a4102d1..4bb9c34 100644
--- a/components/EmailSignUp/index.jsx
+++ b/components/EmailSignUp/index.jsx
@@ -45,7 +45,7 @@ export default class EmailPopUp extends React.Component {
             top: 29%;
             left: 0;
             right: 0;
-            background-color: #ffffff;
+            background-color: ${this.props.darkmode ? "#222" : "#fff"};
             box-shadow: ${globals.cardShadow};
             z-index: 3001;
           `}
@@ -60,7 +60,7 @@ export default class EmailPopUp extends React.Component {
               border: none;
               font-family: ${globals.menuFont};
               font-weight: 700;
-              color: #000;
+              color: ${this.props.darkmode ? "#ddd" : "#474747"};
               font-size: 18px;
               z-index: 3002;
               cursor: pointer;
@@ -123,7 +123,7 @@ export default class EmailPopUp extends React.Component {
                 font-family: "PT Serif";
                 font-weight: bold;
                 font-size: 30px;
-                color: #474747;
+                color: ${this.props.darkmode ? "#ddd" : "#474747"};
                 // text-align: left;
                 text-align: center;
                 z-index: 3001;
@@ -162,7 +162,7 @@ export default class EmailPopUp extends React.Component {
                   top: 40px;
                   left: 20px;
                   padding-left: 5px;
-                  border: 2px solid #cccccc;
+                  border: 2px solid #ccc;
                   font-family: "PT Serif";
                   font-size: 15px;
                   font-weight: bold;
@@ -189,7 +189,7 @@ export default class EmailPopUp extends React.Component {
                   font-family: "PT Serif";
                   font-weight: bolder;
                   font-size: 16px;
-                  color: #ffffff;
+                  color: #fff;
                   z-index: 3001;
                   cursor: pointer;
                   border-radius: 0;
diff --git a/components/FeatureArticle/index.jsx b/components/FeatureArticle/index.jsx
index f078678..384913f 100644
--- a/components/FeatureArticle/index.jsx
+++ b/components/FeatureArticle/index.jsx
@@ -11,7 +11,7 @@ import Tag from "./Tag";
 import Landing from "./Landing";
 
 import MiniArticleCard from "../ArticleCard/Mini";
-
+// TODO
 export default class FeatureArticle extends React.Component {
   constructor(props) {
     super(props);
@@ -29,6 +29,8 @@ export default class FeatureArticle extends React.Component {
             display: inline-block;
             padding: 6px 12px;
             white-space: initial;
+            /* background-color: ${this.props.darkmode? "#222" : "#fff"};
+            color:  ${this.props.darkmode? "#fff" : "#000"}; */
 
             &:first-of-type {
               margin-left: 20px;
@@ -39,6 +41,7 @@ export default class FeatureArticle extends React.Component {
           `}
         >
           <MiniArticleCard
+          darkmode={this.props.darkmode}
             headline={story.title.rendered}
             category={{
               name: story._embedded["wp:term"][0][0].name,
@@ -73,6 +76,8 @@ export default class FeatureArticle extends React.Component {
             display: inline-block;
             padding: 6px 12px;
             white-space: initial;
+            background-color: ${this.props.darkmode? "#222" : "#fff"};
+            color:  ${this.props.darkmode? "#fff" : "#000"};
 
             &:first-of-type {
               margin-left: 20px;
@@ -83,6 +88,7 @@ export default class FeatureArticle extends React.Component {
           `}
         >
           <MiniArticleCard
+            darkmode={this.props.darkmode}
             headline={story.title.rendered}
             category={{
               name: story._embedded["wp:term"][0][0].name,
@@ -111,6 +117,7 @@ export default class FeatureArticle extends React.Component {
           `}
         >
           <AuthorCard
+            darkmode={this.props.darkmode}
             image={author.avatar_urls[512]}
             name={author.name}
             description={author.description}
@@ -161,7 +168,8 @@ export default class FeatureArticle extends React.Component {
       <div
         css={css`
           display: block;
-          background-color: #ffffff;
+          background-color: ${this.props.darkmode? "#222" : "#fff"};
+          color:  ${this.props.darkmode? "#fff" : "#000"};
         `}
       >
         <Tag></Tag>
@@ -219,6 +227,7 @@ export default class FeatureArticle extends React.Component {
               margin-left: 20px;
               margin-bottom: 5px;
               max-width: 400px;
+              
             `}
           >
             {renderedInfobox}
@@ -245,12 +254,12 @@ export default class FeatureArticle extends React.Component {
                     line-height: 21px;
                     padding: 5px 0 0;
 
-                    color: #000000;
+                    color: ${this.props.darkmode ? "#ddd" : "#000"};
 
                     a {
                       text-decoration: none;
                       color: #0080c6;
-                      background-color: #ffffff;
+                      background-color: ${this.props.darkmode ? "#222" : "#fff"};
                     }
                     a:hover {
                       text-decoration: underline;
@@ -283,7 +292,8 @@ export default class FeatureArticle extends React.Component {
                 text-align: left;
                 line-height: 1.75;
 
-                color: #000000;
+                background: ${this.props.darkmode ? "#222" : "#fff"};
+                color: ${this.props.darkmode ? "#ddd" : "#000"};
                 display: block;
                 max-width: 640px;
                 margin: auto;
@@ -299,7 +309,8 @@ export default class FeatureArticle extends React.Component {
                   min-width: 150px;
                   font-family: "Playfair Display", serif;
                   font-size: 1.1rem;
-                  color: #000;
+                  background: ${this.props.darkmode ? "#222" : "#fff"};
+                  color: ${this.props.darkmode ? "#ddd" : "#000"};
                 }
                 @media (max-width: 40em) {
                   aside {
@@ -345,6 +356,7 @@ export default class FeatureArticle extends React.Component {
                 }
 
                 iframe {
+                  ${this.props.darkmode ? "filter: brightness(0.6);" : ""}
                   width: 100%;
                 }
 
diff --git a/components/InTheNewsBanner/index.jsx b/components/InTheNewsBanner/index.jsx
index e48d7c1..5b5cb84 100644
--- a/components/InTheNewsBanner/index.jsx
+++ b/components/InTheNewsBanner/index.jsx
@@ -21,7 +21,7 @@ export default class InTheNewsBanner extends React.Component {
             padding: 2px 5px;
             font-family: ${globals.bodyFont};
             font-weight: 700;
-            color: #000;
+            color: ${this.props.darkmode ? "#ddd" : "#000"};
             text-decoration: none;
             &:hover {
               color: ${globals.DBblue};
@@ -36,7 +36,8 @@ export default class InTheNewsBanner extends React.Component {
     return (
       <div
         css={css`
-          background-color: white;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
+          color: ${this.props.darkmode ? "#ddd" : "#000"};
           width: 100%;
           display: table;
           padding: ${globals.cardPadding};
diff --git a/components/MainSiteFooter/index.jsx b/components/MainSiteFooter/index.jsx
index 7c88ed3..f145039 100644
--- a/components/MainSiteFooter/index.jsx
+++ b/components/MainSiteFooter/index.jsx
@@ -31,9 +31,10 @@ export default function MainSiteFooter(props) {
         font-size: 0.85rem;
         flex-direction: row;
         padding: 0.4rem;
-        background-color: white;
+        background-color: ${props.darkmode ? "#222" : "#fff"};
+        color: ${props.darkmode ? "#ddd" : "#000"};
         font-family: ${MainSiteStyles.headlineFont};
-        font-weight: ${MainSiteStyles.boldFont};
+        font-weight: ${props.darkmode ? 550 : MainSiteStyles.boldFont};
         box-shadow: ${MainSiteStyles.cardShadow};
         border-top: 5px solid black;
 
diff --git a/components/MainSiteHeader/HeaderBar.tsx b/components/MainSiteHeader/HeaderBar.tsx
index ac3b9e4..3ccc756 100644
--- a/components/MainSiteHeader/HeaderBar.tsx
+++ b/components/MainSiteHeader/HeaderBar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
-
+import * as globals from "../globals";
 const dbLogo=require('./db_logo.svg')
 import * as MainSiteStyles from '../globals'
 // import { faBars, faTimes, faSearch } from '@fortawesome/free-solid-svg-icons'
@@ -109,7 +109,7 @@ class HeaderBar extends React.Component<
           href={propLink.categoryURL}
           css={css`
             text-decoration: none;
-            color: #000;
+            color: #f50505;
           `}
         >
           {propLink.category}
@@ -128,7 +128,7 @@ class HeaderBar extends React.Component<
           box-shadow: ${MainSiteStyles.cardShadow};
           font-family: ${MainSiteStyles.headlineFont};
           font-weight: ${MainSiteStyles.boldFont};
-          color: '#000';
+          color: #f50505;
         `}
       >
         <div
diff --git a/components/MainSiteHeader/index.tsx b/components/MainSiteHeader/index.tsx
index 48c891f..b7ea0ca 100644
--- a/components/MainSiteHeader/index.tsx
+++ b/components/MainSiteHeader/index.tsx
@@ -33,7 +33,7 @@ class MainSiteHeader extends React.Component<MainSiteHeaderProps> {
               display: block;
             }
             display: none;
-            background-color: #fff;
+            background-color: ${globals.darkMode ? "#000" : "#fff"};
           `}
         >
           <HeaderBar {...this.props} hamburger={true} />
@@ -44,7 +44,7 @@ class MainSiteHeader extends React.Component<MainSiteHeaderProps> {
               display: none;
             }
             display: block;
-            background-color: #fff;
+            background-color: ${globals.darkMode ? "#000" : "#fff"};
           `}
         >
           <HeaderBar {...this.props} hamburger={this.props.hamburger} />
diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx
index 415f91a..aee8019 100644
--- a/components/Masthead/Desktop.jsx
+++ b/components/Masthead/Desktop.jsx
@@ -10,17 +10,21 @@ import logo from "./dailybruin.svg";
 import menuIcon from "./menu.svg";
 import searchIcon from "./search.svg";
 import minisearchIcon from "./minisearch.svg";
+import { BsMoonStarsFill, BsFillSunFill } from "react-icons/bs";
 
 let expandedHeight = "106px";
 let collapsedHeight = "60px";
 
+
+
 export default class Desktop extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       menuExpanded: true,
-      searchExpanded: false
+      searchExpanded: false,
     };
+    
     this.MastheadCard = React.createRef();
     this.SearchBar = React.createRef();
     this.Logo = React.createRef();
@@ -95,7 +99,7 @@ export default class Desktop extends React.Component {
               font-weight: bold;
               text-decoration: none;
               text-transform: uppercase;
-              color: #000;
+              color: ${this.props.darkmode ? "#ddd" : "#000"};
               white-space: nowrap;
               &:hover {
                 text-decoration: underline;
@@ -115,7 +119,8 @@ export default class Desktop extends React.Component {
       <div
         ref={this.MastheadCard}
         css={css`
-          background: #ffffff;
+          background: ${this.props.darkmode ? "#222" : "#fff"};
+          color: ${this.props.darkmode ? "#ddd" : "#000"};
           box-shadow: ${globals.cardShadow};
           overflow: hidden;
           height: ${expandedHeight};
@@ -144,6 +149,48 @@ export default class Desktop extends React.Component {
               @media (max-width: 900px) {
                 display: none;
               }
+
+              #darkmode{
+                display: inline-block;
+                margin-left: 20px;
+              }
+              #darkmode .checkbox {
+                opacity: 0;
+                position: relative;
+              }
+              #darkmode .label {
+                width: 48px;
+                height: 14px;
+                background-color: ${globals.DBblue};
+                display: inline;
+                border-radius:50px;
+                padding: 8px 6px 5px 6px;
+                position: relative;
+                cursor: pointer;
+              }
+              #darkmode .moon {
+                margin-left: 0px;
+              }
+              #darkmode .sun {
+                margin-left: 10px;
+              }
+              #darkmode .ball {
+                width: 24px;
+                height: 24px;
+                background-color: white;
+                position: absolute;
+                top: 3.5px;
+                left: 3px;
+                border-radius: 50%;
+                transition: transform 0.2s linear;
+              }
+              #darkmode .checkbox:checked + .label .ball{
+                transform: translateX(24px);
+                background-color: #111;
+              }
+              #darkmode .checkbox:checked + .label{
+                background-color: #ddd;
+              }
             `}
           >
             <h2
@@ -159,7 +206,20 @@ export default class Desktop extends React.Component {
             >
               {today}
             </h2>
+
+            <div id="darkmode">
+              <input type="checkbox" className="checkbox" id="checkbox"
+               checked={this.props.darkmode}
+               onChange={(e)=>this.props.onToggle(e)}
+              />
+              <label htmlFor="checkbox" className="label">
+                <BsMoonStarsFill color="black" className="moon"/>
+                <BsFillSunFill color="white" className="sun"/>
+                <div className="ball"></div>
+              </label>
+            </div>
           </div>
+
           <div
             css={css`
               display: table-cell;
@@ -241,7 +301,7 @@ export default class Desktop extends React.Component {
                     text-transform: uppercase;
                     line-height: 34px;
                     font-size: 14px;
-                    color: #000;
+                    color: ${this.props.darkmode ? "#ddd" : "#000"};
                     display: inline-block;
                     vertical-align: middle;
                     height: 36px;
@@ -274,49 +334,63 @@ export default class Desktop extends React.Component {
                     & a:hover img {
                       fill: ${globals.DBblue};
                     }
+                    
                   `}
                 >
+                  
                   <a
                     href="https://www.facebook.com/dailybruin"
                     target="_blank"
                     rel="noopener"
                   >
-                    <img src={require("./facebook.svg")} />
+                    <img src={require("./facebook.svg")} css={css`
+                      ${this. props.darkmode ? "filter: invert(100%);" : ""};
+                `   } />
                   </a>
                   <a
                     href="https://www.twitter.com/dailybruin"
                     target="_blank"
                     rel="noopener"
                   >
-                    <img src={require("./twitter.svg")} />
+                    <img src={require("./twitter.svg")} css={css`
+                      ${this.props.darkmode ? "filter: invert(100%);" : ""};
+                `   } />
                   </a>
                   <a
                     href="https://www.instagram.com/dailybruin"
                     target="_blank"
                     rel="noopener"
                   >
-                    <img src={require("./instagram.svg")} />
+                    <img src={require("./instagram.svg")} css={css`
+                      ${this. props.darkmode ? "filter: invert(100%);" : ""};
+                `   } />
                   </a>
                   <a
                     href="http://eepurl.com/cFEiZX"
                     target="_blank"
                     rel="noopener"
                   >
-                    <img src={require("./mail.svg")} />
+                    <img src={require("./mail.svg")} css={css`
+                      ${this. props.darkmode ? "filter: invert(100%);" : ""};
+                `   } />
                   </a>
                   <a
                     href="https://www.overlooked.com"
                     target="_blank"
                     rel="noopener"
                   >
-                    <img src={require("./overlooked.png")} />
+                    <img src={require("./overlooked.png")} css={css`
+                      ${this. props.darkmode ? "filter: invert(100%);" : ""};
+                `   } />
                   </a>
                   <a
                     href="https://www.youtube.com/user/ucladailybruin"
                     target="_blank"
                     rel="noopener"
                   >
-                    <img src={require("./youtube.png")} />
+                    <img src={require("./youtube.png")} css={css`
+                      ${this. props.darkmode ? "filter: invert(100%);" : ""};
+                `   } />
                   </a>
                 </div>
                 <a href="/advertise">Advertise</a>
@@ -435,6 +509,8 @@ export default class Desktop extends React.Component {
                         transition-delay: 100ms;
                         width: 36px;
                         height: 36px;
+                        ${this. props.darkmode ? "filter: invert(1);" : ""};
+                        
                       `}
                       src={searchIcon}
                     ></img>
@@ -459,7 +535,8 @@ export default class Desktop extends React.Component {
         </div>
         <div
           css={css`
-            background-color: #fff;
+            background: ${this.props.darkmode ? "#222" : "#fff"};
+            color: ${this.props.darkmode ? "#ddd" : "#000"};
             overflow-x: scroll;
             &::-webkit-scrollbar {
               display: none;
diff --git a/components/Masthead/Mobile.jsx b/components/Masthead/Mobile.jsx
index baf3dc7..baa66d1 100644
--- a/components/Masthead/Mobile.jsx
+++ b/components/Masthead/Mobile.jsx
@@ -11,6 +11,7 @@ import logo from "./dailybruin.svg";
 import menuIcon from "./menu.svg";
 import searchIcon from "./search.svg";
 import minisearchIcon from "./minisearch.svg";
+import { BsMoonStarsFill, BsFillSunFill } from "react-icons/bs";
 
 export default class Mobile extends React.Component {
   constructor(props) {
@@ -56,7 +57,7 @@ export default class Mobile extends React.Component {
               font-weight: bold;
               text-decoration: none;
               text-transform: uppercase;
-              color: #000;
+              color: ${this.props.darkmode ? "#ddd" : "#000"};
               &:hover {
                 text-decoration: underline;
               }
@@ -70,7 +71,8 @@ export default class Mobile extends React.Component {
     return (
       <div
         css={css`
-          background: #ffffff;
+          background: ${this.props.darkmode ? "#222" : "#fff"};
+          color: ${this.props.darkmode ? "#ddd" : "#000"};
           box-shadow: ${globals.cardShadow};
           transition: height 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
           position: sticky;
@@ -111,7 +113,8 @@ export default class Mobile extends React.Component {
               src={menuIcon}
               css={css`
                 height: 100%;
-                background-color: white;
+                background-color: transparent;
+                ${this.props.darkmode ? "filter: invert(1);" : ""};
               `}
             ></img>
           </button>
@@ -280,6 +283,7 @@ export default class Mobile extends React.Component {
                       transition: all 200ms;
                       transition-delay: 100ms;
                       height: 100%;
+                      ${this. props.darkmode ? "filter: invert(1);" : ""};
                     `}
                     src={searchIcon}
                   ></img>
@@ -293,7 +297,7 @@ export default class Mobile extends React.Component {
           css={css`
             position: absolute;
             margin: 0px;
-            background-color: #fff;
+            background-color: ${this.props.darkmode ? "#222" : "#fff"};
             padding: 0 6px;
             height: 0;
             overflow-y: scroll;
@@ -316,9 +320,12 @@ export default class Mobile extends React.Component {
             css={css`
               vertical-align: top;
               display: inline-block;
+              flex: 1;
               width: 40%;
               padding: 6px;
               text-align: center;
+              align-items: center;
+              justify-content: center;
               font-family: ${globals.menuFont};
               font-size: 14px;
               font-weight: bold;
@@ -328,6 +335,52 @@ export default class Mobile extends React.Component {
               a:hover {
                 text-decoration: underline;
               }
+              #darkmode{
+                display: 'flexbox';
+                align-items: 'center';
+                margin-top: 20px;
+                margin-right: 2.3vw;
+
+
+              }
+              #darkmode .checkbox {
+                opacity: 0;
+                position: relative;
+                width: 0;
+              }
+              #darkmode .label {
+                width: 48px;
+                height: 14px;
+                background-color: ${globals.DBblue};
+                display: inline;
+                border-radius:50px;
+                padding: 8px 10px 5px 6px;
+                position: relative;
+                cursor: pointer;
+              }
+              #darkmode .moon {
+                margin-left: 0px;
+              }
+              #darkmode .sun {
+                margin-left: 10px;
+              }
+              #darkmode .ball {
+                width: 24px;
+                height: 24px;
+                background-color: white;
+                position: absolute;
+                top: 3.5px;
+                left: 3px;
+                border-radius: 50%;
+                transition: transform 0.2s linear;
+              }
+              #darkmode .checkbox:checked + .label .ball{
+                transform: translateX(24px);
+                background-color: #111;
+              }
+              #darkmode .checkbox:checked + .label{
+                background-color: #ddd;
+              }
             `}
           >
             <a
@@ -405,6 +458,18 @@ export default class Mobile extends React.Component {
             >
               Submit
             </a>
+            {/* Darkmode toggle button */}
+            <div id="darkmode">
+              <input type="checkbox" className="checkbox" id="checkbox"
+               checked={this.props.darkmode}
+               onChange={(e)=>this.props.onToggle(e)}
+              />
+              <label htmlFor="checkbox" className="label">
+                <BsMoonStarsFill color="black" className="moon"/>
+                <BsFillSunFill color="white" className="sun"/>
+                <div className="ball"></div>
+              </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/MultimediaScroller/index.jsx b/components/MultimediaScroller/index.jsx
index 1424dec..38ccfb5 100644
--- a/components/MultimediaScroller/index.jsx
+++ b/components/MultimediaScroller/index.jsx
@@ -29,7 +29,7 @@ export default class MultimediaScroller extends React.Component {
           border-top: 10px solid black;
           background: #474747;
           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
-          color: #ffffff;
+          color: #fff;
           box-sizing: border-box;
         `}
       >
diff --git a/components/Page/index.jsx b/components/Page/index.jsx
index c4b1f74..2d125db 100644
--- a/components/Page/index.jsx
+++ b/components/Page/index.jsx
@@ -8,16 +8,20 @@ import { date2string } from "./utilities.js";
 export default class Page extends React.Component {
   constructor(props) {
     super(props);
+
+    this.Page = React.createRef();
   }
 
   render() {
     return (
       <div
+        ref={this.Page}
         css={css`
           display: block;
           padding: 10px 30px;
           box-shadow: ${globals.cardShadow};
-          background-color: #ffffff;
+          background-color: ${this.props.darkmode ? '#222' : '#fff'};
+          color: ${this.props.darkmode ? '#fff' : '#000'};
           font-family: ${globals.bodyFont};
         `}
       >
@@ -27,10 +31,9 @@ export default class Page extends React.Component {
             font-style: normal;
             font-weight: normal;
             font-size: 14px;
-
-            color: #000000;
             margin: auto;
             display: block;
+            
 
             a img,
             img {
diff --git a/components/PhotoCard/index.jsx b/components/PhotoCard/index.jsx
index 9b3c77a..b7823b2 100644
--- a/components/PhotoCard/index.jsx
+++ b/components/PhotoCard/index.jsx
@@ -35,7 +35,7 @@ export default function PhotoCard(props) {
               css={css`
                 display: block;
                 width: 100%;
-                border: 15px solid #ffffff;
+                border: 15px solid ${props.darkmode ? "#444" : "#fff"};
               `}
             ></img>
             <div
@@ -54,7 +54,7 @@ export default function PhotoCard(props) {
                 opacity: 0;
                 height: 100%;
                 width: 100%;
-                border: 15px solid #ffffff;
+                border: 15px solid ${props.darkmode ? "#444" : "#fff"};
                 transition: 0.5s ease;
               `}
             >
@@ -70,9 +70,10 @@ export default function PhotoCard(props) {
                 <h3
                   dangerouslySetInnerHTML={{ __html: props.headline }}
                   css={css`
-                    color: #ffffff;
-                    font-size: 3.2vh;
-                    font-weight: bold;
+
+                    color: #fff;
+                    font-size: 1.5vw;
+
                     line-height: 1.4;
                     margin-bottom: 0.625rem;
                     font-family: ${globals.headlineFont};
@@ -85,9 +86,11 @@ export default function PhotoCard(props) {
                   id="caption"
                   dangerouslySetInnerHTML={{ __html: props.excerpt }}
                   css={css`
-                    color: white;
-                    font-size: 2.1vh;
-                    line-height: 20px;
+
+                    color: rgb(187, 187, 187);
+                    font-size: 0.9vw;
+                    line-height: 15px;
+
                     font-family: ${globals.bodyFont};
                     @media (max-width: 768px) {
                       font-size: 1.4vw;
@@ -97,7 +100,10 @@ export default function PhotoCard(props) {
                 <div
                   id="credit-block"
                   css={css`
-                    font-size: 2.2vh;
+
+                    color: rgb(187, 187, 187);
+                    font-size: 0.9vw;
+
                     font-family: ${globals.bodyFont};
                     font-weight: bold;
                     color: black;
@@ -140,7 +146,7 @@ export default function PhotoCard(props) {
             css={css`
               box-sizing: border-box;
               position: relative;
-              background: #fff;
+              background-color: ${props.darkmode ? "#222" : "#fff"};
               width: 100%;
               box-shadow: ${globals.cardShadow};
             `}
@@ -157,7 +163,7 @@ export default function PhotoCard(props) {
             <div
               id="text"
               css={css`
-                color: #000;
+                color: ${props.darkmode ? "#ddd" : "#000"};
                 padding: 18px;
               `}
             >
diff --git a/components/PhotoGallery/ContainerItem.jsx b/components/PhotoGallery/ContainerItem.jsx
index a2d7d0f..885bc2f 100644
--- a/components/PhotoGallery/ContainerItem.jsx
+++ b/components/PhotoGallery/ContainerItem.jsx
@@ -21,10 +21,13 @@ function ContainerItem(props) {
     // }
 
     // This code below should work with the most up-to-date API (not yet avail on the web) and allow for article-text and center-photo
+    // className={`${css['row']} ${props.darkmode ? css[dark] : ""}`}
+    let classNameRow = `${css['row']} ${props.darkmode ? css['dark'] : ""}`;
+    let classNameNoRow = `${props.darkmode ? css['dark'] : ""}`;
 
     if (props.type == 'center-photo') {
         return (
-            <div className={css['row']}>
+            <div className={classNameRow}>
                 <div className={css['center-img-col']}>
                     <img className={css['center-photo']} src={props.img_url} alt='gallery-image'></img>
                     {/* <div className={css['caption']}> {props.description}</div> 
@@ -36,7 +39,7 @@ function ContainerItem(props) {
     } else if (props.type == 'article-text') {
         if (props.layout_type == 'alternating') { // only alternating layout needs to use rows
             return (
-                <div className={css['row']}>
+                <div className={classNameRow}>
                     <p className={css['article-text']}>
                         <ReactMarkdown children={props.description} />
                     </p>
@@ -44,7 +47,7 @@ function ContainerItem(props) {
             );
         } else {
 
-            return <div>
+            return <div className={classNameNoRow}>
                 <p className={css['article-text-large']}>
                     <ReactMarkdown children={props.description} />
                 </p>
@@ -58,7 +61,7 @@ function ContainerItem(props) {
                 textAlign: 'right'
             };
             return (
-                <div className={css['row']}>
+                <div className={classNameRow}>
                     <div className={css['caption']}> <ReactMarkdown children={props.description} /> </div>
                     <div className={css['img-col']}>
                         <img className={css['image']} src={props.img_url} alt='gallery-image'></img>
@@ -68,7 +71,7 @@ function ContainerItem(props) {
             );
         } else {
             return (
-                <div className={css['row']}>
+                <div className={classNameRow}>
                     <div className={css['img-col']}>
                         <img className={css['image']} src={props.img_url} alt='gallery-image'></img>
                         <p className={css['credits']}> {props.credits} </p>
@@ -80,14 +83,14 @@ function ContainerItem(props) {
 
     } else if (props.type == 'big-center-photo') {
         return (
-            <div>
+            <div className={classNameNoRow}>
                 <img className={css['big-center-photo']} src={props.img_url} alt='big-center-photo'></img>
                 <p className={css['credits']}> {props.credits} </p>
             </div>
         )
     } else if (props.type == 'corrections-text') {
         return (
-            <div>
+            <div className={classNameNoRow}>
                 <p className={css['credits']}>
                     <ReactMarkdown children={props.description} />
                 </p>
diff --git a/components/PhotoGallery/Header.jsx b/components/PhotoGallery/Header.jsx
index 46b09bb..fa13bc3 100644
--- a/components/PhotoGallery/Header.jsx
+++ b/components/PhotoGallery/Header.jsx
@@ -34,7 +34,8 @@ export default function Header(props) {
     <div
       css={css`
         width: 100%;
-        background-color: #fff;
+        background-color: ${props.darkmode? "#222" : "#fff"};
+        color:  ${props.darkmode? "#fff" : "#000"};
         padding: ${globals.cardPadding};
         display: table;
 
@@ -68,6 +69,7 @@ export default function Header(props) {
               display: inline-block;
               height: 100%;
               max-height: 64px;
+              ${ props.darkmode ? "filter: invert(100%);" : ""};
             `}
           ></img>
         </a>
@@ -105,12 +107,12 @@ export default function Header(props) {
               line-height: 21px;
               padding: 5px 0 0;
 
-              color: #000000;
+              color: ${props.darkmode? "#fff" : "#000"};
 
               a {
                 text-decoration: none;
                 color: #0080c6;
-                background-color: #ffffff;
+                background-color: ${props.darkmode? "#222" : "#fff"};
               }
               a:hover {
                 text-decoration: underline;
diff --git a/components/PhotoGallery/PGallery.jsx b/components/PhotoGallery/PGallery.jsx
index a58c468..30241f9 100644
--- a/components/PhotoGallery/PGallery.jsx
+++ b/components/PhotoGallery/PGallery.jsx
@@ -238,6 +238,7 @@ function PGallery(props) {
           `}
             >
                 <AuthorCard
+                darkmode={props.darkmode}
                     image={
                         author.simple_local_avatar != null
                             ? author.simple_local_avatar.full
@@ -261,6 +262,7 @@ function PGallery(props) {
     return (
         <React.Fragment>
             <Header
+                darkmode={props.darkmode}
                 headline={props.headline}
                 photographers={props.authors}
                 date={props.date}
@@ -268,12 +270,11 @@ function PGallery(props) {
 
             
 
-
-            <div className={css_selector[photosContainerType]}>
-                
+            <div className={`${css_selector[photosContainerType]} ${props.darkmode ? css_selector['dark'] : ""}`}>
                 {
                     entries.map((entry, index) => (
                         <ContainerItem
+                            darkmode={props.darkmode}
                             layout_type={layout}
                             type={entry.type}
                             description={entry.description}
@@ -289,6 +290,7 @@ function PGallery(props) {
 
             <div>
                 <ShareButtons
+                    darkmode={props.darkmode}
                     title={props.headline}
                     url={props.link}
                 ></ShareButtons>
diff --git a/components/PhotoGallery/Photo.jsx b/components/PhotoGallery/Photo.jsx
index 92e8f58..e321b8f 100644
--- a/components/PhotoGallery/Photo.jsx
+++ b/components/PhotoGallery/Photo.jsx
@@ -69,7 +69,8 @@ export default class Photo extends React.Component {
               max-width: 400px;
               padding: 20px;
               margin: 6px;
-              background-color: #fff;
+              background-color: ${this.props.darkmode? "#222" : "#fff"};
+              color:  ${this.props.darkmode? "#fff" : "#000"};
               @media (max-width: 800px) {
                 max-width: initial;
                 min-width: initial;
diff --git a/components/PhotoGallery/index.jsx b/components/PhotoGallery/index.jsx
index cab23ff..1e5cbb3 100644
--- a/components/PhotoGallery/index.jsx
+++ b/components/PhotoGallery/index.jsx
@@ -18,6 +18,7 @@ export default class PhotoGallery extends React.Component {
     for (let i in this.props.photos) {
       renderedGallery.push(
         <Photo
+          darkmode={this.props.darkmode}
           image={this.props.photos[i].image}
           caption={this.props.photos[i].caption}
           credit={this.props.photos[i].credit}
@@ -36,6 +37,7 @@ export default class PhotoGallery extends React.Component {
           `}
         >
           <AuthorCard
+            darkmode={this.props.darkmode}
             image={
               author.simple_local_avatar != null
                 ? author.simple_local_avatar.full
@@ -57,10 +59,12 @@ export default class PhotoGallery extends React.Component {
         css={css`
           width: 100%;
           box-shadow: ${globals.cardShadow};
-          background-color: #fff;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
+          color:  ${this.props.darkmode? "#fff" : "#000"};
         `}
       >
         <Header
+          darkmode={this.props.darkmode}
           headline={this.props.headline}
           photographers={this.props.photographers}
           date={this.props.date}
@@ -75,9 +79,9 @@ export default class PhotoGallery extends React.Component {
           `}
         >
           {renderedGallery}
-          <ShareButtons url={this.props.link} title={this.props.headline} />
+          <ShareButtons darkmode={this.props.darkmode} url={this.props.link} title={this.props.headline} />
           {renderedAuthorCards}
-        </div>
+        </div> 
       </div>
     );
   }
diff --git a/components/PhotoGrid/Photo.jsx b/components/PhotoGrid/Photo.jsx
index 79c27b1..4a28e5c 100644
--- a/components/PhotoGrid/Photo.jsx
+++ b/components/PhotoGrid/Photo.jsx
@@ -41,7 +41,7 @@ export default class Photo extends React.Component {
                   css={css`
                     display: block;
                     width: 100%;
-                    border: 15px solid #ffffff;
+                    border: 15px solid #fff;
                   `}
                 ></img>
                 <div
diff --git a/components/ReviewInfobox/index.jsx b/components/ReviewInfobox/index.jsx
index 3eb9b0b..3e7f19d 100644
--- a/components/ReviewInfobox/index.jsx
+++ b/components/ReviewInfobox/index.jsx
@@ -32,7 +32,7 @@ export default class ReviewInfobox extends React.Component {
         css={css`
           padding: 10px;
           width: 100%;
-          background: #ffffff;
+          background: #fff;
           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
           display: inline-block;
           min-width: 250px;
@@ -44,7 +44,7 @@ export default class ReviewInfobox extends React.Component {
             right: 0;
 
             margin: 0;
-            color: #000000;
+            color: #000;
             font-family: ${globals.menuFont} !important;
 
             & p,
@@ -59,8 +59,8 @@ export default class ReviewInfobox extends React.Component {
               margin: -10px -10px 0;
               line-height: 36px;
               min-height: 36px;
-              background-color: #000000;
-              color: #ffffff;
+              background-color: #000;
+              color: #fff;
 
               font-style: normal;
               font-weight: bold;
diff --git a/components/SearchResults/index.jsx b/components/SearchResults/index.jsx
index d538b88..5ef1b95 100644
--- a/components/SearchResults/index.jsx
+++ b/components/SearchResults/index.jsx
@@ -8,12 +8,13 @@ export default class SearchResults extends React.Component {
     return (
       <div
         css={css`
-          background-color: #fff;
+          background-color: ${this.props.darkmode? "#222" : "#fff"};
           box-shadow: ${globals.cardShadow};
           padding: ${globals.cardPadding};
           font-family: ${globals.menuFont};
           font-weight: bold;
           font-size: 36px;
+          color:  ${this.props.darkmode? "#fff" : "#000"};
 
           ${globals.phone} {
             font-size: 24px;
@@ -27,8 +28,10 @@ export default class SearchResults extends React.Component {
         >
           search: {this.props.query}
         </div>
-
-        <div className="gcse-searchresults-only"></div>
+        {/* <div css={css`         
+          ${this.props.darkmode ? "filter: brightness(0.6);" : ""} `}>  */}
+          <div className="gcse-searchresults-only"></div>
+        {/* </div> */}
       </div>
     );
   }
diff --git a/components/SectionHeader/index.jsx b/components/SectionHeader/index.jsx
index 6a12bda..6616dba 100644
--- a/components/SectionHeader/index.jsx
+++ b/components/SectionHeader/index.jsx
@@ -23,6 +23,7 @@ export default class SectionHeader extends React.Component {
               max-height: 64px;
               margin: 0px;
               padding: 0px;
+              ${this. props.darkmode ? "filter: invert(100%);" : ""};
             `}
           ></img>
         );
@@ -47,7 +48,7 @@ export default class SectionHeader extends React.Component {
               font-weight: bold;
               font-size: 12px;
               padding: 1px 5px;
-              color: black;
+              color: ${this.props.darkmode ? "#ddd" : "#000"};
               text-decoration: none;
               &:hover {
                 text-decoration: underline;
@@ -62,7 +63,7 @@ export default class SectionHeader extends React.Component {
       <div
         css={css`
           box-shadow: ${globals.cardShadow};
-          background-color: white;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
           display: block;
           padding: 0 10px 10px;
         `}
@@ -71,7 +72,7 @@ export default class SectionHeader extends React.Component {
           css={css`
             text-align: center;
             list-style: none;
-            color: black;
+            color: ${this.props.darkmode ? "#ddd" : "#000"};
             font-family: ${globals.menuFont};
             font-weight: bold;
             font-size: 40px;
@@ -84,7 +85,7 @@ export default class SectionHeader extends React.Component {
         <div
           css={css`
             width: 100%;
-            background-color: black;
+            background-color: ${this.props.darkmode ? "#ddd" : "#000"};
             height: 1px;
             margin-bottom: 5px;
           `}
diff --git a/components/ShareButtons/facebook.svg b/components/ShareButtons/facebook.svg
index 2123d94..2d17754 100644
--- a/components/ShareButtons/facebook.svg
+++ b/components/ShareButtons/facebook.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 167.657 167.657" style="enable-background:new 0 0 167.657 167.657;" xml:space="preserve">
 <g>
-	<path style="fill:#ffffff;" d="M83.829,0.349C37.532,0.349,0,37.881,0,84.178c0,41.523,30.222,75.911,69.848,82.57v-65.081H49.626
+	<path style="fill:#fff;" d="M83.829,0.349C37.532,0.349,0,37.881,0,84.178c0,41.523,30.222,75.911,69.848,82.57v-65.081H49.626
 		v-23.42h20.222V60.978c0-20.037,12.238-30.956,30.115-30.956c8.562,0,15.92,0.638,18.056,0.919v20.944l-12.399,0.006
 		c-9.72,0-11.594,4.618-11.594,11.397v14.947h23.193l-3.025,23.42H94.026v65.653c41.476-5.048,73.631-40.312,73.631-83.154
 		C167.657,37.881,130.125,0.349,83.829,0.349z"/>
diff --git a/components/ShareButtons/index.jsx b/components/ShareButtons/index.jsx
index 290d6ab..4c038f0 100644
--- a/components/ShareButtons/index.jsx
+++ b/components/ShareButtons/index.jsx
@@ -53,6 +53,7 @@ export default function ShareButtons(props) {
           @media (max-width: 450px) {
             display: block;
           }
+          color: ${props.darkmode ? '#fff' : '#000'};
         `}
       >
         Share this story:
diff --git a/components/ShareButtons/reddit.svg b/components/ShareButtons/reddit.svg
index b4f4c6d..d259e98 100644
--- a/components/ShareButtons/reddit.svg
+++ b/components/ShareButtons/reddit.svg
@@ -1 +1 @@
-<svg id="Bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path style="fill:#ffffff;" d="m21.325 9.308c-.758 0-1.425.319-1.916.816-1.805-1.268-4.239-2.084-6.936-2.171l1.401-6.406 4.461 1.016c0 1.108.89 2.013 1.982 2.013 1.113 0 2.008-.929 2.008-2.038s-.889-2.038-2.007-2.038c-.779 0-1.451.477-1.786 1.129l-4.927-1.108c-.248-.067-.491.113-.557.365l-1.538 7.062c-2.676.113-5.084.928-6.895 2.197-.491-.518-1.184-.837-1.942-.837-2.812 0-3.733 3.829-1.158 5.138-.091.405-.132.837-.132 1.268 0 4.301 4.775 7.786 10.638 7.786 5.888 0 10.663-3.485 10.663-7.786 0-.431-.045-.883-.156-1.289 2.523-1.314 1.594-5.115-1.203-5.117zm-15.724 5.41c0-1.129.89-2.038 2.008-2.038 1.092 0 1.983.903 1.983 2.038 0 1.109-.89 2.013-1.983 2.013-1.113.005-2.008-.904-2.008-2.013zm10.839 4.798c-1.841 1.868-7.036 1.868-8.878 0-.203-.18-.203-.498 0-.703.177-.18.491-.18.668 0 1.406 1.463 6.07 1.488 7.537 0 .177-.18.491-.18.668 0 .207.206.207.524.005.703zm-.041-2.781c-1.092 0-1.982-.903-1.982-2.011 0-1.129.89-2.038 1.982-2.038 1.113 0 2.008.903 2.008 2.038-.005 1.103-.895 2.011-2.008 2.011z"/></svg>
\ No newline at end of file
+<svg id="Bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path style="fill:#fff;" d="m21.325 9.308c-.758 0-1.425.319-1.916.816-1.805-1.268-4.239-2.084-6.936-2.171l1.401-6.406 4.461 1.016c0 1.108.89 2.013 1.982 2.013 1.113 0 2.008-.929 2.008-2.038s-.889-2.038-2.007-2.038c-.779 0-1.451.477-1.786 1.129l-4.927-1.108c-.248-.067-.491.113-.557.365l-1.538 7.062c-2.676.113-5.084.928-6.895 2.197-.491-.518-1.184-.837-1.942-.837-2.812 0-3.733 3.829-1.158 5.138-.091.405-.132.837-.132 1.268 0 4.301 4.775 7.786 10.638 7.786 5.888 0 10.663-3.485 10.663-7.786 0-.431-.045-.883-.156-1.289 2.523-1.314 1.594-5.115-1.203-5.117zm-15.724 5.41c0-1.129.89-2.038 2.008-2.038 1.092 0 1.983.903 1.983 2.038 0 1.109-.89 2.013-1.983 2.013-1.113.005-2.008-.904-2.008-2.013zm10.839 4.798c-1.841 1.868-7.036 1.868-8.878 0-.203-.18-.203-.498 0-.703.177-.18.491-.18.668 0 1.406 1.463 6.07 1.488 7.537 0 .177-.18.491-.18.668 0 .207.206.207.524.005.703zm-.041-2.781c-1.092 0-1.982-.903-1.982-2.011 0-1.129.89-2.038 1.982-2.038 1.113 0 2.008.903 2.008 2.038-.005 1.103-.895 2.011-2.008 2.011z"/></svg>
\ No newline at end of file
diff --git a/components/ShareButtons/twitter.svg b/components/ShareButtons/twitter.svg
index 57e01fe..8601cea 100644
--- a/components/ShareButtons/twitter.svg
+++ b/components/ShareButtons/twitter.svg
@@ -1 +1 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;fill:#ffffff;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;fill:#fff;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/components/SponsoredArticle/index.jsx b/components/SponsoredArticle/index.jsx
index 33223c3..268bdfa 100644
--- a/components/SponsoredArticle/index.jsx
+++ b/components/SponsoredArticle/index.jsx
@@ -10,7 +10,7 @@ import AuthorCard from "../AuthorCard";
 import Tag from "./Tag";
 import Landing from "./Landing";
 import Logo from "./dailybruin.svg";
-
+// TODO
 export default class FeatureArticle extends React.Component {
   constructor(props) {
     super(props);
@@ -26,6 +26,7 @@ export default class FeatureArticle extends React.Component {
           `}
         >
           <AuthorCard
+            darkmode={this.props.darkmode}
             image={author.avatar_urls[512]}
             name={author.name}
             description={author.description}
@@ -61,7 +62,7 @@ export default class FeatureArticle extends React.Component {
       <div
         css={css`
           display: block;
-          background-color: #ffffff;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
           box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         `}
       >
@@ -169,12 +170,12 @@ export default class FeatureArticle extends React.Component {
                     line-height: 21px;
                     padding: 5px 0 0;
 
-                    color: #000000;
+                    color: #000;
 
                     a {
                       text-decoration: none;
                       color: #0080c6;
-                      background-color: #ffffff;
+                      background-color: ${this.props.darkmode ? "#222" : "#fff"};
                     }
                     a:hover {
                       text-decoration: underline;
@@ -206,7 +207,7 @@ export default class FeatureArticle extends React.Component {
                 text-align: left;
                 line-height: 1.75;
 
-                color: #000000;
+                color: #000;
                 display: block;
                 max-width: 640px;
                 margin: auto;
@@ -268,6 +269,7 @@ export default class FeatureArticle extends React.Component {
                 }
 
                 iframe {
+                  ${this.props.darkmode ? "filter: brightness(0.6);" : ""}
                   width: 100%;
                 }
 
diff --git a/components/SponsoredLinks/index.jsx b/components/SponsoredLinks/index.jsx
index 2723e9d..2d0108c 100644
--- a/components/SponsoredLinks/index.jsx
+++ b/components/SponsoredLinks/index.jsx
@@ -12,7 +12,8 @@ export default class SponsoredLinks extends React.Component {
     return (
       <div
         css={css`
-          background: #fff;
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
+          color: ${this.props.darkmode ? "#ddd" : "#000"};
           box-shadow: ${globals.cardShadow};
           padding: 10px;
           width: 202%;
diff --git a/components/SportsScoreboard/index.jsx b/components/SportsScoreboard/index.jsx
index a855933..2ab0057 100644
--- a/components/SportsScoreboard/index.jsx
+++ b/components/SportsScoreboard/index.jsx
@@ -12,7 +12,7 @@ export default class SportsScoreboard extends React.Component {
       <div
         css={css`
           padding: 0;
-          background: #ffffff;
+          background: #fff;
           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
           display: inline-block;
         `}
@@ -26,9 +26,9 @@ export default class SportsScoreboard extends React.Component {
             padding: 4px 8px;
 
             min-height: 36px;
-            background-color: #000000;
+            background-color: #000;
 
-            color: #ffffff;
+            color: #fff;
 
             font-family: Source Sans Pro;
             font-style: normal;
@@ -49,7 +49,7 @@ export default class SportsScoreboard extends React.Component {
               border-collapse: collapse;
               border-style: hidden;
               border: none !important;
-              color: #000000;
+              color: #000;
             `}
           >
             <tr
@@ -61,7 +61,7 @@ export default class SportsScoreboard extends React.Component {
               <td
                 css={css`
                   padding: 0 8px;
-                  border-right: 4px solid #ffffff;
+                  border-right: 4px solid #fff;
                 `}
               >
                 {this.props.team1}
diff --git a/components/SportsTournamentScoreboard/Scoreboard.jsx b/components/SportsTournamentScoreboard/Scoreboard.jsx
index 2eb1c0c..b37954f 100644
--- a/components/SportsTournamentScoreboard/Scoreboard.jsx
+++ b/components/SportsTournamentScoreboard/Scoreboard.jsx
@@ -17,7 +17,7 @@ export default class Scoreboard extends React.Component {
           border-collapse: collapse;
           border-style: hidden;
           border: none !important;
-          color: #000000;
+          color: #000;
         `}
       >
         <tr
@@ -37,7 +37,7 @@ export default class Scoreboard extends React.Component {
               transform: rotate(-90deg);
               padding: 0;
               margin: 0;
-              border-top: 2px solid #ffffff;
+              border-top: 2px solid #fff;
             `}
             rowspan="2"
           >
@@ -46,7 +46,7 @@ export default class Scoreboard extends React.Component {
           <td
             className={css`
               padding: 0 8px;
-              border-right: 4px solid #ffffff;
+              border-right: 4px solid #fff;
               background-color: #efefef;
             `}
           >
diff --git a/components/SportsTournamentScoreboard/index.jsx b/components/SportsTournamentScoreboard/index.jsx
index d3aeaaa..d0b083d 100644
--- a/components/SportsTournamentScoreboard/index.jsx
+++ b/components/SportsTournamentScoreboard/index.jsx
@@ -20,7 +20,7 @@ export default class SportsTournamentScoreboard extends React.Component {
       <div
         css={css`
           padding: 0;
-          background: #ffffff;
+          background: #fff;
           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
           display: inline-block;
         `}
@@ -34,9 +34,9 @@ export default class SportsTournamentScoreboard extends React.Component {
             padding: 4px 8px;
 
             min-height: 36px;
-            background-color: #000000;
+            background-color: #000;
 
-            color: #ffffff;
+            color: #fff;
 
             font-family: Source Sans Pro;
             font-style: normal;
diff --git a/components/StoryList/Story.jsx b/components/StoryList/Story.jsx
index 67b2ef5..5f6e2c5 100644
--- a/components/StoryList/Story.jsx
+++ b/components/StoryList/Story.jsx
@@ -24,7 +24,7 @@ export default function Story(props) {
   return (
     <div
       css={css`
-        border-bottom: 0.5px solid #000;
+        border-bottom: 0.5px solid ${props.darkmode ? "#fff" : "#000"};;
       `}
     >
       <a href={props.link} style={{ textDecoration: "none" }}>
@@ -37,7 +37,7 @@ export default function Story(props) {
             margin: 3px 0px;
             overflow-wrap: break-word;
             text-align: left;
-            color: #000000;
+            color: ${props.darkmode ? "#ddd" : "#000"};
             font-style: ${props.column ? "italic" : "normal"};
 
             &:hover {
@@ -48,7 +48,7 @@ export default function Story(props) {
         ></h3>
         <div
           css={css`
-            color: ${globals.black};
+            color: ${props.darkmode ? "#ddd" : "#000"};
             font-family: ${globals.bodyFont};
             font-weight: 300;
             font-size: 0.78rem;
diff --git a/components/StoryList/index.jsx b/components/StoryList/index.jsx
index daab64e..dbf5f61 100644
--- a/components/StoryList/index.jsx
+++ b/components/StoryList/index.jsx
@@ -9,6 +9,7 @@ class StoryList extends React.Component {
   render() {
     const renderedStories = this.props.story.map((story, index) => (
       <Story
+        darkmode={this.props.darkmode}
         title={story.title}
         text={story.text}
         link={story.link}
@@ -20,7 +21,9 @@ class StoryList extends React.Component {
     return (
       <div
         css={css`
-          background-color: ${globals.white};
+          background-color: ${this.props.darkmode ? "#222" : "#fff"};
+          color: ${this.props.darkmode ? "#ddd" : "#000"};
+
           box-shadow: ${globals.cardShadow};
           justify-content: center;
           margin: auto;
diff --git a/components/TwitterFeed/index.jsx b/components/TwitterFeed/index.jsx
index 23094d3..4055dee 100644
--- a/components/TwitterFeed/index.jsx
+++ b/components/TwitterFeed/index.jsx
@@ -14,12 +14,13 @@ export default function TwitterFeed(props) {
           ${globals.cardStyles}
           padding: 10px 10px 0;
           min-height: 514px;
+          ${props.darkmode ? "filter: brightness(0.6);" : ""}
         `}
       >
         <a
           className="twitter-timeline"
           data-height="500"
-          href="https://twitter.com/dailybruin?ref_src=twsrc%5Etfw"
+          href="https://twitter.com/dailybruin?ref_src=twsrc%5Etfw"          
         >
           Tweets by dailybruin
         </a>
diff --git a/components/VideoCard/index.jsx b/components/VideoCard/index.jsx
index 791d89b..beee931 100644
--- a/components/VideoCard/index.jsx
+++ b/components/VideoCard/index.jsx
@@ -14,7 +14,7 @@ export default function VideoCard(props) {
         display: block;
         padding: 10px;
         box-shadow: ${globals.cardShadow};
-        background-color: #ffffff;
+        background-color: #fff;
       `}
     >
       <span>
@@ -63,19 +63,20 @@ export default function VideoCard(props) {
         <div
           css={css`
             margin: 2px 0 6px;
-            ${locals.headline}
+            ${props.darkmode ? locals.darkheadline : locals.headline};
           `}
           dangerouslySetInnerHTML={{ __html: props.headline }}
         />
         <div
           css={css`
             div div iframe {
+              ${props.darkmode ? "filter: brightness(0.6);" : ""}    
               width: 100%;
               //padding-top: 100%;
               //height: 0;
             }
             p {
-              ${locals.excerpt}
+              ${props.darkmode ? locals.darkexcerpt : locals.excerpt}
             }
           `}
           dangerouslySetInnerHTML={{ __html: props.content }}
@@ -90,7 +91,7 @@ export default function VideoCard(props) {
           font-weight: bold;
           font-size: 11px;
 
-          color: #000000;
+          color: #000;
         `}
       >
         By {utilities.renderAuthors(props.authors)}
diff --git a/components/WelcomePopUp/index.jsx b/components/WelcomePopUp/index.jsx
index b738bf6..0c7027e 100644
--- a/components/WelcomePopUp/index.jsx
+++ b/components/WelcomePopUp/index.jsx
@@ -43,7 +43,7 @@ export default class WelcomePopUp extends React.Component {
             top: 29%;
             left: 0;
             right: 0;
-            background-color: #ffffff;
+            background-color: ${this.props.darkmode ? "#222" : "#fff"};
             box-shadow: ${globals.cardShadow};
             z-index: 3001;
           `}
@@ -58,7 +58,7 @@ export default class WelcomePopUp extends React.Component {
               border: none;
               font-family: Source Sans Pro;
               font-weight: bold;
-              color: #000;
+              color: ${this.props.darkmode ? "#ddd" : "#474747"};
               font-size: 18px;
               z-index: 3002;
               cursor: pointer;
@@ -113,7 +113,7 @@ export default class WelcomePopUp extends React.Component {
                 font-size: 16px;
                 font-family: "PT Serif";
                 font-weight: bold;
-                color: #474747;
+                color: ${this.props.darkmode ? "#ddd" : "#474747"};
                 z-index: 3001;
                 text-align: left;
                 margin: 20px;
diff --git a/components/globals.js b/components/globals.js
index dc05a19..4127a2c 100644
--- a/components/globals.js
+++ b/components/globals.js
@@ -1,6 +1,8 @@
 import { css } from "@emotion/core";
+import * as React from "react";
 
 /** Reusable common CSS attributes */
+
 /** Colors */
 export const gray = "rgb(197, 197, 197)";
 export const lightGray = "rgb(242, 242, 242)";
diff --git a/layouts/Article/index.jsx b/layouts/Article/index.jsx
index c8342a0..60e4cc9 100644
--- a/layouts/Article/index.jsx
+++ b/layouts/Article/index.jsx
@@ -14,8 +14,10 @@ import CommentsCard from "components/CommentsCard";
 class ArticleLayout extends React.Component {
   constructor(props) {
     super(props);
+
     this.article = (
       <Article
+        darkmode={this.props.darkmode}
         headline={this.props.article.title.rendered}
         link={this.props.article.link}
         date={moment.utc(this.props.article.date)}
@@ -40,6 +42,13 @@ class ArticleLayout extends React.Component {
         acf={this.props.article.acf}
       />
     );
+
+    this.classifiedsCards = (
+      <ClassifiedsCard
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />
+    )
   }
 
   render() {
@@ -47,7 +56,7 @@ class ArticleLayout extends React.Component {
     for (let relatedPost of this.props.relatedPosts) {
       renderedRelatedPosts.push(
         <div key={relatedPost.id} className={css.card}>
-          {buildArticleCard(relatedPost, "mini")}
+          {buildArticleCard(relatedPost, "mini", this.props.darkmode)}
         </div>
       );
     }
@@ -60,7 +69,8 @@ class ArticleLayout extends React.Component {
             desktop: "(min-width: 901px)"
           }}
           defaultMatches={{ desktop: true }}
-        >
+          >
+          
           {matches => (
             <div>
               {matches.phone && (
@@ -72,12 +82,16 @@ class ArticleLayout extends React.Component {
                       width: "100%"
                     }}
                   >
-                    <div className={css.card}>{this.article}</div>
+                    <div className={css.card}>
+                      {React.cloneElement(this.article, {
+                        darkmode: this.props.darkmode
+                      })}
+                    </div>
                     <div>
                       <div className={css.card}>
                         <div
                           style={{
-                            backgroundColor: "#000000",
+                            backgroundColor: "#000",
                             height: "27px",
                             padding: "2px 10px 0",
                             boxShadow: globals.cardShadow,
@@ -87,7 +101,7 @@ class ArticleLayout extends React.Component {
                             fontSize: "18px",
                             lineHeight: "24px",
                             textTransform: "uppercase",
-                            color: "#ffffff"
+                            color: "#fff"
                           }}
                         >
                           Related Posts
@@ -105,10 +119,9 @@ class ArticleLayout extends React.Component {
                       <broadstreet-zone zone-id="69405"></broadstreet-zone>
                     </div>
                     <div className={css.card}>
-                      <ClassifiedsCard
-                        header="Featured Classifieds"
-                        classifieds={this.props.classifieds}
-                      />
+                      {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                   </div>
                 </div>
@@ -122,7 +135,9 @@ class ArticleLayout extends React.Component {
                       width: "100%"
                     }}
                   >
-                    <div className={css.card}>{this.article}</div>
+                    <div className={css.card}>{React.cloneElement(this.article, {
+                      darkmode: this.props.darkmode
+                    })}</div>
                     <div className={css.card}>
                       <CommentsCard
                         id={this.props.article.id}
@@ -140,7 +155,7 @@ class ArticleLayout extends React.Component {
                       <div className={css.card}>
                         <div
                           style={{
-                            backgroundColor: "#000000",
+                            backgroundColor: "#000",
                             height: "27px",
                             padding: "2px 10px 0",
                             boxShadow: globals.cardShadow,
@@ -150,7 +165,7 @@ class ArticleLayout extends React.Component {
                             fontSize: "18px",
                             lineHeight: "24px",
                             textTransform: "uppercase",
-                            color: "#ffffff"
+                            color: "#fff"
                           }}
                         >
                           Related Posts
@@ -166,10 +181,9 @@ class ArticleLayout extends React.Component {
                     }}
                   >
                     <div className={css.card}>
-                      <ClassifiedsCard
-                        header="Featured Classifieds"
-                        classifieds={this.props.classifieds}
-                      />
+                      {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                   </div>
                   <div
@@ -193,7 +207,11 @@ class ArticleLayout extends React.Component {
                       width: "75%"
                     }}
                   >
-                    <div className={css.card}>{this.article}</div>
+                    <div className={css.card}>
+                      {React.cloneElement(this.article, {
+                        darkmode: this.props.darkmode
+                      })}
+                    </div>
                     <div className={css.card}>
                       <CommentsCard
                         id={this.props.article.id}
@@ -212,16 +230,15 @@ class ArticleLayout extends React.Component {
                       <broadstreet-zone zone-id="69405"></broadstreet-zone>
                     </div>
                     <div className={css.card}>
-                      <ClassifiedsCard
-                        header="Featured Classifieds"
-                        classifieds={this.props.classifieds}
-                      />
+                      {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                     <div>
                       <div className={css.card}>
                         <div
                           style={{
-                            backgroundColor: "#000000",
+                            backgroundColor: "#000",
                             height: "27px",
                             padding: "2px 10px 0",
                             boxShadow: globals.cardShadow,
@@ -231,7 +248,7 @@ class ArticleLayout extends React.Component {
                             fontSize: "18px",
                             lineHeight: "24px",
                             textTransform: "uppercase",
-                            color: "#ffffff"
+                            color: "#fff"
                           }}
                         >
                           Related Posts
diff --git a/layouts/Author/index.jsx b/layouts/Author/index.jsx
index 6d8c5b8..5d0c802 100644
--- a/layouts/Author/index.jsx
+++ b/layouts/Author/index.jsx
@@ -19,6 +19,14 @@ export default class Author extends React.Component {
       more: true
     };
     this.getPosts = this.getPosts.bind(this);
+
+    this.classifiedsCards = (
+      <ClassifiedsCard
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />
+    );
+    
   }
 
   getPosts(page) {
@@ -81,6 +89,7 @@ export default class Author extends React.Component {
                 >
                   <div className={css.card}>
                     <AuthorCard
+                      darkmode={this.props.darkmode}
                       image={
                         this.props.author.simple_local_avatar != null
                           ? this.props.author.simple_local_avatar.full
@@ -110,7 +119,8 @@ export default class Author extends React.Component {
                   >
                     {utilities.renderPostArray(
                       this.state.otherArticleCards,
-                      "full"
+                      "full",
+                      this.props.darkmode
                     )}
                   </InfiniteScroll>
                   {!this.state.more ? (
@@ -140,6 +150,7 @@ export default class Author extends React.Component {
                 >
                   <div className={css.card}>
                     <AuthorCard
+                      darkmode={this.props.darkmode}
                       image={
                         this.props.author.simple_local_avatar != null
                           ? this.props.author.simple_local_avatar.full
@@ -180,7 +191,8 @@ export default class Author extends React.Component {
                     >
                       {utilities.renderPostArray(
                         this.state.otherArticleCards,
-                        "horz"
+                        "horz",
+                        this.props.darkmode
                       )}
                     </InfiniteScroll>
                     {!this.state.more ? (
@@ -209,10 +221,9 @@ export default class Author extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
@@ -239,6 +250,7 @@ export default class Author extends React.Component {
                   </div> */}
                   <div className={css.card}>
                     <AuthorCard
+                      darkmode={this.props.darkmode}
                       image={
                         this.props.author.simple_local_avatar != null
                           ? this.props.author.simple_local_avatar.full
@@ -264,7 +276,8 @@ export default class Author extends React.Component {
                     >
                       {utilities.renderPostArray(
                         this.state.otherArticleCards,
-                        "long"
+                        "long",
+                        this.props.darkmode
                       )}
                     </InfiniteScroll>
                     {!this.state.more ? (
@@ -292,10 +305,9 @@ export default class Author extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
diff --git a/layouts/Category/index.jsx b/layouts/Category/index.jsx
index 074b85e..24dabcd 100644
--- a/layouts/Category/index.jsx
+++ b/layouts/Category/index.jsx
@@ -13,14 +13,21 @@ export default class CategoryLayout extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      aArticleCard: utilities.buildArticleCard(this.props.posts[0]),
-      bArticleCard: utilities.buildArticleCard(this.props.posts[1]),
-      cArticleCard: utilities.buildArticleCard(this.props.posts[2]),
-      otherArticleCards: utilities.buildArticleList(this.props.posts.slice(3)),
+      aArticleCard: utilities.buildArticleCard(this.props.posts[0], "", this.props.darkmode),
+      bArticleCard: utilities.buildArticleCard(this.props.posts[1], "", this.props.darkmode),
+      cArticleCard: utilities.buildArticleCard(this.props.posts[2], "", this.props.darkmode),
+      otherArticleCards: utilities.buildArticleList(this.props.posts.slice(3), "", this.props.darkmode),
 
       more: true
     };
     this.getPosts = this.getPosts.bind(this);
+
+    this.classifiedsCards = (
+      <ClassifiedsCard
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />
+    )
   }
 
   getPosts(page) {
@@ -83,17 +90,17 @@ export default class CategoryLayout extends React.Component {
                 >
                   <div id="c1" className={css.card}>
                     {React.cloneElement(this.state.aArticleCard, {
-                      displayType: "full"
+                      darkmode: this.props.darkmode, displayType: "full"
                     })}
                   </div>
                   <div id="c2" className={css.card}>
                     {React.cloneElement(this.state.bArticleCard, {
-                      displayType: "full"
+                      darkmode: this.props.darkmode, displayType: "full"
                     })}
                   </div>
                   <div id="c2" className={css.card}>
                     {React.cloneElement(this.state.cArticleCard, {
-                      displayType: "full"
+                      darkmode: this.props.darkmode, displayType: "full"
                     })}
                   </div>
                   <InfiniteScroll
@@ -107,7 +114,8 @@ export default class CategoryLayout extends React.Component {
                   >
                     {utilities.renderPostArray(
                       this.state.otherArticleCards,
-                      "full"
+                      "full",
+                      this.props.darkmode
                     )}
                   </InfiniteScroll>
                   {!this.state.more ? (
@@ -137,7 +145,7 @@ export default class CategoryLayout extends React.Component {
                 >
                   <div id="a" className={css.card}>
                     {React.cloneElement(this.state.aArticleCard, {
-                      displayType: "full"
+                      darkmode: this.props.darkmode, displayType: "full"
                     })}
                   </div>
                   <div>
@@ -152,7 +160,8 @@ export default class CategoryLayout extends React.Component {
                     >
                       {utilities.renderPostArray(
                         this.state.otherArticleCards,
-                        "horz"
+                        "horz",
+                        this.props.darkmode
                       )}
                     </InfiniteScroll>
                     {!this.state.more ? (
@@ -179,19 +188,18 @@ export default class CategoryLayout extends React.Component {
                 >
                   <div id="c1" className={css.card}>
                     {React.cloneElement(this.state.bArticleCard, {
-                      displayType: "vert"
+                      darkmode: this.props.darkmode, displayType: "vert"
                     })}
                   </div>
                   <div id="c2" className={css.card}>
                     {React.cloneElement(this.state.cArticleCard, {
-                      displayType: "mini"
+                      darkmode: this.props.darkmode, displayType: "mini"
                     })}
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
@@ -212,7 +220,7 @@ export default class CategoryLayout extends React.Component {
                   >
                     <div id="a" className={css.card}>
                       {React.cloneElement(this.state.aArticleCard, {
-                        displayType: "full"
+                        darkmode: this.props.darkmode, displayType: "full"
                       })}
                     </div>
                   </div>
@@ -226,12 +234,12 @@ export default class CategoryLayout extends React.Component {
                   >
                     <div id="c1" className={css.card}>
                       {React.cloneElement(this.state.bArticleCard, {
-                        displayType: "vert"
+                        darkmode: this.props.darkmode, displayType: "vert"
                       })}
                     </div>
                     <div id="c2" className={css.card}>
                       {React.cloneElement(this.state.cArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                   </div>
@@ -248,7 +256,8 @@ export default class CategoryLayout extends React.Component {
                     >
                       {utilities.renderPostArray(
                         this.state.otherArticleCards,
-                        "long"
+                        "long",
+                        this.props.darkmode
                       )}
                     </InfiniteScroll>
                     {!this.state.more ? (
@@ -276,10 +285,9 @@ export default class CategoryLayout extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
diff --git a/layouts/Feature/index.jsx b/layouts/Feature/index.jsx
index 131f2d0..8d67cfb 100644
--- a/layouts/Feature/index.jsx
+++ b/layouts/Feature/index.jsx
@@ -9,39 +9,45 @@ import FeatureArticle from "../../components/FeatureArticle";
 class FeatureLayout extends React.Component {
   constructor(props) {
     super(props);
+    this.featurearticle = (
+      <FeatureArticle
+        darkmode={this.props.darkmode}
+        headline={this.props.article.title.rendered}
+        date={moment.utc(this.props.article.date)}
+        authors={this.props.authors}
+        categories={this.props.article["_embedded"]["wp:term"][0]}
+        featureimg={
+          this.props.article._embedded["wp:featuredmedia"] != undefined &&
+          !this.props.article._embedded["wp:featuredmedia"].empty
+            ? this.props.article._embedded["wp:featuredmedia"][0].source_url
+            : ""
+        }
+        caption={
+          this.props.article._embedded["wp:featuredmedia"] != undefined &&
+          !this.props.article._embedded["wp:featuredmedia"].empty
+            ? this.props.article._embedded["wp:featuredmedia"][0].caption
+                .rendered
+            : ""
+        }
+        authorimg={
+          this.props.article["_embedded"].author[0]["avatar_urls"][96]
+        }
+        content={this.props.article.content.rendered}
+        acf={this.props.article.acf}
+        tagged={this.props.tagged.filter(
+          article => article.slug != this.props.article.slug
+        )}
+        relatedPosts={this.props.relatedPosts}
+      />
+    )
   }
 
   render() {
     return (
       <>
-        <FeatureArticle
-          headline={this.props.article.title.rendered}
-          date={moment.utc(this.props.article.date)}
-          authors={this.props.authors}
-          categories={this.props.article["_embedded"]["wp:term"][0]}
-          featureimg={
-            this.props.article._embedded["wp:featuredmedia"] != undefined &&
-            !this.props.article._embedded["wp:featuredmedia"].empty
-              ? this.props.article._embedded["wp:featuredmedia"][0].source_url
-              : ""
-          }
-          caption={
-            this.props.article._embedded["wp:featuredmedia"] != undefined &&
-            !this.props.article._embedded["wp:featuredmedia"].empty
-              ? this.props.article._embedded["wp:featuredmedia"][0].caption
-                  .rendered
-              : ""
-          }
-          authorimg={
-            this.props.article["_embedded"].author[0]["avatar_urls"][96]
-          }
-          content={this.props.article.content.rendered}
-          acf={this.props.article.acf}
-          tagged={this.props.tagged.filter(
-            article => article.slug != this.props.article.slug
-          )}
-          relatedPosts={this.props.relatedPosts}
-        />
+        {React.cloneElement(this.featurearticle, {
+          darkmode: this.props.darkmode
+        })}
       </>
     );
   }
diff --git a/layouts/Home/index.jsx b/layouts/Home/index.jsx
index 9adbca9..5a5a51e 100644
--- a/layouts/Home/index.jsx
+++ b/layouts/Home/index.jsx
@@ -11,6 +11,7 @@ import Poll from "../../components/Poll";
 import StoryList from "../../components/StoryList";
 import SponsoredLinks from "../../components/SponsoredLinks";
 import TwitterFeed from "../../components/TwitterFeed";
+import * as globals from "../../components/globals";
 
 const ArticleAdStyle = {
   width: "100%",
@@ -25,47 +26,62 @@ export default class HomeLayout extends React.Component {
   constructor(props) {
     super(props);
     this.cards = {
-      aArticleCard: utilities.buildArticleCard(this.props.posts.aStory[0]),
-      bArticleCard: utilities.buildArticleCard(this.props.posts.bStory[0]),
-      c1ArticleCard: utilities.buildArticleCard(this.props.posts.c1Story[0]),
-      c2ArticleCard: utilities.buildArticleCard(this.props.posts.c2Story[0]),
-      dArticleCard: utilities.buildArticleCard(this.props.posts.dStory[0]),
-      eArticleCard: utilities.buildArticleCard(this.props.posts.eStory[0]),
-      f1ArticleCard: utilities.buildArticleCard(this.props.posts.f1Story[0]),
-      f2ArticleCard: utilities.buildArticleCard(this.props.posts.f2Story[0]),
+      aArticleCard: utilities.buildArticleCard(this.props.posts.aStory[0],"",this.props.darkmode),
+      bArticleCard: utilities.buildArticleCard(this.props.posts.bStory[0],"",this.props.darkmode),
+      c1ArticleCard: utilities.buildArticleCard(this.props.posts.c1Story[0],"",this.props.darkmode),
+      c2ArticleCard: utilities.buildArticleCard(this.props.posts.c2Story[0],"",this.props.darkmode),
+      dArticleCard: utilities.buildArticleCard(this.props.posts.dStory[0],"",this.props.darkmode),
+      eArticleCard: utilities.buildArticleCard(this.props.posts.eStory[0],"",this.props.darkmode),
+      f1ArticleCard: utilities.buildArticleCard(this.props.posts.f1Story[0],"",this.props.darkmode),
+      f2ArticleCard: utilities.buildArticleCard(this.props.posts.f2Story[0],"",this.props.darkmode),
 
       m1MultimediaScroller: utilities.buildMultimediaScroller(this.props.media),
 
       qdStoryList: utilities.buildStoryList(
         "THE QUAD",
         this.props.posts.quadList,
-        "/category/quad"
+        "/category/quad",
+        this.props.darkmode
       ),
       nsStoryList: utilities.buildStoryList(
         "NEWS",
         this.props.posts.newsList,
-        "/category/news"
+        "/category/news",
+        this.props.darkmode
       ),
       enStoryList: utilities.buildStoryList(
         "ENTERPRISE",
         this.props.posts.enterpriseList,
-        "/category/enterprise"
+        "/category/enterprise",
+        this.props.darkmode
       ),
       opStoryList: utilities.buildStoryList(
         "OPINION",
         this.props.posts.opinionList,
-        "/category/opinion"
+        "/category/opinion",
+        this.props.darkmode
       ),
       aeStoryList: utilities.buildStoryList(
         "A&E",
         this.props.posts.artsList,
-        "/category/arts-entertainment"
+        "/category/arts-entertainment",
+        this.props.darkmode
       ),
       spStoryList: utilities.buildStoryList(
         "SPORTS",
         this.props.posts.sportsList,
-        "/category/sports"
-      )
+        "/category/sports",
+        this.props.darkmode
+      ),
+      classifieds: (<ClassifiedsCard
+        darkmode={this.props.darkmode}
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />),
+      sponsored: (<SponsoredLinks 
+        links={this.props.sponsoredLinks} 
+        darkmode={this.props.darkmode}
+      />)
     };
   }
 
@@ -91,27 +107,27 @@ export default class HomeLayout extends React.Component {
                   >
                     <div id="c1" className={css.card}>
                       {React.cloneElement(this.cards.c1ArticleCard, {
-                        displayType: "full"
+                        darkmode: this.props.darkmode, displayType: "full"
                       })}
                     </div>
                     <div id="c2" className={css.card}>
                       {React.cloneElement(this.cards.c2ArticleCard, {
-                        displayType: "full"
+                        darkmode: this.props.darkmode, displayType: "full"
                       })}
                     </div>
                     <div id="a" className={css.card}>
                       {React.cloneElement(this.cards.aArticleCard, {
-                        displayType: "full"
+                        darkmode: this.props.darkmode, displayType: "full"
                       })}
                     </div>
                     <div id="b" className={css.card}>
                       {React.cloneElement(this.cards.bArticleCard, {
-                        displayType: "full"
+                        darkmode: this.props.darkmode, displayType: "full"
                       })}
                     </div>
                     {this.props.mappedBreaking != null && (
                       <div className={css.card}>
-                        <TwitterFeed />
+                        <TwitterFeed darkmode={this.props.darkmode}/>
                       </div>
                     )}
                     <div
@@ -122,16 +138,18 @@ export default class HomeLayout extends React.Component {
                       <broadstreet-zone zone-id="69405"></broadstreet-zone>
                     </div>
                     <div id="qd" className={css.card}>
-                      {this.cards.qdStoryList}
+                      {React.cloneElement(this.cards.qdStoryList, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                     <div id="d" className={css.card}>
                       {React.cloneElement(this.cards.dArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                     <div id="e" className={css.card}>
                       {React.cloneElement(this.cards.eArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                     <div id="MultimediaScroller" className={css.card}>
@@ -139,23 +157,22 @@ export default class HomeLayout extends React.Component {
                     </div>
                     {this.props.mappedBreaking == null && (
                       <div className={css.card}>
-                        <TwitterFeed />
+                        <TwitterFeed darkmode={this.props.darkmode}/>
                       </div>
                     )}
                     <div id="classifieds" className={css.card}>
-                      <ClassifiedsCard
-                        header="Featured Classifieds"
-                        classifieds={this.props.classifieds}
-                      />
+                      {React.cloneElement(this.cards.classifieds, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                     <div id="f1" className={css.card}>
                       {React.cloneElement(this.cards.f1ArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                     <div id="f2" className={css.card}>
                       {React.cloneElement(this.cards.f2ArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                     <div
@@ -166,19 +183,29 @@ export default class HomeLayout extends React.Component {
                       <broadstreet-zone zone-id="69405"></broadstreet-zone>
                     </div>
                     <div id="ns" className={css.card}>
-                      {this.cards.nsStoryList}
+                      {React.cloneElement(this.cards.nsStoryList, {
+                        darkmode: this.props.darkmode, displayType: "mini"
+                      })}
                     </div>
                     <div id="en" className={css.card}>
-                      {this.cards.enStoryList}
+                      {React.cloneElement(this.cards.enStoryList, {
+                        darkmode: this.props.darkmode, displayType: "mini"
+                      })}
                     </div>
                     <div id="op" className={css.card}>
-                      {this.cards.opStoryList}
+                      {React.cloneElement(this.cards.opStoryList, {
+                        darkmode: this.props.darkmode, displayType: "mini"
+                      })}
                     </div>
                     <div id="ae" className={css.card}>
-                      {this.cards.aeStoryList}
+                      {React.cloneElement(this.cards.aeStoryList, {
+                        darkmode: this.props.darkmode, displayType: "mini"
+                      })}
                     </div>
                     <div id="sp" className={css.card}>
-                      {this.cards.spStoryList}
+                      {React.cloneElement(this.cards.spStoryList, {
+                        darkmode: this.props.darkmode, displayType: "mini"
+                      })}
                     </div>
                   </div>
                 </div>
@@ -194,7 +221,7 @@ export default class HomeLayout extends React.Component {
                   >
                     <div id="a" className={css.card}>
                       {React.cloneElement(this.cards.aArticleCard, {
-                        displayType: "vert"
+                        darkmode: this.props.darkmode, displayType: "vert"
                       })}
                     </div>
                     <div
@@ -206,26 +233,27 @@ export default class HomeLayout extends React.Component {
                     </div>
                     <div id="b" className={css.card}>
                       {React.cloneElement(this.cards.bArticleCard, {
-                        displayType: "vert"
+                        darkmode: this.props.darkmode, displayType: "vert"
                       })}
                     </div>
                     <div id="qd" className={css.card}>
-                      {this.cards.qdStoryList}
+                      {React.cloneElement(this.cards.qdStoryList, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                     <div id="classifieds" className={css.card}>
-                      <ClassifiedsCard
-                        header="Featured Classifieds"
-                        classifieds={this.props.classifieds}
-                      />
+                      {React.cloneElement(this.cards.classifieds, {
+                        darkmode: this.props.darkmode
+                      })}
                     </div>
                     <div id="f1" className={css.card}>
                       {React.cloneElement(this.cards.f1ArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                     {this.props.mappedBreaking != null && (
                       <div className={css.card}>
-                        <TwitterFeed />
+                        <TwitterFeed darkmode={this.props.darkmode}/>
                       </div>
                     )}
                     <div
@@ -237,12 +265,12 @@ export default class HomeLayout extends React.Component {
                     </div>
                     <div id="f2" className={css.card}>
                       {React.cloneElement(this.cards.f2ArticleCard, {
-                        displayType: "mini"
+                        darkmode: this.props.darkmode, displayType: "mini"
                       })}
                     </div>
                     {this.props.mappedBreaking == null && (
                       <div className={css.card}>
-                        <TwitterFeed />
+                        <TwitterFeed darkmode={this.props.darkmode}/>
                       </div>
                     )}
                   </div>
@@ -255,12 +283,12 @@ export default class HomeLayout extends React.Component {
                   >
                     <div id="c1" className={css.card}>
                       {React.cloneElement(this.cards.c1ArticleCard, {
-                        displayType: "full"
+                        darkmode: this.props.darkmode, displayType: "full"
                       })}
                     </div>
                     <div id="c2" className={css.card}>
                       {React.cloneElement(this.cards.c2ArticleCard, {
-                        displayType: "horz"
+                        darkmode: this.props.darkmode, displayType: "horz"
                       })}
                     </div>
                     <div
@@ -275,7 +303,7 @@ export default class HomeLayout extends React.Component {
                       >
                         <div id="d" className={css.card}>
                           {React.cloneElement(this.cards.dArticleCard, {
-                            displayType: "mini"
+                            darkmode: this.props.darkmode, displayType: "mini"
                           })}
                         </div>
                       </div>
@@ -286,7 +314,7 @@ export default class HomeLayout extends React.Component {
                       >
                         <div id="e" className={css.card}>
                           {React.cloneElement(this.cards.eArticleCard, {
-                            displayType: "mini"
+                            darkmode: this.props.darkmode, displayType: "mini"
                           })}
                         </div>
                       </div>
@@ -295,21 +323,31 @@ export default class HomeLayout extends React.Component {
                       </div>
                       <div className={css.column} style={{ width: "50%" }}>
                         <div id="ns" className={css.card}>
-                          {this.cards.nsStoryList}
+                          {React.cloneElement(this.cards.nsStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                         <div id="en" className={css.card}>
-                          {this.cards.enStoryList}
+                          {React.cloneElement(this.cards.enStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                         <div id="ae" className={css.card}>
-                          {this.cards.aeStoryList}
+                          {React.cloneElement(this.cards.aeStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                       </div>
                       <div className={css.column} style={{ width: "50%" }}>
                         <div id="op" className={css.card}>
-                          {this.cards.opStoryList}
+                          {React.cloneElement(this.cards.opStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                         <div id="sp" className={css.card}>
-                          {this.cards.spStoryList}
+                        {React.cloneElement(this.cards.spStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                       </div>
                       <div className={css.column} style={{ width: "100%" }}>
@@ -322,7 +360,9 @@ export default class HomeLayout extends React.Component {
                           </a>
                         </div>
                         <div className={css.card}>
-                          <SponsoredLinks links={this.props.sponsoredLinks} />
+                          {React.cloneElement(this.cards.sponsored, {
+                            darkmode: this.props.darkmode
+                          })}
                         </div>
                       </div>
                     </div>
@@ -341,28 +381,31 @@ export default class HomeLayout extends React.Component {
                     >
                       <div id="a" className={css.card}>
                         {React.cloneElement(this.cards.aArticleCard, {
-                          displayType: "vert"
+                          darkmode: this.props.darkmode, displayType: "vert"
                         })}
                       </div>
                       <div id="b" className={css.card}>
                         {React.cloneElement(this.cards.bArticleCard, {
-                          displayType: "vert"
+                          darkmode: this.props.darkmode, displayType: "vert"
                         })}
                       </div>
                       <div id="classifieds" className={css.card}>
-                        <ClassifiedsCard
-                          header="Featured Classifieds"
-                          classifieds={this.props.classifieds}
-                        />
+                        {React.cloneElement(this.cards.classifieds, {
+                          darkmode: this.props.darkmode
+                        })}
                       </div>
                       <div style={{ textAlign: "center" }} className={css.card}>
                         <broadstreet-zone zone-id="69405"></broadstreet-zone>
                       </div>
                       <div id="ns" className={css.card}>
-                        {this.cards.nsStoryList}
+                      {React.cloneElement(this.cards.nsStoryList, {
+                          darkmode: this.props.darkmode
+                        })}
                       </div>
                       <div id="en" className={css.card}>
-                        {this.cards.enStoryList}
+                      {React.cloneElement(this.cards.enStoryList, {
+                          darkmode: this.props.darkmode
+                        })}
                       </div>
                     </div>
                     <div
@@ -374,12 +417,12 @@ export default class HomeLayout extends React.Component {
                     >
                       <div id="c1" className={css.card}>
                         {React.cloneElement(this.cards.c1ArticleCard, {
-                          displayType: "full"
+                          darkmode: this.props.darkmode, displayType: "full"
                         })}
                       </div>
                       <div id="c2" className={css.card}>
                         {React.cloneElement(this.cards.c2ArticleCard, {
-                          displayType: "horz"
+                          darkmode: this.props.darkmode, displayType: "horz"
                         })}
                       </div>
                       <div id="MultimediaScroller" className={css.card}>
@@ -387,22 +430,26 @@ export default class HomeLayout extends React.Component {
                       </div>
                       <div id="f1" className={css.card}>
                         {React.cloneElement(this.cards.f1ArticleCard, {
-                          displayType: "horz"
+                          darkmode: this.props.darkmode, displayType: "horz"
                         })}
                       </div>
                       <div id="f2" className={css.card}>
                         {React.cloneElement(this.cards.f2ArticleCard, {
-                          displayType: "horz"
+                          darkmode: this.props.darkmode, displayType: "horz"
                         })}
                       </div>
                       <div className={css.column} style={{ width: "50%" }}>
                         <div id="op" className={css.card}>
-                          {this.cards.opStoryList}
+                          {React.cloneElement(this.cards.opStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                       </div>
                       <div className={css.column} style={{ width: "50%" }}>
                         <div id="ae" className={css.card}>
-                          {this.cards.aeStoryList}
+                          {React.cloneElement(this.cards.aeStoryList, {
+                            darkmode: this.props.darkmode, displayType: "mini"
+                          })}
                         </div>
                       </div>
                     </div>
@@ -413,7 +460,7 @@ export default class HomeLayout extends React.Component {
                     >
                       {this.props.mappedBreaking != null && (
                         <div className={css.card}>
-                          <TwitterFeed />
+                          <TwitterFeed darkmode={this.props.darkmode}/>
                         </div>
                       )}
                       <div
@@ -424,25 +471,29 @@ export default class HomeLayout extends React.Component {
                         <broadstreet-zone zone-id="69405"></broadstreet-zone>
                       </div>
                       <div id="qd" className={css.card}>
-                        {this.cards.qdStoryList}
+                        {React.cloneElement(this.cards.qdStoryList, {
+                          darkmode: this.props.darkmode
+                        })}
                       </div>
                       <div id="d" className={css.card}>
                         {React.cloneElement(this.cards.dArticleCard, {
-                          displayType: "mini"
+                          darkmode: this.props.darkmode, displayType: "mini"
                         })}
                       </div>
                       <div id="e" className={css.card}>
                         {React.cloneElement(this.cards.eArticleCard, {
-                          displayType: "mini"
+                          darkmode: this.props.darkmode, displayType: "mini"
                         })}
                       </div>
                       {this.props.mappedBreaking == null && (
                         <div className={css.card}>
-                          <TwitterFeed />
+                          <TwitterFeed darkmode={this.props.darkmode}/>
                         </div>
                       )}
                       <div id="sp" className={css.card}>
-                        {this.cards.spStoryList}
+                      {React.cloneElement(this.cards.spStoryList, {
+                          darkmode: this.props.darkmode
+                        })}
                       </div>
                       <div className={css.card}>
                         <a href="https://prime.dailybruin.com">
@@ -467,7 +518,9 @@ export default class HomeLayout extends React.Component {
                     </div> */}
                     <div className={css.column} style={{ width: "50%" }}>
                       <div className={css.card}>
-                        <SponsoredLinks links={this.props.sponsoredLinks} />
+                        {React.cloneElement(this.cards.sponsored, {
+                          darkmode: this.props.darkmode
+                        })}
                       </div>
                     </div>
                   </div>
diff --git a/layouts/Multimedia/index.jsx b/layouts/Multimedia/index.jsx
index aef571d..2d513c8 100644
--- a/layouts/Multimedia/index.jsx
+++ b/layouts/Multimedia/index.jsx
@@ -56,7 +56,7 @@ export default class MultimediaLayout extends React.Component {
   }
 
   render() {
-    let rendered = utilities.buildPhotoList(this.state.cards);
+    let rendered = utilities.buildPhotoList(this.state.cards, this.props.darkmode);
     return (
       <>
         <InfiniteScroll
diff --git a/layouts/Multimedia/utilities.jsx b/layouts/Multimedia/utilities.jsx
index 8d47719..4fe9c80 100644
--- a/layouts/Multimedia/utilities.jsx
+++ b/layouts/Multimedia/utilities.jsx
@@ -1,10 +1,11 @@
 import PhotoCard from "../../components/PhotoCard";
 
-export function buildPhotoCard(story) {
+export function buildPhotoCard(story, darkmode) {
   if (story != undefined) {
     return (
       <div className="grid-item">
         <PhotoCard
+          darkmode={darkmode}
           headline={story.title != undefined ? story.title.rendered : ""}
           href={`/post/[slug]`}
           as={story.link}
@@ -24,10 +25,10 @@ export function buildPhotoCard(story) {
   }
 }
 
-export function buildPhotoList(stories) {
+export function buildPhotoList(stories, darkmode) {
   let postArray = [];
   for (let story of stories) {
-    postArray.push(buildPhotoCard(story));
+    postArray.push(buildPhotoCard(story, darkmode));
   }
   return postArray;
 }
diff --git a/layouts/Page/index.jsx b/layouts/Page/index.jsx
index d050a95..6f33669 100644
--- a/layouts/Page/index.jsx
+++ b/layouts/Page/index.jsx
@@ -14,22 +14,22 @@ const ArticleAdStyle = {
   fontWeight: "bold",
   fontFamily: "sans-serif"
 };
-
+// TODO
 class PageLayout extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      page: (
-        <Page
-          content={this.props.page.content.rendered}
-          date={new Date(this.props.page.modified)}
-        />
-      )
-    };
+    this.page = (
+      <Page
+        content={this.props.page.content.rendered}
+        date={new Date(this.props.page.modified)}
+        darkmode={this.props.darkmode}
+      />);
   }
 
   render() {
-    return <div className={css.card}>{this.state.page}</div>;
+    return (<div className={css.card}>
+      {React.cloneElement(this.page, {darkmode: this.props.darkmode})}  
+    </div>);
   }
 }
 
diff --git a/layouts/PageWrapper.jsx b/layouts/PageWrapper.jsx
index b01d3ff..065eef3 100644
--- a/layouts/PageWrapper.jsx
+++ b/layouts/PageWrapper.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { Config } from "../config.js";
 import Head from "next/head";
 
@@ -9,13 +9,7 @@ import Masthead from "components/Masthead";
 import CommentFAB from "components/CommentFAB";
 
 import css from "./style.module.css";
-
-const wrapperStyle = {
-  padding: "6px",
-  backgroundColor: "#f1f1f1",
-  width: "100%",
-  height: "100%"
-};
+import * as globals from "../components/globals";
 
 const layoutStyle = {
   maxWidth: 1248,
@@ -24,6 +18,12 @@ const layoutStyle = {
 
 const PageWrapper = Comp =>
   class extends Component {
+    constructor(props) {
+      super(props);      
+        this.state = {}
+    } 
+
+
     static async getInitialProps(ctx) {
       // Load the categories for the header
       // TODO: can we load this once each browser session?
@@ -77,7 +77,28 @@ const PageWrapper = Comp =>
       };
     }
 
+    onToggle = (e) => {
+      localStorage.setItem('darkmode', JSON.stringify(e.target.checked));
+      this.setState({
+        darkmode: JSON.parse(localStorage.getItem('darkmode'))
+      })
+      
+    }
+
+    componentDidMount() {
+      this.setState({
+        darkmode: JSON.parse(localStorage.getItem('darkmode'))
+      })
+    }
+
     render() {
+      const style = {
+        padding: "6px",
+        backgroundColor: this.state.darkmode ? "#010101" : "#f1f1f1",
+        width: "100%",
+        height: "100%"
+      }
+
       if (this.props.feature == true) {
         return <Comp {...this.props} />;
       }
@@ -85,7 +106,7 @@ const PageWrapper = Comp =>
       if (this.props.mappedBreaking != null) {
         renderedBreakingCard = (
           <div style={{ padding: "6px" }}>
-            <BreakingCard story={this.props.mappedBreaking} />
+            <BreakingCard story={this.props.mappedBreaking} darkmode={this.state.darkmode}/>
           </div>
         );
       }
@@ -93,23 +114,23 @@ const PageWrapper = Comp =>
       if (this.props.mappedITN != null && this.props.mappedBreaking == null) {
         renderedInTheNews = (
           <div style={{ padding: "6px" }}>
-            <InTheNews stories={this.props.mappedITN} />
+            <InTheNews stories={this.props.mappedITN} darkmode={this.state.darkmode}/>
           </div>
         );
       }
       return (
-        <div style={wrapperStyle}>
+        <div style={style}>
           <div style={layoutStyle}>
             <CommentFAB></CommentFAB>
             <div className={css["banner-ad"]}>
               <broadstreet-zone zone-id="69404"></broadstreet-zone>
             </div>
-            <Masthead categories={this.props.mappedCategories}></Masthead>
+            <Masthead categories={this.props.mappedCategories} onToggle={this.onToggle} darkmode={this.state.darkmode}></Masthead>
             {renderedBreakingCard}
             {renderedInTheNews}
-            <Comp {...this.props} />
-            <div style={{ padding: "6px" }}>
-              <MainSiteFooter />
+            <Comp {...this.props} darkmode={this.state.darkmode} />
+            <div style={{ padding: "6px" }}>              
+              <MainSiteFooter darkmode={this.state.darkmode}/>
             </div>
           </div>
         </div>
diff --git a/layouts/PhotoGallery/PGalleryLayout.jsx b/layouts/PhotoGallery/PGalleryLayout.jsx
index 7ac6a6a..83ff8a6 100644
--- a/layouts/PhotoGallery/PGalleryLayout.jsx
+++ b/layouts/PhotoGallery/PGalleryLayout.jsx
@@ -14,6 +14,7 @@ export default class PGalleryLayout extends React.Component {
         super(props);
         this.pgallery = (
             <PGallery
+                darkmode={this.props.darkmode}
                 headline={this.props.post.title.rendered}
                 link={this.props.post.link}
                 date={moment.utc(this.props.post.date)}
@@ -37,7 +38,9 @@ export default class PGalleryLayout extends React.Component {
                     defaultMatches={{ desktop: true }}
                 >
                     <div>
-                        {this.pgallery}
+                        {React.cloneElement(this.pgallery, {
+                            darkmode: this.props.darkmode
+                        })}
                         <div className={css.card}>
                             <CommentsCard
                                 id={this.props.post.id}
diff --git a/layouts/PhotoGallery/index_old.jsx b/layouts/PhotoGallery/index_old.jsx
index 1cfb0d6..e06482e 100644
--- a/layouts/PhotoGallery/index_old.jsx
+++ b/layouts/PhotoGallery/index_old.jsx
@@ -8,19 +8,25 @@ import CommentsCard from "../../components/CommentsCard";
 export default class PhotoGalleryLayout extends React.Component {
   constructor(props) {
     super(props);
+    this.photogallery = (
+      <PhotoGallery
+        darkmode={this.props.darkmode}
+        headline={this.props.post.title.rendered}
+        photos={this.props.photos}
+        photographers={this.props.photographers}
+        date={this.props.post.date}
+        link={this.props.post.link}
+      />
+    )
   }
 
   render() {
     return (
       <>
         <div className={css.card}>
-          <PhotoGallery
-            headline={this.props.post.title.rendered}
-            photos={this.props.photos}
-            photographers={this.props.photographers}
-            date={this.props.post.date}
-            link={this.props.post.link}
-          />
+          {React.cloneElement(this.photogallery, {
+            darkmode: this.props.darkmode
+          })}          
         </div>
         <div className={css.card}>
           <CommentsCard
diff --git a/layouts/Podcasts/index.jsx b/layouts/Podcasts/index.jsx
index e2aa319..c843574 100644
--- a/layouts/Podcasts/index.jsx
+++ b/layouts/Podcasts/index.jsx
@@ -13,11 +13,18 @@ export default class PodcastsLayout extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      otherArticleCards: utilities.buildArticleList(this.props.posts),
+      otherArticleCards: utilities.buildArticleList(this.props.posts, this.props.darkmode),
 
       more: true
     };
     this.getPosts = this.getPosts.bind(this);
+
+    this.classifiedsCards = (
+      <ClassifiedsCard
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />
+    )
   }
 
   getPosts(page) {
@@ -30,7 +37,7 @@ export default class PodcastsLayout extends React.Component {
           if (json.data == undefined) {
             this.setState({
               otherArticleCards: this.state.otherArticleCards.concat(
-                utilities.buildArticleList(json)
+                utilities.buildArticleList(json, this.props.darkmode)
               )
             });
           } else {
@@ -89,7 +96,8 @@ export default class PodcastsLayout extends React.Component {
                   >
                     {utilities.renderPodcastArray(
                       this.state.otherArticleCards,
-                      "podcast"
+                      "podcast",
+                      this.props.darkmode
                     )}
                   </InfiniteScroll>
                   {!this.state.more ? (
@@ -136,7 +144,8 @@ export default class PodcastsLayout extends React.Component {
                       >
                         {utilities.renderPodcastArray(
                           this.state.otherArticleCards,
-                          "podcast"
+                          "podcast",
+                          this.props.darkmode
                         )}
                       </div>
                     </InfiniteScroll>
@@ -163,10 +172,9 @@ export default class PodcastsLayout extends React.Component {
                   }}
                 >
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
@@ -197,7 +205,8 @@ export default class PodcastsLayout extends React.Component {
                       >
                         {utilities.renderPodcastArray(
                           this.state.otherArticleCards,
-                          "podcast"
+                          "podcast",
+                          this.props.darkmode
                         )}
                       </div>
                     </InfiniteScroll>
@@ -226,10 +235,9 @@ export default class PodcastsLayout extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
diff --git a/layouts/Sponsored/index.jsx b/layouts/Sponsored/index.jsx
index b7543cb..4d33fea 100644
--- a/layouts/Sponsored/index.jsx
+++ b/layouts/Sponsored/index.jsx
@@ -5,7 +5,7 @@ import Media from "react-media";
 import moment from "moment";
 
 import SponsoredArticle from "components/SponsoredArticle";
-
+// TODO
 class SponsoredLayout extends React.Component {
   constructor(props) {
     super(props);
@@ -15,6 +15,7 @@ class SponsoredLayout extends React.Component {
     return (
       <>
         <SponsoredArticle
+          darkmode={this.props.darkmode}
           headline={this.props.article.title.rendered}
           date={moment.utc(this.props.article.date)}
           authors={this.props.authors}
diff --git a/layouts/Tag/index.jsx b/layouts/Tag/index.jsx
index 77a3799..633acd9 100644
--- a/layouts/Tag/index.jsx
+++ b/layouts/Tag/index.jsx
@@ -17,6 +17,13 @@ export default class TagLayout extends React.Component {
       more: true
     };
     this.getPosts = this.getPosts.bind(this);
+
+    this.classifiedsCards = (
+      <ClassifiedsCard
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />
+    )
   }
 
   getPosts(page) {
@@ -88,7 +95,8 @@ export default class TagLayout extends React.Component {
                   >
                     {utilities.renderPostArray(
                       this.state.otherArticleCards,
-                      "full"
+                      "full",
+                      this.props.darkmode
                     )}
                   </InfiniteScroll>
                   {!this.state.more ? (
@@ -122,7 +130,8 @@ export default class TagLayout extends React.Component {
                     >
                       {utilities.renderPostArray(
                         this.state.otherArticleCards,
-                        "horz"
+                        "horz",
+                        this.props.darkmode
                       )}
                     </InfiniteScroll>
                     {!this.state.more ? (
@@ -151,10 +160,9 @@ export default class TagLayout extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
@@ -178,7 +186,8 @@ export default class TagLayout extends React.Component {
                     >
                       {utilities.renderPostArray(
                         this.state.otherArticleCards,
-                        "long"
+                        "long",
+                        this.props.darkmode
                       )}
                     </InfiniteScroll>
                     {!this.state.more ? (
@@ -206,10 +215,9 @@ export default class TagLayout extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
diff --git a/layouts/USACOfficerEvaluations1920/index.jsx b/layouts/USACOfficerEvaluations1920/index.jsx
index 811b24c..7b37d20 100644
--- a/layouts/USACOfficerEvaluations1920/index.jsx
+++ b/layouts/USACOfficerEvaluations1920/index.jsx
@@ -4,6 +4,7 @@ import { css, jsx } from "@emotion/core";
 import * as globals from "../../components/globals";
 import style from "../style.module.css";
 
+// TODO
 export default class ColumnsFromQuarantineLayout extends React.Component {
   constructor(props) {
     super(props);
diff --git a/layouts/USACOfficerEvaluations2021Layout/index.jsx b/layouts/USACOfficerEvaluations2021Layout/index.jsx
index d961aac..643e502 100644
--- a/layouts/USACOfficerEvaluations2021Layout/index.jsx
+++ b/layouts/USACOfficerEvaluations2021Layout/index.jsx
@@ -3,7 +3,7 @@ import React from "react";
 import { css, jsx } from "@emotion/core";
 import * as globals from "../../components/globals";
 import style from "../style.module.css";
-
+// TODO
 export default class ColumnsFromQuarantineLayout extends React.Component {
   constructor(props) {
     super(props);
diff --git a/layouts/Video/index.jsx b/layouts/Video/index.jsx
index 3b90098..f617586 100644
--- a/layouts/Video/index.jsx
+++ b/layouts/Video/index.jsx
@@ -19,6 +19,13 @@ export default class VideoLayout extends React.Component {
       more: true
     };
     this.getPosts = this.getPosts.bind(this);
+
+    this.classifiedsCards = (
+      <ClassifiedsCard
+        header="Featured Classifieds"
+        classifieds={this.props.classifieds}
+      />
+    )
   }
 
   getPosts(page) {
@@ -31,7 +38,7 @@ export default class VideoLayout extends React.Component {
           if (json.data == undefined) {
             this.setState({
               otherArticleCards: this.state.otherArticleCards.concat(
-                utilities.buildArticleList(json)
+                utilities.buildArticleList(json, this.props.darkmode)
               )
             });
           } else {
@@ -81,7 +88,7 @@ export default class VideoLayout extends React.Component {
                 >
                   <div id="c1" className={css.card}>
                     {React.cloneElement(this.state.aArticleCard, {
-                      displayType: "video"
+                      displayType: "video", darkmode: this.props.darkmode
                     })}
                   </div>
                   <InfiniteScroll
@@ -95,7 +102,8 @@ export default class VideoLayout extends React.Component {
                   >
                     {utilities.renderVideoArray(
                       this.state.otherArticleCards,
-                      "video"
+                      "video",
+                      this.props.darkmode
                     )}
                   </InfiniteScroll>
                   {!this.state.more ? (
@@ -125,7 +133,7 @@ export default class VideoLayout extends React.Component {
                 >
                   <div id="a" className={css.card}>
                     {React.cloneElement(this.state.aArticleCard, {
-                      displayType: "full"
+                      displayType: "full", darkmode: this.props.darkmode
                     })}
                   </div>
                   <div>
@@ -147,7 +155,8 @@ export default class VideoLayout extends React.Component {
                       >
                         {utilities.renderVideoArray(
                           this.state.otherArticleCards,
-                          "video"
+                          "video",
+                          this.props.darkmode
                         )}
                       </div>
                     </InfiniteScroll>
@@ -174,10 +183,9 @@ export default class VideoLayout extends React.Component {
                   }}
                 >
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
@@ -198,7 +206,7 @@ export default class VideoLayout extends React.Component {
                   >
                     <div id="a" className={css.card}>
                       {React.cloneElement(this.state.aArticleCard, {
-                        displayType: "full"
+                        displayType: "full", darkmode: this.props.darkmode
                       })}
                     </div>
                   </div>
@@ -221,7 +229,8 @@ export default class VideoLayout extends React.Component {
                       >
                         {utilities.renderVideoArray(
                           this.state.otherArticleCards,
-                          "video"
+                          "video",
+                          this.props.darkmode
                         )}
                       </div>
                     </InfiniteScroll>
@@ -250,10 +259,9 @@ export default class VideoLayout extends React.Component {
                     <broadstreet-zone zone-id="69405"></broadstreet-zone>
                   </div>
                   <div id="classifieds" className={css.card}>
-                    <ClassifiedsCard
-                      header="Featured Classifieds"
-                      classifieds={this.props.classifieds}
-                    />
+                    {React.cloneElement(this.classifiedsCards, {
+                        darkmode: this.props.darkmode
+                    })}
                   </div>
                 </div>
               </div>
diff --git a/layouts/style.module.css b/layouts/style.module.css
index 1228a5e..cd1046b 100644
--- a/layouts/style.module.css
+++ b/layouts/style.module.css
@@ -1,8 +1,19 @@
+.dark {
+  background-color: #222 !important;
+  color: #fff;
+}
+
 .card {
   display: block;
   padding: 6px;
 }
 
+.card_dark {
+  display: block;
+  padding: 6px;
+  background-color: #222;
+}
+
 .video-card {
   display: inline-block;
   padding: 6px;
diff --git a/layouts/utilities.jsx b/layouts/utilities.jsx
index 4a0096d..51f86f7 100644
--- a/layouts/utilities.jsx
+++ b/layouts/utilities.jsx
@@ -4,10 +4,12 @@ import MultimediaScroller from "../components/MultimediaScroller";
 import css from "./style.module.css";
 import moment from "moment";
 
-export function buildArticleCard(story, type = "") {
+export function buildArticleCard(story, type = "", darkmode = false) {
   if (story != null && story != undefined && story.data == undefined) {
     return (
+      
       <ArticleCard
+        darkmode = {darkmode}
         displayType={type}
         headline={story.title != undefined ? story.title.rendered : ""}
         excerpt={story.excerpt != undefined ? story.excerpt.rendered : ""}
@@ -45,7 +47,7 @@ export function buildArticleCard(story, type = "") {
   }
 }
 
-export function buildStoryList(type, list, link) {
+export function buildStoryList(type, list, link, darkmode) {
   const mappedList = list.map(index => {
     return {
       title: index.title.rendered,
@@ -58,6 +60,7 @@ export function buildStoryList(type, list, link) {
   mappedList[2].text = "";
   return (
     <StoryList
+      darkmode={darkmode}
       type={type}
       link={link}
       story={mappedList}
@@ -86,21 +89,21 @@ export function buildMultimediaScroller(media) {
   return <MultimediaScroller media={mappedMedia} />;
 }
 
-export function buildArticleList(stories) {
+export function buildArticleList(stories, darkmode = false) {
   let postArray = [];
   for (let i = 0; i < stories.length; i++) {
-    postArray.push(buildArticleCard(stories[i]));
+    postArray.push(buildArticleCard(stories[i], "", darkmode));
   }
   return postArray;
 }
 
-export function renderPostArray(otherArticleCards, type) {
+export function renderPostArray(otherArticleCards, type, darkmode = false) {
   let renderedPostArray = [];
   for (let i = 0; i < otherArticleCards.length; i++) {
     renderedPostArray.push(
       <div className={css.card} key={i}>
         {React.cloneElement(otherArticleCards[i], {
-          displayType: type
+          displayType: type, darkmode: darkmode
         })}
       </div>
     );
@@ -108,13 +111,13 @@ export function renderPostArray(otherArticleCards, type) {
   return renderedPostArray;
 }
 
-export function renderVideoArray(otherArticleCards, type) {
+export function renderVideoArray(otherArticleCards, type, darkmode = false) {
   let renderedPostArray = [];
   for (let i = 0; i < otherArticleCards.length; i++) {
     renderedPostArray.push(
       <div className={css["video-card"]}>
         {React.cloneElement(otherArticleCards[i], {
-          displayType: type
+          displayType: type, darkmode: darkmode
         })}
       </div>
     );
@@ -122,13 +125,13 @@ export function renderVideoArray(otherArticleCards, type) {
   return renderedPostArray;
 }
 
-export function renderPodcastArray(otherArticleCards, type) {
+export function renderPodcastArray(otherArticleCards, type, darkmode = false) {
   let renderedPostArray = [];
   for (let i = 0; i < otherArticleCards.length; i++) {
     renderedPostArray.push(
       <div className={css["podcast-card"]}>
         {React.cloneElement(otherArticleCards[i], {
-          displayType: type
+          displayType: type, darkmode: darkmode
         })}
       </div>
     );
diff --git a/package.json b/package.json
index 7762c6e..3564fb9 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "next-plugin-transpile-modules": "^2.0.0",
     "react": "16.13.1",
     "react-dom": "16.11.0",
+    "react-icons": "^4.7.1",
     "react-infinite-scroller": "^1.2.4",
     "react-markdown": "^6.0.1",
     "react-masonry-component": "^6.2.1",
diff --git a/pages/[year]/[month]/[day]/[slug].jsx b/pages/[year]/[month]/[day]/[slug].jsx
index 2c52213..90bedfc 100644
--- a/pages/[year]/[month]/[day]/[slug].jsx
+++ b/pages/[year]/[month]/[day]/[slug].jsx
@@ -116,6 +116,7 @@ class Post extends Component {
         </Head>
         {this.props.feature == true && (
           <FeatureLayout
+            darkmode={this.props.darkmode}
             article={this.props.post[0]}
             authors={this.props.authors}
             tagged={this.props.tagged}
@@ -124,6 +125,7 @@ class Post extends Component {
         )}
         {this.props.oldGallery == true && (
           <PhotoGalleryLayout
+            darkmode={this.props.darkmode}
             post={this.props.post[0]}
             photos={this.props.photos}
             photographers={this.props.authors}
@@ -131,16 +133,18 @@ class Post extends Component {
         )}
         {this.props.gallery == true && (
           <PGalleryLayout
+            darkmode={this.props.darkmode}
             post={this.props.post[0]}
             authors={this.props.authors}
             galleryID={this.props.id}
             relatedPosts={this.props.relatedPosts}
           />
-        )}
+        )} 
         {this.props.photos == undefined &&
           this.props.feature != true &&
           this.props.gallery != true && (
             <ArticleLayout
+              darkmode={this.props.darkmode}
               article={this.props.post[0]}
               authors={this.props.authors}
               relatedPosts={this.props.relatedPosts}
diff --git a/pages/about.jsx b/pages/about.jsx
index ef151ec..61ef55f 100644
--- a/pages/about.jsx
+++ b/pages/about.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/advertise.jsx b/pages/advertise.jsx
index 3233b53..960449d 100644
--- a/pages/advertise.jsx
+++ b/pages/advertise.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/category/[slug].jsx b/pages/category/[slug].jsx
index e0c48e7..3b2f89a 100755
--- a/pages/category/[slug].jsx
+++ b/pages/category/[slug].jsx
@@ -66,11 +66,13 @@ class Category extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
         </div>
         <CategoryLayout
+          darkmode={this.props.darkmode}
           posts={this.props.posts}
           categoryID={this.props.category[0].id}
           classifieds={this.props.classifieds.map(c => {
diff --git a/pages/category/cartoons.jsx b/pages/category/cartoons.jsx
index b0b69e6..71407f9 100644
--- a/pages/category/cartoons.jsx
+++ b/pages/category/cartoons.jsx
@@ -69,12 +69,14 @@ class Cartoons extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
         </div>
         <MultimediaLayout
           posts={this.props.posts}
+          darkmode={this.props.darkmode}
           categoryID={this.props.category[0].id}
         />
       </div>
diff --git a/pages/category/graphics.jsx b/pages/category/graphics.jsx
index c93c895..ebb3aba 100644
--- a/pages/category/graphics.jsx
+++ b/pages/category/graphics.jsx
@@ -69,12 +69,14 @@ class Graphics extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
         </div>
         <MultimediaLayout
           posts={this.props.posts}
+          darkmode={this.props.darkmode}
           categoryID={this.props.category[0].id}
         />
       </div>
diff --git a/pages/category/illo.jsx b/pages/category/illo.jsx
index cb9febf..a804fbd 100644
--- a/pages/category/illo.jsx
+++ b/pages/category/illo.jsx
@@ -69,11 +69,13 @@ class Illo extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
         </div>
         <MultimediaLayout
+          darkmode={this.props.darkmode}
           posts={this.props.posts}
           categoryID={this.props.category[0].id}
         />
diff --git a/pages/category/podcasts.jsx b/pages/category/podcasts.jsx
index 0b89de9..9e43d2f 100755
--- a/pages/category/podcasts.jsx
+++ b/pages/category/podcasts.jsx
@@ -61,12 +61,14 @@ class Category extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
         </div>
         <PodcastsLayout
           posts={this.props.posts}
+          darkmode={this.props.darkmode}
           categoryID={this.props.category[0].id}
           classifieds={this.props.classifieds.map(c => {
             return {
diff --git a/pages/category/spectrum.jsx b/pages/category/spectrum.jsx
index bb0cb56..3fe3862 100644
--- a/pages/category/spectrum.jsx
+++ b/pages/category/spectrum.jsx
@@ -69,11 +69,13 @@ class Spectrum extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
         </div>
         <MultimediaLayout
+          darkmode={this.props.darkmode}
           posts={this.props.posts}
           categoryID={this.props.category[0].id}
         />
diff --git a/pages/category/video.jsx b/pages/category/video.jsx
index 1ffa1e6..2e3858a 100755
--- a/pages/category/video.jsx
+++ b/pages/category/video.jsx
@@ -61,6 +61,7 @@ class Category extends Component {
         </Head>
         <div style={{ padding: "6px" }}>
           <SectionHeader
+            darkmode={this.props.darkmode}
             category={this.props.category[0].name}
             subcategories={sectionLinks}
           />
@@ -68,6 +69,7 @@ class Category extends Component {
         <VideoLayout
           posts={this.props.posts}
           categoryID={this.props.category[0].id}
+          darkmode={this.props.darkmode}
           classifieds={this.props.classifieds.map(c => {
             return {
               category: {
diff --git a/pages/comment.jsx b/pages/comment.jsx
index 8ad7cdb..0018d0b 100644
--- a/pages/comment.jsx
+++ b/pages/comment.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/contact.jsx b/pages/contact.jsx
index 600e2f1..5acb132 100644
--- a/pages/contact.jsx
+++ b/pages/contact.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/editorial-board.jsx b/pages/editorial-board.jsx
index 81ae763..7ec7c50 100644
--- a/pages/editorial-board.jsx
+++ b/pages/editorial-board.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/index.jsx b/pages/index.jsx
index e2346a4..f395f67 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -202,6 +202,7 @@ class Index extends Component {
           /> 
         </Head>
         <HomeLayout
+          darkmode = {this.props.darkmode}
           posts={this.props.posts}
           media={this.props.multimediaPosts}
           classifieds={this.props.classifieds.map(c => {
@@ -217,12 +218,14 @@ class Index extends Component {
         />
         {this.state.showPopUp && !this.state.showWelcome ? (
           <EmailPopUp
+            darkmode={this.props.darkmode}
             sub2Newsletter={this.subscribeToNewsletter}
             close={this.closeNewsletterPopup}
           />
         ) : null}
         {this.state.showWelcome ? (
           <WelcomePopUp
+            darkmode={this.props.darkmode}
             bodytext="You're looking at the new dailybruin.com! Feel free to leave us some feedback by clicking the blue button at the bottom right. We appreciate it!"
             close={this.closeWelcomePopup}
           />
diff --git a/pages/page/[slug].jsx b/pages/page/[slug].jsx
index ae530d8..53f9b49 100644
--- a/pages/page/[slug].jsx
+++ b/pages/page/[slug].jsx
@@ -30,7 +30,7 @@ class Page extends Component {
               }}
             />
           </Head>
-          <PageLayout page={this.props.page[0]} />
+          <PageLayout page={this.props.page[0]} darkmode={this.props.darkmode}/>
         </div>
       );
   }
diff --git a/pages/post/[slug].jsx b/pages/post/[slug].jsx
index 95e08c5..198aa71 100644
--- a/pages/post/[slug].jsx
+++ b/pages/post/[slug].jsx
@@ -105,35 +105,46 @@ class Post extends Component {
           </title>
           {renderedMeta}
         </Head>
-        {this.props.feature == true && (
-          <FeatureLayout
-            article={this.props.post[0]}
-            authors={this.props.authors}
-            tagged={this.props.tagged}
-            relatedPosts={this.props.relatedPosts}
-          />
-        )}
-        {this.props.oldGallery == true && (
-          <PhotoGalleryLayout
-            post={this.props.post[0]}
-            photos={this.props.photos}
-            photographers={this.props.authors}
-          />
-        )}
-        {this.props.gallery == true && (
-          <PGalleryLayout
-            post={this.props.post[0]}
-            authors={this.props.authors}
-            galleryID={this.props.id}
-            relatedPosts={this.props.relatedPosts}
-          />
-        )}
-        {this.props.photos == undefined &&
-          this.props.feature != true &&
-          this.props.gallery != true && (
+
+        {
+          this.props.feature == true && (
+            <FeatureLayout
+              darkmode={this.props.darkmode}
+              article={this.props.post[0]}
+              authors={this.props.authors}
+              tagged={this.props.tagged}
+              relatedPosts={this.props.relatedPosts}
+            />
+          )
+        }
+        {
+          this.props.oldGallery == true && (
+            <PhotoGalleryLayout
+              darkmode={this.props.darkmode}
+              post={this.props.post[0]}
+              photos={this.props.photos}
+              photographers={this.props.authors}
+            />
+          )
+        }
+        {
+          this.props.gallery == true && (
+            <PGalleryLayout
+              darkmode={this.props.darkmode}
+              post={this.props.post[0]}
+              authors={this.props.authors}
+              galleryID={this.props.id}
+              relatedPosts={this.props.relatedPosts}
+            />
+          )
+        }
+        {
+          this.props.photos == undefined && this.props.feature != true && this.props.gallery != true && (
+
             <ArticleLayout
               article={this.props.post[0]}
               authors={this.props.authors}
+              darkmode={this.props.darkmode}
               relatedPosts={this.props.relatedPosts}
               classifieds={this.props.classifieds.map(c => {
                 return {
diff --git a/pages/privacy.jsx b/pages/privacy.jsx
index a318ac8..a51da14 100644
--- a/pages/privacy.jsx
+++ b/pages/privacy.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/records-requests.jsx b/pages/records-requests.jsx
index 984f531..a43f912 100644
--- a/pages/records-requests.jsx
+++ b/pages/records-requests.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/search.jsx b/pages/search.jsx
index e7ae238..b9ff900 100644
--- a/pages/search.jsx
+++ b/pages/search.jsx
@@ -39,7 +39,9 @@ class Search extends React.Component {
         <Head>
           <title>{`Search: ${decodeURIComponentSafe(this.props.q)} - Daily Bruin`}</title>
         </Head>
-        <SearchResults query={decodeURIComponentSafe(this.props.q)}></SearchResults>
+
+        <SearchResults darkmode={this.props.darkmode} query={decodeURI(this.props.q)}></SearchResults>
+
       </div>
     );
   }
diff --git a/pages/sponsored/[slug].jsx b/pages/sponsored/[slug].jsx
index 1f6b869..b3a0e62 100644
--- a/pages/sponsored/[slug].jsx
+++ b/pages/sponsored/[slug].jsx
@@ -56,6 +56,7 @@ class SponsoredPost extends Component {
         <SponsoredLayout
           article={this.props.post[0]}
           authors={this.props.authors}
+          darkmode={this.props.darkmode}
         />
       </>
     );
diff --git a/pages/staff.jsx b/pages/staff.jsx
index 7d27ba5..97f9c8f 100644
--- a/pages/staff.jsx
+++ b/pages/staff.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/stonewall.jsx b/pages/stonewall.jsx
index 8e6bee3..a7f57db 100644
--- a/pages/stonewall.jsx
+++ b/pages/stonewall.jsx
@@ -66,7 +66,7 @@ class Stonewall extends Component {
             display: block;
             padding: 10px 30px;
             box-shadow: ${globals.cardShadow};
-            background-color: #ffffff;
+            background-color: #fff;
             margin: 6px;
 
             .accordion {
@@ -76,7 +76,7 @@ class Stonewall extends Component {
 
             .accordion .accordion-navigation > a {
               background: none;
-              color: #222222 !important;
+              color: #222 !important;
               display: block;
               font-family: ${globals.bodyFont};
               font-size: 1.5rem;
diff --git a/pages/submit.jsx b/pages/submit.jsx
index 45b5f81..4629fc4 100644
--- a/pages/submit.jsx
+++ b/pages/submit.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/pages/tag/[slug].jsx b/pages/tag/[slug].jsx
index d3e66a3..2ffd31e 100644
--- a/pages/tag/[slug].jsx
+++ b/pages/tag/[slug].jsx
@@ -49,6 +49,7 @@ class Tag extends Component {
           <TagLayout
             tagID={this.props.tag[0].id}
             posts={this.props.posts}
+            darkmode={this.props.darkmode}
             classifieds={this.props.classifieds.map(c => {
               return {
                 category: {
diff --git a/pages/tag/usac-officer-evaluations-20-21.jsx b/pages/tag/usac-officer-evaluations-20-21.jsx
index c18db31..b0b1830 100644
--- a/pages/tag/usac-officer-evaluations-20-21.jsx
+++ b/pages/tag/usac-officer-evaluations-20-21.jsx
@@ -76,6 +76,7 @@ class USACOfficerEvaluations2021 extends React.Component {
         </Head>
         <div>
           <USACOfficerEvaluations2021Layout
+            darkmode={this.props.darkmode}
             posts={this.props.posts}
             tag={this.props.tag[0]}
           />
diff --git a/pages/the-daily-bruin-community-guide.jsx b/pages/the-daily-bruin-community-guide.jsx
index 9802047..ca253bf 100644
--- a/pages/the-daily-bruin-community-guide.jsx
+++ b/pages/the-daily-bruin-community-guide.jsx
@@ -12,7 +12,7 @@ class Page extends Component {
     return { page };
   }
   render() {
-    return <PageLayout page={this.props.page} />;
+    return <PageLayout darkmode={this.props.darkmode} page={this.props.page} />;
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index fe09f6f..2871229 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5318,6 +5318,11 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
+react-icons@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
+  integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
+
 react-infinite-scroller@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"