feat: dark mode

styfle · Jan 1, 2023 · 15f02cc · 15f02cc
1 parent ede6243
commit 15f02cc
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/public/topguntocat.png b/public/topguntocat.png
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -210,7 +210,7 @@ const App = () => {
     <div className="App">
       <header className="App-header">
         <div className="App-logo">
-          <img src="/tentocats.jpg" width={200} alt="Tentocats" />
+          <img src="/topguntocat.png" width={200} alt="Topguntocat" />
           <h1>GitHub Contributions Chart Generator</h1>
           <h4>All your contributions in one image!</h4>
         </div>
@@ -222,12 +222,9 @@ const App = () => {
         {_renderGithubButton()}
         <footer>
           <p>
-            Not affiliated with GitHub Inc. Octocat illustration made by{" "}
-            <a
-              href="https://octodex.github.com/tentocat/"
-              rel="noopener nofollow"
-            >
-              GitHub design team
+            Not affiliated with GitHub Inc. Octocat illustration from{" "}
+            <a href="https://octodex.github.com/topguntocat/" target="_blank">
+              GitHub Octodex
             </a>
             .
           </p>

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -1,13 +1,45 @@
+:root {
+  --bg: #fff;
+  --header-bg: #f4f5f6;
+  --button-bg: #9b4dca;
+  --button-disabled: #cfd0d4;
+  --button-disabled-border: #cfd0d4;
+  --button-text: #fff;
+  --twitter-button-bg: rgb(0, 169, 237);
+  --text: #606c76;
+  --loading-text: #606c76;
+  --input-border: #d1d1d1;
+  --input-text: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111517;
+    --header-bg: rgb(22, 28, 30);
+    --text: rgb(164, 157, 145);
+    --input-border: rgb(55, 68, 75);
+    --button-disabled: rgb(42, 52, 57);
+    --button-disabled-border: var(--input-border);
+    --loading-text: #rgb(164, 157, 145);
+    --input-text: #fff;
+  }
+}
+
+html {
+  color: var(--text);
+  background-color: var(--bg);
+}
+
 .App {
   display: grid;
   grid-template-columns: 40rem 1fr;
   height: 100vh;
 }
 
 .App-header {
-  background-color: #f4f5f6;
+  background-color: var(--header-bg);
   min-height: 40rem;
-  color: #606c76;
+  color: var(--text);
   padding: 1rem;
   overflow-y: scroll;
 }
@@ -32,7 +64,7 @@
 }
 
 .App-loading {
-  color: #606c76;
+  color: var(--loading-text);
 }
 
 .App-result {
@@ -90,23 +122,25 @@ form {
 }
 
 input {
-  border: 0.1rem solid #d1d1d1;
+  border: 0.1rem solid var(--input-border);
   border-right: 0;
   border-radius: 0.4rem;
   padding: 0.6rem 1rem;
   height: 4rem;
   outline: none;
+  color: var(--input-text);
+  background-color: var(--bg);
 }
 
 button {
   height: 4rem;
   line-height: 4rem;
   padding: 0 1rem;
   white-space: nowrap;
-  background-color: #9b4dca;
-  border: 0.1rem solid #9b4dca;
+  background-color: var(--button-bg);
+  border: 0.1rem solid var(--button-bg);
   border-radius: 0.4rem;
-  color: #fff;
+  color: var(--button-text);
   font-size: 0.8em;
   outline: none;
   cursor: pointer;
@@ -118,8 +152,8 @@ button {
 }
 
 button:disabled {
-  background-color: #cfd0d4;
-  border: 0.1rem solid #cfd0d4;
+  background-color: var(--button-disabled);
+  border: 0.1rem solid var(--button-disabled-border);
   cursor: not-allowed;
 }
 
@@ -150,7 +184,7 @@ form button {
   min-height: 2rem;
   line-height: 2rem;
   margin: 0 1rem;
-  background-color: rgb(0, 169, 237);
+  background-color: var(--twitter-button-bg);
   border: 0;
 }
 
@@ -161,7 +195,7 @@ form button {
 }
 
 .App-themes {
-  border: 1px solid #cfd0d4;
+  border: 1px solid var(--button-disabled-border);
   border-radius: 0.4rem;
   margin-bottom: 1rem;
   padding: 1rem 1rem 2rem;
@@ -172,7 +206,7 @@ form button {
 }
 
 .App-themes h6 span {
-  background-color: #f4f5f6;
+  background-color: var(--header-bg);
   padding: 0 1rem;
 }
 
@@ -207,7 +241,7 @@ footer {
 }
 
 footer a {
-  color: #606c76;
+  color: var(--text);
   text-decoration: none;
 }