Added dark-theme

src/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <div id="app">
+  <div id="app" v-bind:class="handleTheme">
     <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
       <div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
         <div id="overlay-toggle">
           <a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
         </div>
-        <div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1">
+        <div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
           <panelLeft/>
         </div>
       </div>
@@ -81,6 +81,15 @@ export default {
       console.log("Triggered beforeunload")
       this.$root.$emit('globalTogglePreview', false)
     }
+  },
+
+  computed: {
+    handleTheme: function () {
+      return {
+        'uk-light': this.$store.state.globalSettings.darkMode,
+        'uk-background-secondary': this.$store.state.globalSettings.darkMode
+      }
+    }
   }
 
 }
@@ -123,6 +132,17 @@ body, html {
   border: 1px solid lightgray;
 }
 
+.uk-light .uk-icon-button {
+  background-color: rgb(52, 52, 52);
+}
+.uk-light .uk-icon-button:hover, .uk-light .uk-icon-button:focus {
+  background-color: rgb(70, 70, 70);
+}
+
+.uk-light .uk-card-default {
+  background: #222
+}
+
 .uk-disabled {
     pointer-events: none;
     opacity: 0.5;

src/components/paneDisplayComponents/galleryComponents/captureCard.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">
+	<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
 
     <div class="uk-card-media-top">
         
           <a class="lightbox-link" v-bind:href="imgURL" v-bind:data-caption="metadata.filename">
-            <img class="uk-width-1-1" v-bind:src="thumbURL" v-bind:alt="metadata.id" uk-img>
+            <img class="uk-width-1-1" v-bind:data-src="thumbURL" v-bind:alt="metadata.id" width="300" height="225" uk-img>
           </a>
 
     </div>
@@ -39,7 +39,7 @@
 
     <div v-bind:id="metadataModalID" uk-modal>
 
-      <div class="uk-modal-dialog uk-modal-body">
+      <div class="uk-modal-dialog uk-modal-body" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" >
           <button class="uk-modal-close-default" type="button" uk-close></button>
           <h2 class="uk-modal-title">{{ metadata.filename }}</h2>
           <p><b>Path: </b>{{ path }}</p>
@@ -56,7 +56,7 @@
 
     <div v-bind:id="tagModalID" uk-modal>
 
-      <form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" @submit.prevent="handleTagSubmit">
+      <form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" @submit.prevent="handleTagSubmit">
 
           <div class="uk-inline">
             <span class="uk-form-icon" uk-icon="icon: tag"></span>

src/components/paneDisplayComponents/galleryComponents/scanCard.vue

@@ -4,7 +4,7 @@
     <div class="uk-card-media-top">
 
       <a href="#" >
-        <img class="uk-width-1-1" v-bind:src="thumbnail" v-bind:alt="metadata.scan_id" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
+        <img class="uk-width-1-1" v-bind:data-src="thumbnail" v-bind:alt="metadata.scan_id" width="300" height="225" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
       </a>
 
     </div>

src/components/paneDisplayComponents/galleryDisplay.vue

@@ -1,15 +1,14 @@
 <template>
 	<div class="galleryDisplay uk-padding uk-padding-remove-top">
 
-    <nav class="uk-navbar-container navbar" uk-navbar="mode: click">
+    <nav class="uk-navbar-container uk-navbar-transparent navbar" uk-navbar="mode: click">
         <div class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom">
-
             <ul class="uk-navbar-nav">
               <li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
               <li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
               <li>
                 <a href="#">Filter</a>
-                <div class="uk-navbar-dropdown">
+                <div class="uk-navbar-dropdown" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }">
                   <ul class="uk-nav uk-navbar-dropdown-nav">
                     <form class="uk-form-stacked">
                       <div v-for="tag in allTags" :key="tag" class="uk-margin-small">
@@ -264,7 +263,8 @@ export default {
 
 <style scoped lang="less">
 .navbar {
-  background-color: #fff !important;
-  border-bottom: 1px solid #e5e5e5;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25)
 }
 </style>

src/components/paneSettings.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="paneSettings">
     
+    <h3>Settings</h3>
+    <appSettings/>
+
     <ul uk-accordion="multiple: true">
       <li>
         <a class="uk-accordion-title" href="#">Stream settings</a>
@@ -26,6 +29,7 @@
 import streamSettings from './paneSettingsComponents/streamSettings.vue'
 import microscopeSettings from './paneSettingsComponents/microscopeSettings.vue'
 import cameraSettings from './paneSettingsComponents/cameraSettings.vue'
+import appSettings from './paneSettingsComponents/appSettings.vue'
 
 // Export main app
 export default {
@@ -34,7 +38,8 @@ export default {
   components: {
     streamSettings,
     cameraSettings,
-    microscopeSettings
+    microscopeSettings,
+    appSettings
   }
 
 }

src/components/paneSettingsComponents/appSettings.vue

@@ -0,0 +1,46 @@
+<template>
+<div id="appSettings">
+
+  <p><label><input v-model="darkMode" class="uk-checkbox" type="checkbox"> Enable dark theme</label></p>
+
+</div>
+</template>
+
+<script>
+
+// Export main app
+export default {
+  name: 'appSettings',
+
+  data: function () {
+    return {}
+  },
+
+  mounted() {
+    // Try loading settings from localStorage. If null, don't change.
+    this.darkMode = this.getLocalStorageObj('darkMode') || this.darkMode
+  },
+
+  watch: {
+    darkMode(newdarkMode) {
+      console.log("Saving darkmode setting")
+      this.setLocalStorageObj('darkMode', this.darkMode)
+    }
+  },
+
+  computed: {
+    darkMode: {
+      get() {
+        return this.$store.state.globalSettings.darkMode;
+      },
+      set(value) {
+        this.$store.commit("changeSetting", ['darkMode', value]);
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="less">
+</style>

src/components/paneSettingsComponents/streamSettings.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="appSettings">
+<div id="streamSettings">
 
   <p><label><input v-model="disableStream" class="uk-checkbox" type="checkbox"> Disable live stream</label></p>
 
@@ -15,7 +15,7 @@
 
 // Export main app
 export default {
-  name: 'appSettings',
+  name: 'streamSettings',
 
   data: function () {
     return {}

src/store.js

@@ -18,7 +18,8 @@ export default new Vuex.Store({
     globalSettings: {
       disableStream: false,
       autoGpuPreview: false,
-      trackWindow: true
+      trackWindow: true,
+      darkMode: false
     }
   },