Added dark-theme

<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>

      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

      }

    }

  }

}

  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;

<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>

    <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>

    <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>

    <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>

<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">

<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>

<template>

  <div id="paneSettings">

    <h3>Settings</h3>

    <appSettings/>

    <ul uk-accordion="multiple: true">

      <li>

        <a class="uk-accordion-title" href="#">Stream settings</a>

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 {

  components: {

    streamSettings,

    cameraSettings,

    microscopeSettings

    microscopeSettings,

    appSettings

  }

}