kern · holykol · Oct 1, 2020
diff --git a/src/actions/SupportActions.js b/src/actions/SupportActions.js
@@ -4,7 +4,8 @@ export default alt.createActions(class SupportActions {
   constructor() {
     this.generateActions(
       'isChrome',
-      'noSupport'
+      'noSupport',
+      'themeChange',
     )
   }
 })
diff --git a/src/client.js b/src/client.js
@@ -11,12 +11,20 @@ let bootstrap = document.getElementById("bootstrap").innerHTML;
 alt.bootstrap(bootstrap);
 
 window.FilePizza = () => {
-  ReactRouter.run(routes, ReactRouter.HistoryLocation, function(Handler) {
+  ReactRouter.run(routes, ReactRouter.HistoryLocation, function (Handler) {
     React.render(<Handler data={bootstrap} />, document);
   });
 
   if (!webrtcSupport.support) SupportActions.noSupport();
 
+  let theme = localStorage.getItem("theme")
+  if (theme != "") {
+    SupportActions.themeChange(theme)
+  } else {
+    let prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    SupportActions.themeChange(prefersDark ? "dark" : "light")
+  }
+
   let isChrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
   if (isChrome) SupportActions.isChrome();
 };
diff --git a/src/components/App.js b/src/components/App.js
@@ -3,6 +3,7 @@ import ErrorPage from "./ErrorPage";
 import FrozenHead from "react-frozenhead";
 import React from "react";
 import SupportStore from "../stores/SupportStore";
+import SupportActions from "../actions/SupportActions";
 import { RouteHandler } from "react-router";
 import ga from "react-google-analytics";
 
@@ -21,6 +22,16 @@ export default class App extends React.Component {
     };
   }
 
+  toggleTheme(e) {
+    e.preventDefault()
+
+    if (this.state.theme == "dark") {
+      SupportActions.themeChange("light")
+    } else {
+      SupportActions.themeChange("dark")
+    }
+  }
+
   componentDidMount() {
     SupportStore.listen(this._onChange);
   }
@@ -56,7 +67,7 @@ export default class App extends React.Component {
           <script src="/app.js" />
         </FrozenHead>
 
-        <body>
+        <body data-theme={this.state.theme}>
           <div className="container">
             {this.state.isSupported ? <RouteHandler /> : <ErrorPage />}
           </div>
@@ -81,6 +92,10 @@ export default class App extends React.Component {
               &middot;{" "}
               <a href="https://github.com/kern/filepizza" target="_blank">
                 Fork us
+              </a>{" "}
+              &middot;{" "}
+              <a href="#" onClick={this.toggleTheme.bind(this)}>
+                {this.state.theme == "dark" ? "Toggle light theme 🌝" : "Toggle dark theme 🌚"}
               </a>
             </p>
           </footer>

diff --git a/src/index.styl b/src/index.styl
@@ -2,7 +2,6 @@
 
 beige = #F9F2E7
 dark-gray = #333
-gray = #777
 green = #3F6B29
 light-blue = #40C0CB
 light-gray = #EEE
@@ -12,14 +11,28 @@ light-yellow = #FFE476
 red = #B11C17
 yellow = #DEAC11
 
+:root {
+    --font-color: #777;
+}
+
+[data-theme="dark"] {
+    --font-color: #ccc;
+}
+
 @keyframes rotate {
     from { transform: rotate(0deg) }
     to { transform: rotate(360deg) }
 }
 
 global-reset()
 * { box-sizing: border-box }
-html, body { height: 100% }
+html, body {
+    height: 100%
+    background-color: white
+    [data-theme="dark"] {
+        background-color: #1E1014
+    }
+}
 
 h1 {
     color: red;
@@ -29,15 +42,21 @@ h1 {
 }
 
 a {
-  color: gray
+  color: var(--font-color)
+}
+
+pre {
+  color: var(--font-color)
+  font-family: monospace
+  margin: 1em auto
 }
 
 strong {
     font-weight: bold
 }
 
 p {
-    color: gray;
+   color: var(--font-color)
     font: 18px/22px "Quicksand", sans-serif;
     text-align: center;
     margin: 0;
@@ -48,7 +67,7 @@ p {
 }
 
 small {
-    color: gray;
+   color: var(--font-color)
     font: 12px/22px "Quicksand", sans-serif;
     text-align: center;
     margin: 0;
@@ -61,14 +80,19 @@ small {
 .footer {
     width: 100%
     text-align: center
-    color: gray
+    color: var(--font-color)
     padding: 10px 0 10px
     position: fixed
     bottom: 0
     border-radius: 5px 5px 0 0
-    background white
+    background white;
     box-shadow 0 -2px 4px light-gray
 
+    [data-theme="dark"] & {
+        background: #1a1113;
+        box-shadow: 0 -2px 4px rgba(0,0,0,0.3)
+    }
+
     iframe {
       display: inline-block;
       vertical-align: bottom;
@@ -93,6 +117,8 @@ small {
     @media (max-width: 600px) {
         position: relative
     }
+
+
 }
 
 .page {
@@ -102,10 +128,13 @@ small {
     height: 100%;
     min-height: 640px;
     padding: 40px 0 80px;
+    background-color: white
+    [data-theme="dark"] & {
+        background-color: #1E1014
+    }
 }
 
 .drop-zone {
-
     .drop-zone-overlay {
         position: fixed
         top: 0
@@ -114,6 +143,7 @@ small {
         height: 100%
         background: rgba(0, 0, 0, 0.5)
         text-align: center
+        z-index: 10
 
         &:after {
             color: white
@@ -151,7 +181,7 @@ small {
         width: 300px
         height: 300px
         transition: transform 1s
-        z-index: -1
+        z-index: 1
 
         @media (max-width: 600px) {
             width: 150px
@@ -167,6 +197,7 @@ small {
     .spinner-image {
         display: block;
         width: 40%;
+        z-index: 2
     }
 
     .spinner-name {
@@ -178,6 +209,7 @@ small {
         white-space: nowrap
         margin-top: 10px
         text-shadow: 0 0 3px #333
+        z-index: 2
     }
 
     .spinner-size {
@@ -188,6 +220,7 @@ small {
         text-overflow: ellipsis
         white-space: nowrap
         text-shadow: 0 0 3px #333
+        z-index: 2
     }
 }
 
@@ -208,6 +241,10 @@ small {
         text-align: center
         width: 100%
         border-radius: 4px 4px 0 0
+        [data-theme="dark"] & {
+            background-color: #231717
+            color: white
+        }
     }
 
     .short-url {
@@ -219,19 +256,26 @@ small {
         width: 100%
         font: 14px/1 "Quicksand", sans-serif;
         border-radius: 0 0 4px 4px
+        [data-theme="dark"] & {
+            background-color: #2b1f22
+            color: var(--font-color)
+        }
 
         span {
             font: 14px/1 monospace
         }
     }
 
     .qr {
-      flex: none
-      padding-right: 40px
+        flex: none
+        padding-right: 40px
     }
 
     .urls {
-      flex: auto
+        flex: auto
+        [data-theme="dark"] & {
+            box-shadow: 0 1px 4px rgba(0,0,0,0.3)
+        }
     }
 
     img {
@@ -279,7 +323,7 @@ small {
 }
 
 .data {
-    color: gray
+    color: var(--font-color)
     font: 14px/20px "Quicksand", sans-serif
     text-align: center
     overflow: hidden
@@ -314,6 +358,16 @@ small {
     &:active {
         background: light-green
     }
+
+    [data-theme="dark"] & {
+        $shade = #cc4c00
+        background: #b62222
+        box-shadow: inset 0 1px 1px $shade
+        &:hover {
+            background: #d42828
+            box-shadow: inset 0 1px 1px lighten($shade, 10%)
+        }
+    }
 }
 
 .progress-bar {
@@ -343,8 +397,10 @@ small {
     }
 
     &.progress-bar-failed {
-        background: red
-        box-shadow: inset 0 1px 1px light-red
+        .progress-bar-inner {
+            background: red
+            box-shadow: inset 0 1px 1px light-red
+        }
 
         .progress-bar-text {
             text-align: center
@@ -375,18 +431,24 @@ small {
             line-height: 30px
         }
     }
+
+    [data-theme="dark"] & {
+        background: #1a0d11
+        box-shadow: inset 0 1px 4px rgba(0,0,0,0.6)
+    }
 }
 
 .select-file-label {
-    border: 2px solid gray
+    border: 2px solid #777
     border-radius: 4px
     padding: 2px 5px
     margin-top: 10px
-    background: light-gray
+    background: white
     display: inline-block
     cursor: pointer
     transition: all 0.25s ease
 
+
     &:hover, &:active {
         border-color: yellow
         background: white
@@ -397,6 +459,15 @@ small {
         position: fixed
         top: -1000px
     }
+
+    [data-theme="dark"] & {
+        background: #b62222
+        border-color: #701815
+        &:hover {
+            border-color: #c47732
+            color: white
+        }
+    }
 }
 
 .donate-button {

diff --git a/src/stores/SupportStore.js b/src/stores/SupportStore.js
@@ -7,6 +7,7 @@ export default alt.createStore(class SupportStore {
     this.bindActions(SupportActions)
     this.isSupported = true
     this.isChrome = false
+    this.theme = "light"
   }
 
   onNoSupport() {
@@ -17,4 +18,8 @@ export default alt.createStore(class SupportStore {
     this.isChrome = true
   }
 
+  onThemeChange(theme) {
+    localStorage.setItem("theme", theme)
+    this.theme = theme
+  }
 }, 'SupportStore')