website: add Dark Mode docs and example demo

website/src/docs/dashboard.md

@@ -11,11 +11,11 @@ tagline: "full-featured sleek UI with file previews, metadata editing, upload/pa
 `@uppy/dashboard` is a universal UI plugin for Uppy, offering several useful features:
 
 - Drag and drop, paste, select from local disk / my device
-- UI for the Webcam plugin and remote sources, such as Google Drive, Dropbox, Instagram (all optional, added via plugins)
-- File previews and info
+- UI for the Webcam plugin and remote sources, such as Google Drive, Dropbox, Instagram, Facebook and OneDrive (all optional, added via plugins)
+- Image previews
 - Metadata editor
-- Progress: total and for individual files
-- Ability to pause/resume or cancel (depending on uploader plugin) individual or all files
+- Upload progress
+- Ability to pause or cancel (depending on the uploader plugin) uploads
 
 ```js
 const Dashboard = require('@uppy/dashboard')
@@ -92,7 +92,8 @@ uppy.use(Dashboard, {
   onRequestCloseModal: () => this.closeModal(),
   showSelectedFiles: true,
   locale: defaultLocale,
-  browserBackButtonClose: false
+  browserBackButtonClose: false,
+  theme: 'light'
 })
 ```
 
@@ -360,6 +361,17 @@ strings: {
 
 Remove all children of the `target` element before mounting the Dashboard. By default, Uppy will append any UI to the `target` DOM element. This is the least dangerous option. However, there might be cases when you would want to clear the container element before placing Uppy UI in there (for example, to provide a fallback `<form>` that will be shown if Uppy or JavaScript is not available). Set `replaceTargetContent: true` to clear the `target` before appending.
 
+### `theme: 'light'`
+
+Uppy Dashboard supports “Dark Mode”. You can try it live on [the Dashboard example page](http://localhost:4000/examples/dashboard/).
+
+There are three options:
+- `light` — the default
+- `dark`
+- `auto` — will respect the user’s system settings and switch automatically
+
+![Uppy dark mode screenshot](/images/uppy-dashboard-dark-mar-2020.png)
+
 ## Methods
 
 ### `openModal()`

website/src/examples/dashboard/app.es6

@@ -80,7 +80,7 @@ function uppySetOptions () {
 
   window.uppy.getPlugin('Dashboard').setOptions({
     note: opts.restrictions ? 'Images and video only, 2–3 files, up to 1 MB' : '',
-    browserBackButtonClose: opts.browserBackButtonClose
+    theme: opts.darkMode ? 'dark' : 'light'
   })
 
   const GoogleDriveInstance = window.uppy.getPlugin('GoogleDrive')

website/src/examples/dashboard/app.html

@@ -6,15 +6,15 @@
     <li><label for="opts-DashboardInline"><input type="checkbox" id="opts-DashboardInline" checked/> Display inline</label></li>
     <li><label for="opts-autoProceed"><input type="checkbox" id="opts-autoProceed" checked/> Autoproceed</label></li>
     <li><label for="opts-restrictions"><input type="checkbox" id="opts-restrictions" checked/> Restrictions</label></li>
-    <li><label for="opts-browserBackButtonClose"><input type="checkbox" id="opts-browserBackButtonClose" checked/> Close on browser back button</label></li>
+    <li><label for="opts-darkMode"><input type="checkbox" id="opts-darkMode" checked/> Dark Mode</label></li>
   </ul>
   <ul>
     <li><label for="opts-Webcam"><input type="checkbox" id="opts-Webcam" checked/> Webcam</label></li>
     <li><label for="opts-GoogleDrive"><input type="checkbox" id="opts-GoogleDrive" checked/> Google Drive</label></li>
     <li><label for="opts-Dropbox"><input type="checkbox" id="opts-Dropbox" checked/> Dropbox</label></li>
     <li><label for="opts-Instagram"><input type="checkbox" id="opts-Instagram" checked/> Instagram</label></li>
-    <li id="facebook-checkbox"><label for="opts-Facebook"><input type="checkbox" id="opts-Facebook" checked/> Facebook</label></li>
-    <li id="onedrive-checkbox"><label for="opts-OneDrive"><input type="checkbox" id="opts-OneDrive" checked/> OneDrive</label></li>
+    <li><label for="opts-Facebook"><input type="checkbox" id="opts-Facebook" checked/> Facebook</label></li>
+    <li><label for="opts-OneDrive"><input type="checkbox" id="opts-OneDrive" checked/> OneDrive</label></li>
     <li><label for="opts-Url"><input type="checkbox" id="opts-Url" checked/> Url</label></li>
   </ul>
 
@@ -45,7 +45,7 @@
     Url: document.querySelector('#opts-Url'),
     autoProceed: document.querySelector('#opts-autoProceed'),
     restrictions: document.querySelector('#opts-restrictions'),
-    browserBackButtonClose: document.querySelector('#opts-browserBackButtonClose')
+    darkMode: document.querySelector('#opts-darkMode')
   }
 
   var defaultOpts = {
@@ -59,7 +59,7 @@
     Url: true,
     autoProceed: false,
     restrictions: false,
-    browserBackButtonClose: false
+    darkMode: true
   }
 
   // try to get options from localStorage, if its empty, set to defaultOpts