diff --git a/src/actions/SupportActions.js b/src/actions/SupportActions.js
index f4cfaf5..52b1bb2 100644
--- 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
index 6bff7ff..6887a5a 100644
--- 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(, 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
index 4ca3f07..f9bbc35 100644
--- 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 {
-
+
{this.state.isSupported ? : }
@@ -81,6 +92,10 @@ export default class App extends React.Component {
·{" "}
Fork us
+ {" "}
+ ·{" "}
+
+ {this.state.theme == "dark" ? "Toggle light theme 🌝" : "Toggle dark theme 🌚"}
diff --git a/src/index.styl b/src/index.styl
index 127e65f..129fb6d 100644
--- 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,6 +11,14 @@ 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) }
@@ -19,7 +26,13 @@ yellow = #DEAC11
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,7 +42,13 @@ h1 {
}
a {
- color: gray
+ color: var(--font-color)
+}
+
+pre {
+ color: var(--font-color)
+ font-family: monospace
+ margin: 1em auto
}
strong {
@@ -37,7 +56,7 @@ strong {
}
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,6 +256,10 @@ 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
@@ -226,12 +267,15 @@ small {
}
.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
index 15f5e45..f0dd62b 100644
--- 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')