bw

src/script.js

@@ -163,6 +163,11 @@ const setBackgroundLinks = t => { t.style.backgroundColor = 'rgba(123, 123, 123,
 
 const getLink = e => e.target.parentElement.querySelectorAll('a.list-links')[0]
 
+upGrid.ondragleave = e => {
+  cancelDefault(e)
+  upGrid.style.display = 'none'
+}
+
 document.ondragenter = e => {
   if (isPicMode()) { return }
   cancelDefault(e)
@@ -181,10 +186,7 @@ document.ondragenter = e => {
   }
 }
 
-upGrid.ondragleave = e => {
+document.ondragend = e => resetBackgroundLinks()
-  cancelDefault(e)
-  upGrid.style.display = 'none'
-}
 
 document.ondragover = e => {
   cancelDefault(e)
@@ -365,6 +367,16 @@ function onPaste () {
   mvCall(root, dest + filename, onPaste)
 }
 
+// dark mode
+const darkMode = 'html, a { background-color: #2d3436; color: #dfe6e9; } .arrow, .icon-large-images { filter: invert(100%) !important; }'
+const extraCss = document.createElement('style')
+document.body.appendChild(extraCss);
+
+const currentMode = () => localStorage.getItem('colorMode')
+const setMode = () => { extraCss.innerHTML = currentMode() === 'dark' ? darkMode : '' }
+const toggleBWMode = () => localStorage.setItem('colorMode', currentMode() === 'dark' ? 'white' : 'dark') || setMode()
+setMode()
+
 // Kb handler
 let typedPath = ''
 let typedToken = null
@@ -402,7 +414,7 @@ document.body.addEventListener('keydown', e => {
       return prevent(e) || picsNav(false) || prevPage()
 
     case 'Escape':
-      return prevent(e) || picsOff()
+      return prevent(e) || resetBackgroundLinks() || picsOff()
   }
 
   // Ctrl keys
@@ -426,6 +438,9 @@ document.body.addEventListener('keydown', e => {
 
       case 'KeyD':
         return prevent(e) || isPicMode() || window.mkdirBtn()
+
+      case 'KeyB':
+        return prevent(e) || toggleBWMode()
     }
   }
 

src/style.css

@@ -1,3 +1,9 @@
+a {
+  text-decoration: none;
+  background-color: transparent !important;
+  /* border-bottom: .01em solid #dfe6e9; */
+}
+
 .icon {
   display: block;
   height: 16px;
@@ -75,7 +81,6 @@ h1 {
 }
 
 #progress {
-  background-color: white;
   width: 99%;
   left: 0.5%;
   right: 0.5%;
@@ -83,7 +88,6 @@ h1 {
   bottom: 0px;
   padding-bottom: 10px;
   max-height: 50%;
-  overflow-y: scroll;
   overflow-x: hidden;
 }
 
@@ -118,10 +122,9 @@ h1 {
   text-align: center;
   font-size: 4em;
   font-family: Helvetica;
-  background-color: white;
   color: green;
   opacity: 0.8;
-  backdrop-filter: grayscale(100%);
+  background-color: rgba(123, 123, 123, 0.2)
 }
 
 #pics {