From 2d97314d339668ea9c332fb8c1b4e253bd68c68e Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Thu, 4 Nov 2021 14:22:03 -0400
Subject: [PATCH] dark mode without ability to switch

---
 .babelrc                      |   1 +
 components/comment.js         |  10 +-
 components/comment.module.css |   1 -
 components/comments-flat.js   |   3 +-
 components/footer.js          |  16 +-
 components/form.js            |   2 +-
 components/header.js          |  50 +++++-
 components/item-full.js       |   4 -
 components/lnqr.js            |   4 +-
 components/notifications.js   |   5 +-
 package-lock.json             | 323 ++++++++++++++++++++++++++++------
 package.json                  |   1 +
 pages/_app.js                 | 113 ++++++++++--
 pages/_document.js            |  30 ++++
 pages/invites/index.js        |   2 +-
 pages/top/[[...within]].js    |   7 +-
 styles/globals.scss           |   6 +-
 svgs/sun-fill.svg             |   1 +
 18 files changed, 482 insertions(+), 97 deletions(-)
 create mode 100644 pages/_document.js
 create mode 100644 svgs/sun-fill.svg

diff --git a/.babelrc b/.babelrc
index e5ef908d..90ee49fa 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,6 +3,7 @@
         "next/babel"
     ],
     "plugins": [
+        "styled-components",
         [
             "inline-react-svg",
             {
diff --git a/components/comment.js b/components/comment.js
index ee8e6d8f..2788f833 100644
--- a/components/comment.js
+++ b/components/comment.js
@@ -13,6 +13,7 @@ import { useMe } from './me'
 import CommentEdit from './comment-edit'
 import Countdown from './countdown'
 import { NOFOLLOW_LIMIT } from '../lib/constants'
+import styled from 'styled-components'
 
 function Parent ({ item, rootText }) {
   const ParentFrag = () => (
@@ -39,6 +40,10 @@ function Parent ({ item, rootText }) {
   )
 }
 
+const StyledComment = styled.div`
+  background-color: ${({ theme, includeParent }) => includeParent ? undefined : theme.commentBg};
+`
+
 export default function Comment ({
   item, children, replyOpen, includeParent,
   rootText, noComments, noReply
@@ -64,7 +69,8 @@ export default function Comment ({
   const op = item.root.user.name === item.user.name
 
   return (
-    <div
+    <StyledComment
+      includeParent={includeParent}
       ref={ref} className={includeParent ? '' : `${styles.comment} ${collapse ? styles.collapsed : ''}`}
     >
       <div className={`${itemStyles.item} ${styles.item}`}>
@@ -156,7 +162,7 @@ export default function Comment ({
             : null}
         </div>
       </div>
-    </div>
+    </StyledComment>
   )
 }
 
diff --git a/components/comment.module.css b/components/comment.module.css
index c0b7661e..406d53c9 100644
--- a/components/comment.module.css
+++ b/components/comment.module.css
@@ -69,7 +69,6 @@
 }
 
 .comment {
-    background-color: rgba(0, 0, 0, 0.03);
     border-radius: .4rem;
     padding-top: .5rem;
     padding-left: .2rem;
diff --git a/components/comments-flat.js b/components/comments-flat.js
index ed766a53..5c06ed91 100644
--- a/components/comments-flat.js
+++ b/components/comments-flat.js
@@ -1,7 +1,6 @@
 import { useQuery } from '@apollo/client'
 import { MORE_FLAT_COMMENTS } from '../fragments/comments'
 import Comment, { CommentSkeleton } from './comment'
-import styles from './notifications.module.css'
 import { useRouter } from 'next/router'
 import MoreFooter from './more-footer'
 
@@ -24,7 +23,7 @@ export default function CommentsFlat ({ variables, comments, cursor, ...props })
       {comments.map(item => (
         <div
           key={item.id}
-          className={styles.clickToContext}
+          className='clickToContext'
           onClick={() => {
             router.push({
               pathname: '/items/[id]',
diff --git a/components/footer.js b/components/footer.js
index 2106f28d..5f551e9d 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -8,6 +8,8 @@ import Github from '../svgs/github-fill.svg'
 import Twitter from '../svgs/twitter-fill.svg'
 import Link from 'next/link'
 
+import styled from 'styled-components'
+
 const ChatPopover = (
   <Popover>
     <Popover.Content style={{ fontWeight: 500, opacity: 0.5, fontSize: '.9rem' }}>
@@ -28,6 +30,16 @@ const ChatPopover = (
   </Popover>
 )
 
+const ContrastLink = styled.a`
+  color: ${({ theme }) => theme.color};
+  &:hover {
+    color: ${({ theme }) => theme.color};
+  }
+  & svg {
+    fill: ${({ theme }) => theme.color};
+  }
+`
+
 export default function Footer ({ noLinks }) {
   const query = gql`
     {
@@ -84,9 +96,9 @@ export default function Footer ({ noLinks }) {
             />
           </div>}
         <small>
-          <a className='text-dark d-inline-block' href='https://github.com/stackernews/stacker.news'>
+          <ContrastLink className='d-inline-block' href='https://github.com/stackernews/stacker.news'>
             This is free open source software<Github width={20} height={20} className='mx-1' />
-          </a>
+          </ContrastLink>
           <span className='d-inline-block text-muted'>
             made with sound love in Austin<Texas className='mx-1' width={20} height={20} />
             by<a href='https://twitter.com/k00bideh' className='text-twitter d-inline-block'><Twitter width={20} height={20} className='ml-1' />@k00bideh</a>
diff --git a/components/form.js b/components/form.js
index 08089b77..9c13c658 100644
--- a/components/form.js
+++ b/components/form.js
@@ -60,7 +60,7 @@ export function InputSkeleton ({ label }) {
   return (
     <BootstrapForm.Group>
       {label && <BootstrapForm.Label>{label}</BootstrapForm.Label>}
-      <div className='clouds form-control' />
+      <div className='form-control clouds' />
     </BootstrapForm.Group>
   )
 }
diff --git a/components/header.js b/components/header.js
index 00eb5aea..12a68d35 100644
--- a/components/header.js
+++ b/components/header.js
@@ -11,6 +11,39 @@ import { signOut, signIn, useSession } from 'next-auth/client'
 import { useLightning } from './lightning'
 import { useEffect, useState } from 'react'
 import { randInRange } from '../lib/rand'
+import styled from 'styled-components'
+import Sun from '../svgs/sun-fill.svg'
+
+const Brand = styled(Navbar.Brand)`
+  color: ${({ theme }) => theme.brandColor}
+`
+
+export const StyledNavbar = styled(Navbar).attrs(({ theme }) => ({
+  variant: theme.navbarVariant,
+  className: styles.navbar
+}))`
+  & .dropdown-menu {
+    background-color: ${({ theme }) => theme.body};
+    border: 1px solid ${({ theme }) => theme.borderColor};
+  }
+
+  & .dropdown-item {
+    color: ${({ theme }) => theme.dropdownItemColor};
+  }
+
+  & .dropdown-item:hover {
+    color: ${({ theme }) => theme.dropdownItemColorHover};
+  }
+
+  & .dropdown-item.active {
+    color: ${({ theme }) => theme.brandColor};
+    text-shadow: 0 0 10px var(--primary);
+  }
+
+  & .dropdown-divider {
+    border-top: 1px solid ${({ theme }) => theme.borderColor};
+  }
+`
 
 function WalletSummary ({ me }) {
   return `${me?.sats} \\ ${me?.stacked}`
@@ -90,9 +123,12 @@ export default function Header () {
                 <NavDropdown.Item href='https://bitcoinerjobs.co' target='_blank'>jobs</NavDropdown.Item>
               </div>
               <NavDropdown.Divider />
-              <Link href='/settings' passHref>
-                <NavDropdown.Item>settings</NavDropdown.Item>
-              </Link>
+              <div className='d-flex align-items-center'>
+                <Link href='/settings' passHref>
+                  <NavDropdown.Item>settings</NavDropdown.Item>
+                </Link>
+                <Sun className='fill-grey mr-3' />
+              </div>
               <NavDropdown.Divider />
               <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
             </NavDropdown>
@@ -128,16 +164,16 @@ export default function Header () {
   return (
     <>
       <Container className='px-sm-0'>
-        <Navbar className={styles.navbar}>
+        <StyledNavbar>
           <Nav
             className={styles.navbarNav}
             activeKey={path}
           >
             <Link href='/' passHref>
-              <Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
+              <Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Brand>
             </Link>
             <Link href='/' passHref>
-              <Navbar.Brand className={`${styles.brand} d-block d-sm-none`}>SN</Navbar.Brand>
+              <Brand className={`${styles.brand} d-block d-sm-none`}>SN</Brand>
             </Link>
             <Nav.Item className='d-md-flex d-none nav-dropdown-toggle'>
               <SplitButton
@@ -173,7 +209,7 @@ export default function Header () {
             </Nav.Item>
             <Corner />
           </Nav>
-        </Navbar>
+        </StyledNavbar>
       </Container>
     </>
   )
diff --git a/components/item-full.js b/components/item-full.js
index 790e4cea..c6c389c6 100644
--- a/components/item-full.js
+++ b/components/item-full.js
@@ -3,12 +3,8 @@ import Reply from './reply'
 import Comment from './comment'
 import Text from './text'
 import Comments from './comments'
-import { COMMENTS } from '../fragments/comments'
-import { ITEM_FIELDS } from '../fragments/items'
-import { gql, useQuery } from '@apollo/client'
 import styles from '../styles/item.module.css'
 import { NOFOLLOW_LIMIT } from '../lib/constants'
-import { useRouter } from 'next/router'
 import { useMe } from './me'
 import { Button } from 'react-bootstrap'
 
diff --git a/components/lnqr.js b/components/lnqr.js
index 38a959ac..bbf7c880 100644
--- a/components/lnqr.js
+++ b/components/lnqr.js
@@ -20,7 +20,7 @@ export default function LnQR ({ value, webLn, statusVariant, status }) {
 
   return (
     <>
-      <a className='d-block' href={qrValue}>
+      <a className='d-block p-3' style={{ background: 'white' }} href={qrValue}>
         <QRCode
           className='h-auto mw-100' value={qrValue} renderAs='svg' size={300}
         />
@@ -36,7 +36,7 @@ export default function LnQR ({ value, webLn, statusVariant, status }) {
 export function LnQRSkeleton ({ status }) {
   return (
     <>
-      <div className='h-auto w-100 clouds' style={{ paddingTop: 'min(300px, 100%)', maxWidth: '300px' }} />
+      <div className='h-auto w-100 clouds' style={{ paddingTop: 'min(300px + 2rem, 100%)', maxWidth: 'calc(300px + 2rem)' }} />
       <div className='mt-3 w-100'>
         <InputSkeleton />
       </div>
diff --git a/components/notifications.js b/components/notifications.js
index cdbc1d2a..b7da86d3 100644
--- a/components/notifications.js
+++ b/components/notifications.js
@@ -2,7 +2,6 @@ import { useQuery } from '@apollo/client'
 import Comment, { CommentSkeleton } from './comment'
 import Item from './item'
 import { NOTIFICATIONS } from '../fragments/notifications'
-import styles from './notifications.module.css'
 import { useRouter } from 'next/router'
 import MoreFooter from './more-footer'
 
@@ -10,7 +9,7 @@ function Notification ({ n }) {
   const router = useRouter()
   return (
     <div
-      className={styles.clickToContext}
+      className='clickToContext'
       onClick={() => {
         if (n.__typename === 'Reply' || !n.item.title) {
           router.push({
@@ -60,7 +59,7 @@ export default function Notifications ({ notifications, cursor, lastChecked, var
   return (
     <>
       {/* XXX we shouldn't use the index but we don't have a unique id in this union yet */}
-      <div className={styles.fresh}>
+      <div className='fresh'>
         {fresh.map((n, i) => (
           <Notification n={n} key={i} />
         ))}
diff --git a/package-lock.json b/package-lock.json
index 0b955fa7..16e553de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "remove-markdown": "^0.3.0",
         "sass": "^1.32.8",
         "secp256k1": "^4.0.2",
+        "styled-components": "^5.3.3",
         "swr": "^0.5.4",
         "webln": "^0.2.2",
         "yup": "^0.32.9"
@@ -158,7 +159,6 @@
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
       "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.14.5"
       },
@@ -170,7 +170,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz",
       "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.15.4",
         "jsesc": "^2.5.1",
@@ -180,11 +179,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
+      "dependencies": {
+        "@babel/types": "^7.16.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-function-name": {
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz",
       "integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-get-function-arity": "^7.15.4",
         "@babel/template": "^7.15.4",
@@ -198,7 +207,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz",
       "integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.15.4"
       },
@@ -210,7 +218,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz",
       "integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.15.4"
       },
@@ -218,6 +225,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+      "dependencies": {
+        "@babel/types": "^7.16.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
@@ -230,7 +248,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz",
       "integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.15.4"
       },
@@ -299,7 +316,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
       "integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.14.5",
         "@babel/parser": "^7.15.4",
@@ -313,7 +329,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz",
       "integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.14.5",
         "@babel/generator": "^7.15.4",
@@ -330,18 +345,40 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.15.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
-      "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
-      "dev": true,
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.9",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1838,6 +1875,25 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
+      "integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.15.4",
+        "@babel/helper-module-imports": "^7.15.4",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "node_modules/backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -2357,6 +2413,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001261",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001261.tgz",
@@ -2915,6 +2976,14 @@
         "node": "*"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
@@ -2930,6 +2999,16 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -4509,7 +4588,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -5529,7 +5607,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -7863,6 +7940,11 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
+    },
     "node_modules/postcss/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8916,6 +8998,11 @@
         "sha.js": "bin.js"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9022,7 +9109,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10049,6 +10135,35 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-4.0.1.tgz",
@@ -11675,7 +11790,6 @@
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
       "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.14.5"
       }
@@ -11684,18 +11798,24 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz",
       "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.15.4",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
       }
     },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
+      "requires": {
+        "@babel/types": "^7.16.0"
+      }
+    },
     "@babel/helper-function-name": {
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz",
       "integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==",
-      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.15.4",
         "@babel/template": "^7.15.4",
@@ -11706,7 +11826,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz",
       "integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.15.4"
       }
@@ -11715,11 +11834,18 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz",
       "integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.15.4"
       }
     },
+    "@babel/helper-module-imports": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+      "requires": {
+        "@babel/types": "^7.16.0"
+      }
+    },
     "@babel/helper-plugin-utils": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
@@ -11729,7 +11855,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz",
       "integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.15.4"
       }
@@ -11774,7 +11899,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
       "integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.14.5",
         "@babel/parser": "^7.15.4",
@@ -11785,7 +11909,6 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz",
       "integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.14.5",
         "@babel/generator": "^7.15.4",
@@ -11799,15 +11922,37 @@
       }
     },
     "@babel/types": {
-      "version": "7.15.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
-      "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
-      "dev": true,
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.9",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -11845,7 +11990,8 @@
     "@graphql-typed-document-node/core": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
-      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg=="
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==",
+      "requires": {}
     },
     "@grpc/grpc-js": {
       "version": "1.3.7",
@@ -12068,7 +12214,8 @@
     "@next/react-refresh-utils": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz",
-      "integrity": "sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q=="
+      "integrity": "sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==",
+      "requires": {}
     },
     "@next/swc-darwin-arm64": {
       "version": "11.1.2",
@@ -12187,7 +12334,8 @@
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
+      "requires": {}
     },
     "@restart/hooks": {
       "version": "0.3.27",
@@ -12543,7 +12691,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "agent-base": {
       "version": "5.1.1",
@@ -12732,7 +12881,8 @@
     "apollo-server-errors": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/apollo-server-errors/-/apollo-server-errors-2.5.0.tgz",
-      "integrity": "sha512-lO5oTjgiC3vlVg2RKr3RiXIIQ5pGXBFxYGGUkKDhTud3jMIhs+gel8L8zsEjKaKxkjHhCQAA/bcEfYiKkGQIvA=="
+      "integrity": "sha512-lO5oTjgiC3vlVg2RKr3RiXIIQ5pGXBFxYGGUkKDhTud3jMIhs+gel8L8zsEjKaKxkjHhCQAA/bcEfYiKkGQIvA==",
+      "requires": {}
     },
     "apollo-server-micro": {
       "version": "2.25.2",
@@ -12995,6 +13145,22 @@
         "svgo": "^2.0.3"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
+      "integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.15.4",
+        "@babel/helper-module-imports": "^7.15.4",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -13220,7 +13386,8 @@
     "bootstrap": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "requires": {}
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -13420,6 +13587,11 @@
         "map-obj": "^1.0.0"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-lite": {
       "version": "1.0.30001261",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001261.tgz",
@@ -13849,6 +14021,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-select": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
@@ -13861,6 +14038,16 @@
         "nth-check": "^2.0.0"
       }
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -15059,8 +15246,7 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "got": {
       "version": "6.7.1",
@@ -15762,8 +15948,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
@@ -16782,12 +16967,14 @@
     "next-plausible": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/next-plausible/-/next-plausible-2.1.3.tgz",
-      "integrity": "sha512-EyKvwYs+5zSPbjdsX8sWZs23LfwhsaDUMjdUitj07GADAuKwCM3w29LBmjhf0cp6QqZi79y3o76+fXVYutsyuw=="
+      "integrity": "sha512-EyKvwYs+5zSPbjdsX8sWZs23LfwhsaDUMjdUitj07GADAuKwCM3w29LBmjhf0cp6QqZi79y3o76+fXVYutsyuw==",
+      "requires": {}
     },
     "next-seo": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-4.28.1.tgz",
-      "integrity": "sha512-WZgwdM+UhpNF3A37zFllzmPhnOVJ9vYeYlc0n3Z/kYfz/QQgy8NEdncNNggS9dU4JD8xriaCcyknhy5OsrFsJw=="
+      "integrity": "sha512-WZgwdM+UhpNF3A37zFllzmPhnOVJ9vYeYlc0n3Z/kYfz/QQgy8NEdncNNggS9dU4JD8xriaCcyknhy5OsrFsJw==",
+      "requires": {}
     },
     "node-addon-api": {
       "version": "2.0.2",
@@ -17557,6 +17744,11 @@
         }
       }
     },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
+    },
     "preact": {
       "version": "10.5.14",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
@@ -17754,7 +17946,8 @@
         "ws": {
           "version": "7.5.5",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
-          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
+          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+          "requires": {}
         }
       }
     },
@@ -17937,7 +18130,8 @@
     "react-longpressable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-longpressable/-/react-longpressable-1.1.1.tgz",
-      "integrity": "sha512-Q8S7CzZVNmP123tHrMp0U0+/fgDEZCi5CpOGkabz3a2zQ0aek5IAizetxtxBAt1hQHHaAYynPHhtcSkLIkqEzQ=="
+      "integrity": "sha512-Q8S7CzZVNmP123tHrMp0U0+/fgDEZCi5CpOGkabz3a2zQ0aek5IAizetxtxBAt1hQHHaAYynPHhtcSkLIkqEzQ==",
+      "requires": {}
     },
     "react-markdown": {
       "version": "6.0.3",
@@ -18385,6 +18579,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -18465,8 +18664,7 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "space-separated-tokens": {
       "version": "1.1.5",
@@ -18666,13 +18864,15 @@
           "version": "16.0.2",
           "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-16.0.2.tgz",
           "integrity": "sha512-fx3f1rJDsl9bY7qzyX8SAtP8GBSk6MfXFaTfaGgk12aAYW4gJSyRm7dM790L6cbXv63fvjY4XeSzXnb4WM+SKw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "eslint-config-standard-jsx": {
           "version": "10.0.0",
           "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-10.0.0.tgz",
           "integrity": "sha512-hLeA2f5e06W1xyr/93/QJulN/rLbUVUmqTlexv9PRKHFwEC9ffJcH2LvJhMoEqYQBEYafedgGZXH2W8NUpt5lA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "eslint-plugin-import": {
           "version": "2.22.1",
@@ -19219,6 +19419,23 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "styled-jsx": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-4.0.1.tgz",
@@ -19266,7 +19483,8 @@
     "stylis-rule-sheet": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
+      "requires": {}
     },
     "subscriptions-transport-ws": {
       "version": "0.9.19",
@@ -19288,7 +19506,8 @@
         "ws": {
           "version": "7.5.5",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
-          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
+          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+          "requires": {}
         }
       }
     },
@@ -19888,7 +20107,8 @@
     "use-isomorphic-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ=="
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "requires": {}
     },
     "use-latest": {
       "version": "1.2.0",
@@ -20162,7 +20382,8 @@
     "ws": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.2.tgz",
-      "integrity": "sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw=="
+      "integrity": "sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw==",
+      "requires": {}
     },
     "xdg-basedir": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 870cadb3..13b484a1 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "remove-markdown": "^0.3.0",
     "sass": "^1.32.8",
     "secp256k1": "^4.0.2",
+    "styled-components": "^5.3.3",
     "swr": "^0.5.4",
     "webln": "^0.2.2",
     "yup": "^0.32.9"
diff --git a/pages/_app.js b/pages/_app.js
index f02f6795..3b9009ae 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -7,6 +7,86 @@ import PlausibleProvider from 'next-plausible'
 import { LightningProvider } from '../components/lightning'
 import { ItemActModal, ItemActProvider } from '../components/item-act'
 import getApolloClient from '../lib/apollo'
+import { createGlobalStyle, ThemeProvider } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.body};
+    color: ${({ theme }) => theme.color};
+  }
+
+  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
+    color: inherit;
+    background-color: ${({ theme }) => theme.inputBg};
+    border-color: ${({ theme }) => theme.borderColor};
+    border-bottom-color: ${({ theme }) => theme.inputBg};
+  }
+
+  .form-control {
+    background-color: ${({ theme }) => theme.inputBg};
+    color: ${({ theme }) => theme.color};
+    border-color: ${({ theme }) => theme.borderColor};
+  }
+
+  .form-control:focus {
+    background-color:  ${({ theme }) => theme.inputBg};
+    color: ${({ theme }) => theme.color};
+  }
+
+  .form-control:disabled, .form-control[readonly] {
+    background-color: ${({ theme }) => theme.inputBg};
+    border-color: ${({ theme }) => theme.borderColor};
+    opacity: 1;
+  }
+
+  .clickToContext {
+    border-radius: .4rem;
+    padding: .2rem 0;
+    cursor: pointer;
+  }
+
+  .clickToContext:hover {
+    background-color: ${({ theme }) => theme.clickToContextColor};
+  }
+
+  .fresh {
+    background-color: ${({ theme }) => theme.clickToContextColor};
+    border-radius: .4rem;
+  }
+
+  .modal-content {
+    background-color: ${({ theme }) => theme.body};
+    border-color: ${({ theme }) => theme.borderColor};
+  }
+`
+
+// const lightTheme = {
+//   body: 'linear-gradient(180deg, #f5f5f5, #f5f5f5, white)',
+//   color: '#212529',
+//   navbarVariant: 'light',
+//   inputBg: '#ffffff',
+//   navbarVariant: 'light',
+//   borderColor: 'rgb(255 255 255 / 50%)',
+//   dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
+//   dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
+//   commentBg: 'rgba(255, 255, 255, 0.04)',
+//   clickToContextColor: 'rgba(255, 255, 255, 0.08)',
+//   color: '#f8f9fa',
+//   brandColor: 'var(--primary) !important'
+// }
+
+const darkTheme = {
+  body: '#000000',
+  inputBg: '#000000',
+  navbarVariant: 'dark',
+  borderColor: 'rgb(255 255 255 / 50%)',
+  dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
+  dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
+  commentBg: 'rgba(255, 255, 255, 0.04)',
+  clickToContextColor: 'rgba(255, 255, 255, 0.08)',
+  color: '#f8f9fa',
+  brandColor: 'var(--primary) !important'
+}
 
 function MyApp ({ Component, pageProps: { session, ...props } }) {
   const client = getApolloClient()
@@ -27,21 +107,24 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
 
   return (
     <PlausibleProvider domain='stacker.news' trackOutboundLinks>
-      <Provider session={session}>
-        <ApolloProvider client={client}>
-          <MeProvider>
-            <LightningProvider>
-              <FundErrorProvider>
-                <FundErrorModal />
-                <ItemActProvider>
-                  <ItemActModal />
-                  <Component {...props} />
-                </ItemActProvider>
-              </FundErrorProvider>
-            </LightningProvider>
-          </MeProvider>
-        </ApolloProvider>
-      </Provider>
+      <ThemeProvider theme={darkTheme}>
+        <GlobalStyle />
+        <Provider session={session}>
+          <ApolloProvider client={client}>
+            <MeProvider>
+              <LightningProvider>
+                <FundErrorProvider>
+                  <FundErrorModal />
+                  <ItemActProvider>
+                    <ItemActModal />
+                    <Component {...props} />
+                  </ItemActProvider>
+                </FundErrorProvider>
+              </LightningProvider>
+            </MeProvider>
+          </ApolloProvider>
+        </Provider>
+      </ThemeProvider>
     </PlausibleProvider>
   )
 }
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 00000000..fc6cf475
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps (ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />)
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        )
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}
diff --git a/pages/invites/index.js b/pages/invites/index.js
index b5e61285..199a0278 100644
--- a/pages/invites/index.js
+++ b/pages/invites/index.js
@@ -126,7 +126,7 @@ function InviteList ({ name, invites }) {
     <div className='mt-4'>
       <AccordianItem
         show
-        headerColor='#212529'
+        headerColor='#6c757d'
         header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>{name}</div>} body={
           <div className={styles.invites}>{invites.map(invite => {
             return <Invite invite={invite} key={invite.id} active={name === 'active'} />
diff --git a/pages/top/[[...within]].js b/pages/top/[[...within]].js
index 4a0bbf28..d60df85b 100644
--- a/pages/top/[[...within]].js
+++ b/pages/top/[[...within]].js
@@ -3,9 +3,10 @@ import Items from '../../components/items'
 import { useRouter } from 'next/router'
 import { getGetServerSideProps } from '../../api/ssrApollo'
 import { MORE_ITEMS } from '../../fragments/items'
-import { Nav, Navbar } from 'react-bootstrap'
+import { Nav } from 'react-bootstrap'
 import styles from '../../components/header.module.css'
 import Link from 'next/link'
+import { StyledNavbar } from '../../components/header'
 
 export const getServerSideProps = getGetServerSideProps(MORE_ITEMS, { sort: 'top'})
 
@@ -15,7 +16,7 @@ export default function Index ({ data: { moreItems: { items, cursor } } }) {
 
   return (
     <Layout>
-      <Navbar className={styles.navbar}>
+      <StyledNavbar>
         <Nav
           className={styles.navbarNav}
           activeKey={path}
@@ -66,7 +67,7 @@ export default function Index ({ data: { moreItems: { items, cursor } } }) {
             </Link>
           </Nav.Item>
         </Nav>
-      </Navbar>
+      </StyledNavbar>
       <Items
         items={items} cursor={cursor}
         variables={{ sort: 'top', within: router.query?.within }} rank
diff --git a/styles/globals.scss b/styles/globals.scss
index 3c565459..a400149b 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -171,11 +171,11 @@ footer {
 
 
 .dropdown-item.active {
-  text-shadow: 0 0 10px #FADA5E;
+  text-shadow: 0 0 10px var(--primary);
 }
 
 .form-control:focus {
-  border-color: #fada5e;
+  border-color: var(--primary);
 }
 
 .btn-secondary,
@@ -222,7 +222,7 @@ footer {
 }
 
 .clouds {
-  background: url('/clouds.jpeg');
+  background-image: url('/clouds.jpeg') !important;
   background-color: grey;
   background-repeat: repeat;
   background-origin: content-box;
diff --git a/svgs/sun-fill.svg b/svgs/sun-fill.svg
new file mode 100644
index 00000000..7692776b
--- /dev/null
+++ b/svgs/sun-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
\ No newline at end of file