feat: add dark theme

jonyw4 · Nov 19, 2021 · ed4d32c · ed4d32c · vercel · Nov 19, 2021
1 parent bb08a8b
commit ed4d32c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/webapp/src/components/global/styles/global.css b/webapp/src/components/global/styles/global.css
@@ -4,13 +4,30 @@
   --color-grape: #F3E5F5;
   --color-purple: #AA00FF;
   --color-purple-darker: #311B92;
+  --color-white: #e9e9e9;
+}
+
+body[data-theme='light'] {
+  --background-color: var(--color-white);
+  --text-color: var(--color-black);
+  --link-color: var(--color-purple);
+  --link-visited-color: var(--color-purple-darker);
+  --selection-color: var(--color-grape);
+}
+
+body[data-theme='dark'] {
+  --background-color: var(--color-black);
+  --text-color: var(--color-white);
+  --link-color: var(--color-purple);
+  --link-visited-color: var(--color-purple);
+  --selection-color: var(--color-gray);
 }
 
 ::selection {
-  background: var(--color-grape);
+  background: var(--selection-color);
 }
 ::-moz-selection {
-  background: var(--color-grape);
+  background: var(--selection-color);
 }
 
 html {
@@ -22,22 +39,23 @@ body {
   font-weight: 400;
   font-size: 1.25rem;
   letter-spacing: 0.5px;
-  color: var(--color-gray);
+  color: var(--text-color);
+  background-color: var(--background-color);
   padding: 0px 1rem;
   max-width: 600px;
   margin: 0 auto !important;
 }
 
 a {
-  color: var(--color-purple);
+  color: var(--link-color);
 }
 
 a:hover {
   text-decoration: none;
 }
 
 a:visited {
-  color: var(--color-purple-darker);
+  color: var(--link-visited-color);
 }
 
 p {
@@ -50,11 +68,15 @@ strong {
 }
 
 h1, h2, h3, h4, h5, h6 {
+  color: var(--text-color);
   font-family: 'Kameron', serif;
   font-weight: 700;
   margin-top: 3rem;
   margin-bottom: 1.25rem;
-  color: var(--color-black);
+}
+
+small {
+  color: var(--text-color);
 }
 
 h1 {
@@ -78,12 +100,6 @@ h4 {
 h5 {
   margin: 0;
 }
-/* h3, h4, h5 {
-  font-family: 'Fira Sans', sans-serif;
-  font-weight: 200;
-  font-style: italic;
-  font-size: 1.5em;
-} */
 
 header {
   text-align: center;
@@ -104,7 +120,7 @@ footer {
 }
 
 header a, header a:visited, footer a, footer a:visited {
-  color: var(--color-gray);
+  color: var(--text-color);
 }
 
 article img {

diff --git a/webapp/src/pages/_document.tsx b/webapp/src/pages/_document.tsx
@@ -12,7 +12,7 @@ class MyDocument extends Document {
             rel="stylesheet"
           />
         </Head>
-        <body>
+        <body data-theme="dark">
           <Main />
           <NextScript />
         </body>