feat(UI): light theme

2021-04-03 11:21:58 +02:00 · 2021-04-03 11:21:58 +02:00 · 280697698e
parent 0783f8b57e
commit 280697698e
29 changed files with 799 additions and 265 deletions
--- a/.stylelintrc
+++ b/.stylelintrc
@ -8,7 +8,8 @@
    "stylelint-scss"
  ],
  "rules": {
-    "at-rule-no-unknown": null
+    "at-rule-no-unknown": null,
+    "no-descending-specificity": null
  },
  "syntax": "scss"
 }
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -1,5 +1,5 @@
 <template>
-   <div id="wrapper">
+   <div id="wrapper" :class="`theme-${applicationTheme}`">
      <TheTitleBar />
      <div id="window-content">
         <TheSettingBar />
@ -49,6 +49,7 @@ export default {
         isEditModal: 'application/isEditModal',
         isSettingModal: 'application/isSettingModal',
         connections: 'connections/getConnections',
+         applicationTheme: 'settings/getApplicationTheme',
         isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
      })
   },
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@ -71,7 +71,6 @@ export default {
 <style lang="scss">
 .context {
  display: flex;
-  color: $body-font-color;
  font-size: 16px;
  z-index: 400;
  justify-content: center;
@ -87,7 +86,6 @@ export default {
  .context-container {
    min-width: 100px;
    z-index: 10;
-    box-shadow: 0 0 2px 0 #000;
    padding: 0;
    background: #1d1d1d;
    border-radius: 0.1rem;
@ -111,14 +109,10 @@ export default {
        position: absolute;
        left: 100%;
        top: 0;
-        background: #1d1d1d;
-        box-shadow: 0 0 2px 0 #000;
        min-width: 100px;
      }

      &:hover {
-        background: $primary-color;
-
        .context-submenu {
          display: block;
          visibility: visible;
--- a/src/renderer/components/BaseTextEditor.vue
+++ b/src/renderer/components/BaseTextEditor.vue
@ -102,8 +102,6 @@ export default {

 <style lang="scss" scoped>
 .editor-wrapper {
-  border-bottom: 1px solid #444;
-
  .editor {
    width: 100%;
  }
@ -113,17 +111,4 @@ export default {
  display: inline-block;
  width: 17px;
 }
-
-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
-  background-color: #c9561a99;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
-  background-color: #c9571a33;
-  border: none;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
-  color: #e0d00c;
-}
 </style>
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@ -63,13 +63,11 @@ export default {

 <style lang="scss" scoped>
 .file-uploader {
-  border: 0.05rem solid $bg-color-light;
  border-radius: 0.1rem;
  height: 1.8rem;
  line-height: 1.2rem;
  display: flex;
  cursor: pointer;
-  background-color: $bg-color-gray;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
  position: relative;
  flex: 1 1 auto;
@ -80,8 +78,6 @@ export default {

  .file-uploader-message {
    display: flex;
-    border-right: 0.05rem solid $bg-color-light;
-    background-color: $bg-color;
  }

  .file-uploader-input {
@ -105,7 +101,6 @@ export default {
 :disabled {
  .file-uploader {
    cursor: not-allowed;
-    background-color: #151515;
    opacity: 0.5;
  }
 }
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@ -140,20 +140,29 @@
                        <div class="column col-12 h6 text-uppercase mb-2">
                           {{ $t('message.applicationTheme') }}
                        </div>
-                        <div class="column col-6 c-hand theme-block" :class="{'selected': applicationTheme === 'dark'}">
+                        <div
+                           class="column col-6 c-hand theme-block"
+                           :class="{'selected': applicationTheme === 'dark'}"
+                           @click="changeApplicationTheme('dark')"
+                        >
                           <img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
-                           <div class="theme-name">
+                           <div class="theme-name text-light">
                              <i class="mdi mdi-moon-waning-crescent mdi-48px" />
                              <div class="h6 mt-4">
                                 {{ $t('word.dark') }}
                              </div>
                           </div>
                        </div>
-                        <div class="column col-6 theme-block disabled" :class="{'selected': applicationTheme === 'light'}">
-                           <div class="theme-name">
+                        <div
+                           class="column col-6 c-hand theme-block"
+                           :class="{'selected': applicationTheme === 'light'}"
+                           @click="changeApplicationTheme('light')"
+                        >
+                           <img :src="require('@/images/light.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <div class="theme-name text-dark">
                              <i class="mdi mdi-white-balance-sunny mdi-48px" />
                              <div class="h6 mt-4">
-                                 {{ $t('word.light') }} (Coming)
+                                 {{ $t('word.light') }}
                              </div>
                           </div>
                        </div>
@ -352,6 +361,7 @@ ORDER BY
         changeLocale: 'settings/changeLocale',
         changeAutoComplete: 'settings/changeAutoComplete',
         changeLineWrap: 'settings/changeLineWrap',
+         changeApplicationTheme: 'settings/changeApplicationTheme',
         changeEditorTheme: 'settings/changeEditorTheme',
         updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
      }),
@ -415,7 +425,6 @@ ORDER BY
          top: 0;
          height: 100%;
          width: 100%;
-          text-shadow: 0 0 8px #000;
        }
      }
    }
--- a/src/renderer/components/ModalSettingsUpdate.vue
+++ b/src/renderer/components/ModalSettingsUpdate.vue
@ -92,9 +92,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss">
-.empty {
-  color: $body-font-color;
-}
-</style>
--- a/src/renderer/components/QueryEditor.vue
+++ b/src/renderer/components/QueryEditor.vue
@ -312,19 +312,6 @@ export default {
  width: 17px;
 }

-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
-  background-color: #c9561a99;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
-  background-color: #c9571a33;
-  border: none;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
-  color: #e0d00c;
-}
-
 .ace_gutter-cell.ace_breakpoint {
  &::before {
    content: '\F0403';
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@ -64,13 +64,11 @@ export default {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    background: $primary-color;
    padding: 0 0.2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
-    box-shadow: 0 0 1px 0 #000;

    .footer-elements {
      list-style: none;
@ -88,10 +86,6 @@ export default {
        &.footer-link {
          cursor: pointer;
          transition: background 0.2s;
-
-          &:hover {
-            background: rgba($color: #fff, $alpha: 0.1);
-          }
        }
      }
    }
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@ -36,6 +36,10 @@

      <div class="settingbar-bottom-elements">
         <ul class="settingbar-elements">
+            <li class="settingbar-element btn btn-link ex-tooltip">
+               <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
+               <span class="ex-tooltip-content">{{ $t('word.scratchpad') }}</span>
+            </li>
            <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
               <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
@ -117,9 +121,7 @@ export default {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
-    background: $bg-color-light;
    padding: 0;
-    box-shadow: 0 0 1px 0 #000;
    z-index: 9;

    .settingbar-top-elements {
@ -134,7 +136,6 @@ export default {

    .settingbar-bottom-elements {
      padding-top: 0.5rem;
-      background: $bg-color-light;
      z-index: 1;
    }

@ -162,7 +163,6 @@ export default {
        }

        &.selected {
-          border-left-color: $body-font-color;
          opacity: 1;
        }

@ -171,12 +171,10 @@ export default {
            bottom: -10px;
            right: 0;
            position: absolute;
-            background: $success-color;
          }

          &.badge-update::after {
            bottom: initial;
-            background: $primary-color;
          }
        }
      }
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@ -102,12 +102,10 @@ export default {
    display: flex;
    position: relative;
    justify-content: space-between;
-    background: $bg-color-light;
    align-items: center;
    height: $titlebar-height;
    -webkit-app-region: drag;
    user-select: none;
-    box-shadow: 0 0 1px 0 #000;
    z-index: 9999;

    .titlebar-resizer {
@ -149,11 +147,6 @@ export default {

        &:hover {
          opacity: 1;
-          background: rgba($color: #fff, $alpha: 0.2);
-        }
-
-        &.close-button:hover {
-          background: red;
        }
      }
    }
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@ -304,7 +304,6 @@ export default {
    height: calc(100vh - #{$excluding-size});

    .tab-block {
-      background: $bg-color-light;
      margin-top: 0;
      flex-direction: row;
      align-items: flex-start;
@ -324,7 +323,6 @@ export default {

        > a {
          padding: 0.2rem 0.8rem;
-          color: $body-font-color;
          cursor: pointer;
          display: flex;
          align-items: center;
@ -355,7 +353,6 @@ export default {

        &.tools-dropdown {
          .tab-link:focus {
-            color: $primary-color;
            opacity: 1;
            outline: 0;
            box-shadow: none;
@ -374,11 +371,6 @@ export default {
              white-space: nowrap;
              border: 0;

-              &:hover {
-                color: $primary-color;
-                background: $bg-color-gray;
-              }
-
              .tool-icon {
                line-height: 1;
                display: inline-block;
@ -414,11 +406,9 @@ export default {
      .th {
        position: sticky;
        top: 0;
-        background: $bg-color;
        border: 1px solid;
        border-left: none;
        border-bottom-width: 2px;
-        border-color: $bg-color-light;
        padding: 0;
        font-weight: 700;
        font-size: 0.7rem;
@ -433,7 +423,6 @@ export default {
      .td {
        border-right: 1px solid;
        border-bottom: 1px solid;
-        border-color: $bg-color-light;
        padding: 0 0.4rem;
        text-overflow: ellipsis;
        max-width: 200px;
@ -443,8 +432,6 @@ export default {
        position: relative;

        &:focus {
-          box-shadow: inset 0 0 0 1px $body-font-color;
-          background: rgba($color: #000, $alpha: 0.3);
          outline: none;
        }
      }
--- a/src/renderer/components/WorkspaceConnectPanel.vue
+++ b/src/renderer/components/WorkspaceConnectPanel.vue
@ -1,6 +1,6 @@
 <template>
   <div class="columns">
-      <div class="column col-12 empty text-light">
+      <div class="column col-12 empty">
         <div class="empty-icon">
            <i class="mdi mdi-48px mdi-power-plug-off" />
         </div>
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@ -460,8 +460,6 @@ export default {
    justify-content: flex-start;
    align-items: center;
    text-align: left;
-    background: $bg-color-gray;
-    box-shadow: 0 0 1px 0 #000;
    z-index: 8;
    flex: initial;
    position: relative;
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@ -171,7 +171,8 @@ export default {
      ...mapGetters({
         getLoadedSchemas: 'workspaces/getLoadedSchemas',
         getWorkspace: 'workspaces/getWorkspace',
-         getSearchTerm: 'workspaces/getSearchTerm'
+         getSearchTerm: 'workspaces/getSearchTerm',
+         applicationTheme: 'settings/getApplicationTheme'
      }),
      searchTerm () {
         return this.getSearchTerm(this.connection.uid);
@ -239,7 +240,10 @@ export default {
      },
      piePercentage (val) {
         const perc = val / this.maxSize * 100;
-         return { background: `conic-gradient(lime ${perc}%, white 0)` };
+         if (this.applicationTheme === 'dark')
+            return { background: `conic-gradient(lime ${perc}%, white 0)` };
+         else
+            return { background: `conic-gradient(teal ${perc}%, silver 0)` };
      },
      setBreadcrumbs (payload) {
         if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
@ -262,7 +266,6 @@ export default {
  .database-name {
    position: sticky;
    top: 0;
-    background: $bg-color-gray;
    z-index: 2;
  }

@ -308,26 +311,15 @@ export default {
  .database-name,
  .misc-name {
    &:hover {
-      color: $body-font-color;
-      background: $bg-color-light;
      border-radius: 2px;
    }
  }

-  a.table-name {
-    &:hover {
-      color: inherit;
-      background: inherit;
-    }
-  }
-
  .menu-item {
    line-height: 1.2;
    position: relative;

    &:hover {
-      color: $body-font-color;
-      background: rgba($color: #fff, $alpha: 0.05);
      border-radius: 2px;
    }
  }
--- a/src/renderer/components/WorkspacePropsForeignModal.vue
+++ b/src/renderer/components/WorkspacePropsForeignModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmForeignsChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="foreign in foreignProxy"
                        :key="foreign._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-foreign': selectedForeignID === foreign._id}"
+                        :class="{'selected-element': selectedForeignID === foreign._id}"
                        @click="selectForeign($event, foreign._id)"
                     >
                        <div class="tile-icon">
@ -371,23 +372,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-foreign {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 80px;
  overflow: auto;
--- a/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmParametersChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="param in parametersProxy"
                        :key="param._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-param': selectedParam === param._id}"
+                        :class="{'selected-element': selectedParam === param._id}"
                        @click="selectParameter($event, param._id)"
                     >
                        <div class="tile-icon">
@ -249,23 +250,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-param {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 300px;
  overflow: auto;
--- a/src/renderer/components/WorkspacePropsIndexesModal.vue
+++ b/src/renderer/components/WorkspacePropsIndexesModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmIndexesChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="index in indexesProxy"
                        :key="index._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-index': selectedIndexID === index._id}"
+                        :class="{'selected-element': selectedIndexID === index._id}"
                        @click="selectIndex($event, index._id)"
                     >
                        <div class="tile-icon">
@ -256,23 +257,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-index {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 300px;
  overflow: auto;
--- a/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmParametersChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="param in parametersProxy"
                        :key="param._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-param': selectedParam === param._id}"
+                        :class="{'selected-element': selectedParam === param._id}"
                        @click="selectParameter($event, param._id)"
                     >
                        <div class="tile-icon">
@ -280,23 +281,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-param {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 300px;
  overflow: auto;
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@ -232,7 +232,6 @@ export default {
        .btn {
          display: flex;
          align-self: center;
-          color: $body-font-color;
          margin-right: 0.4rem;
        }
      }
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@ -289,10 +289,6 @@ export default {
 .export-dropdown {
  .menu {
    min-width: 100%;
-
-    .menu-item a:hover {
-      background: $bg-color-gray;
-    }
  }
 }
 </style>
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@ -101,7 +101,8 @@ module.exports = {
      tools: 'Tools',
      variables: 'Variables',
      processes: 'Processes',
-      database: 'Database'
+      database: 'Database',
+      scratchpad: 'Scratchpad'
   },
   message: {
      appWelcome: 'Welcome to Antares SQL Client!',
--- a/src/renderer/images/light.png
+++ b/src/renderer/images/light.png
--- a/src/renderer/scss/_fake-tables.scss
+++ b/src/renderer/scss/_fake-tables.scss
@ -27,7 +27,6 @@

  .td,
  .th {
-    border-bottom: $border-width solid $border-color;
    padding: $unit-3 $unit-2;
    display: table-cell;
  }
@ -35,37 +34,4 @@
  .th {
    border-bottom-width: $border-width-lg;
  }
-
-  &,
-  &.table-striped {
-    .tbody {
-      .tr {
-        &.selected {
-          background: #333 !important;
-        }
-
-        &.active {
-          background: $bg-color-dark;
-        }
-      }
-    }
-  }
-
-  &.table-hover {
-    .tbody {
-      .tr {
-        &:hover {
-          background: $bg-color-dark;
-        }
-      }
-    }
-  }
-
-  &.table-striped {
-    .tbody {
-      .tr:nth-of-type(odd) {
-        background: $bg-color;
-      }
-    }
-  }
 }
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@ -1,9 +1,12 @@
 /* Colors */
-$body-bg: #1d1d1d;
-$body-font-color: #fff;
-$bg-color: #1d1d1d;
-$bg-color-light: #3f3f3f;
+$body-bg: #fdfdfd;
+$body-bg-dark: #1d1d1d;
+$body-font-color-dark: #fff;
+$bg-color-dark: #1d1d1d;
+$bg-color-light-dark: #3f3f3f;
 $bg-color-gray: #272727;
+$bg-color-light-gray: #f1f1f1;
+$light-color: #fdfdfd;
 $primary-color: #e36929;
 $success-color: #32b643;
 $error-color: #de3b28;
@ -14,8 +17,8 @@ $number-color: cornflowerblue;
 $date-color: coral;
 $bit-color: lightskyblue;
 $blob-color: darkorchid;
-$array-color: greenyellow;
-$enum-color: gold;
+$array-color: yellowgreen;
+$enum-color: goldenrod;
 $unknown-color: gray;

 /* Sizes */
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@ -6,6 +6,8 @@
@import "fake-tables";
@import "mdi-additions";
@import "db-icons";
+@import "themes/dark-theme";
+@import "themes/light-theme";
@import "~spectre.css/src/spectre";
@import "~spectre.css/src/spectre-exp";

@ -19,27 +21,6 @@ body {
@include padding-variant(3, $unit-3);
@include padding-variant(4, $unit-4);

-.btn {
-  &.btn-gray {
-    color: #fff;
-    background: $bg-color-gray;
-
-    &:hover {
-      background: $bg-color;
-    }
-  }
-
-  &.btn-dark {
-    color: #fff;
-    background: $bg-color-light;
-    border-color: $bg-color-light;
-
-    &:hover {
-      background: $bg-color-gray;
-    }
-  }
-}
-
 .p-vcentered {
  display: flex !important;
  align-items: center;
@ -55,15 +36,6 @@ body {
  box-shadow: none !important;
 }

-.bg-checkered {
-  background-image:
-    linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
-    linear-gradient(to right, black 50%, white 50%),
-    linear-gradient(to bottom, black 50%, white 50%);
-  background-blend-mode: normal, difference, normal;
-  background-size: 2em 2em;
-}
-
 .workspace-tabs {
  align-content: baseline;

@ -80,13 +52,14 @@ body {
        .btn {
          display: flex;
          align-self: center;
-          color: $body-font-color;
          margin-right: 0.4rem;
        }
      }

      .workspace-query-info {
        display: flex;
+        overflow: hidden;
+        white-space: nowrap;

        > div + div {
          padding-left: 0.6rem;
@ -106,18 +79,6 @@ body {
  height: 10px;
 }

-::-webkit-scrollbar-track {
-  background: $bg-color-light;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba($color: #fff, $alpha: 0.5);
-
-  &:hover {
-    background: rgba($color: #fff, $alpha: 1);
-  }
-}
-
 // Animations
@keyframes rotation {
  from {
@ -135,32 +96,21 @@ body {

 /* Override */
 .modal {
-  .modal-overlay,
-  &.active .modal-overlay {
-    background: rgba(255, 255, 255, 0.15);
-  }
-
  .modal-container,
  .modal-sm .modal-container {
-    box-shadow: 0 0 1px 0 #000;
    padding: 0;
-    background: $bg-color;

    .modal-header {
      padding: 0.4rem 0.8rem;
      text-transform: uppercase;
-      background: $bg-color-gray;
      display: flex;
      justify-content: space-between;
      align-items: center;
-      color: #fff;
    }
  }
 }

 .tab {
-  border-color: #272727;
-
  .tab-item {
    .btn-clear {
      margin-top: -0.1rem;
@ -192,34 +142,11 @@ body {
  }
 }

-.form-select,
-.form-input,
-.form-select:not([multiple]):not([size]),
-.form-checkbox .form-icon,
-.form-radio .form-icon {
-  border-color: $bg-color-light;
-  background-color: $bg-color-gray;
-}
-
-.form-input.is-error,
-.form-select.is-error {
-  background-color: $bg-color-gray;
-}
-
-.form-input:not(:placeholder-shown):invalid:focus {
-  background: $bg-color-gray;
-}
-
-.form-select:not([multiple]):not([size]):focus {
-  border-color: $primary-color;
-}
-
 .form-input[type="file"] {
  overflow: hidden;
 }

 .input-group .input-group-addon {
-  border-color: #3f3f3f;
  z-index: 1;
 }

@ -243,7 +170,3 @@ body {
    visibility: hidden;
  }
 }
-
-.empty {
-  color: $body-font-color;
-}
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@ -0,0 +1,435 @@
+.theme-dark {
+  color: $body-font-color-dark;
+  background: $body-bg-dark;
+
+  ::-webkit-scrollbar-track {
+    background: $bg-color-light-dark;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba($color: #fff, $alpha: 0.5);
+
+    &:hover {
+      background: rgba($color: #fff, $alpha: 1);
+    }
+  }
+
+  :disabled {
+    .file-uploader {
+      background-color: #151515;
+    }
+  }
+
+  // Override Spectre.css
+  .menu {
+    background: $bg-color-light-dark;
+
+    .menu-item a {
+      &:hover {
+        color: $primary-color;
+        background: $bg-color-gray;
+      }
+    }
+  }
+
+  .btn {
+    &.btn-link {
+      color: rgba($body-font-color-dark, 0.8);
+
+      &:hover {
+        color: $body-font-color-dark;
+      }
+    }
+
+    &.btn-gray {
+      color: #fff;
+      background: $bg-color-gray;
+
+      &:hover {
+        background: $bg-color-dark;
+      }
+    }
+
+    &.btn-dark {
+      color: #fff;
+      background: $bg-color-light-dark;
+      border-color: $bg-color-light-dark;
+
+      &:hover {
+        background: $bg-color-gray;
+      }
+    }
+  }
+
+  .modal {
+    .modal-overlay,
+    &.active .modal-overlay {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .modal-container,
+    .modal-sm .modal-container {
+      box-shadow: 0 0 1px 0 #000;
+      background: $bg-color-dark;
+
+      .modal-header {
+        background: $bg-color-gray;
+        color: #fff;
+      }
+    }
+  }
+
+  .tab {
+    border-color: #272727;
+  }
+
+  .form-select,
+  .form-input,
+  .form-select:not([multiple]):not([size]),
+  .form-checkbox .form-icon,
+  .form-radio .form-icon {
+    border-color: $bg-color-light-dark;
+    background-color: $bg-color-gray;
+    color: $body-font-color-dark;
+  }
+
+  .form-input.is-error,
+  .form-select.is-error {
+    background-color: $bg-color-gray;
+  }
+
+  .form-input:not(:placeholder-shown):invalid:focus {
+    background: $bg-color-gray;
+  }
+
+  .form-select:not([multiple]):not([size]):focus {
+    border-color: $primary-color;
+  }
+
+  .input-group .input-group-addon {
+    border-color: #3f3f3f;
+    background: $bg-color-dark;
+  }
+
+  .empty {
+    color: $body-font-color-dark;
+    background: transparent;
+  }
+
+  .form-switch .form-icon::before {
+    background: $bg-color-light-dark;
+  }
+
+  // Antares
+  .workspace {
+    .workspace-explorebar {
+      background: $bg-color-gray;
+      box-shadow: 0 0 1px 0 #000;
+
+      .workspace-explorebar-database {
+        .database-name {
+          background: $bg-color-gray;
+        }
+
+        .database-name,
+        .misc-name {
+          &:hover {
+            color: $body-font-color-dark;
+            background: $bg-color-light-dark;
+          }
+        }
+
+        a.table-name {
+          &:hover {
+            color: inherit;
+            background: inherit;
+          }
+        }
+
+        .menu-item {
+          &:hover {
+            color: $body-font-color-dark;
+            background: rgba($color: #fff, $alpha: 0.05);
+          }
+        }
+      }
+    }
+
+    .workspace-query-results {
+      .table {
+        .th {
+          background: $bg-color-dark;
+          border-color: $bg-color-light-dark;
+        }
+
+        .td {
+          border-color: $bg-color-light-dark;
+
+          &:focus {
+            box-shadow: inset 0 0 0 1px $body-font-color-dark;
+            background: rgba($color: #000, $alpha: 0.3);
+          }
+        }
+      }
+    }
+
+    .workspace-tabs {
+      .tab-block {
+        background: $bg-color-light-dark;
+
+        .tab-item {
+          > a {
+            color: $body-font-color-dark;
+          }
+
+          & &.tools-dropdown {
+            .tab-link:focus {
+              color: $primary-color;
+            }
+
+            .menu {
+              .menu-item a {
+                &:hover {
+                  color: $primary-color;
+                  background: $bg-color-gray;
+                }
+              }
+            }
+          }
+        }
+
+        .workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
+          color: $body-font-color-dark;
+        }
+      }
+    }
+  }
+
+  .bg-checkered {
+    background-image:
+      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
+      linear-gradient(to right, black 50%, white 50%),
+      linear-gradient(to bottom, black 50%, white 50%);
+    background-blend-mode: normal, difference, normal;
+    background-size: 2em 2em;
+  }
+
+  .context {
+    color: $body-font-color-dark;
+
+    .context-container {
+      box-shadow: 0 0 2px 0 #000;
+      background: #1d1d1d;
+
+      .context-element {
+        .context-submenu {
+          background: #1d1d1d;
+          box-shadow: 0 0 2px 0 #000;
+        }
+
+        &:hover {
+          background: $primary-color;
+        }
+      }
+    }
+  }
+
+  .editor-wrapper {
+    border-bottom: 1px solid #444;
+  }
+
+  .file-uploader {
+    border: 0.05rem solid $bg-color-light-dark;
+    background-color: $bg-color-gray;
+
+    .file-uploader-message {
+      border-right: 0.05rem solid $bg-color-light-dark;
+      background-color: $bg-color-dark;
+    }
+  }
+
+  .tile {
+    &:hover {
+      background: $bg-color-light-dark;
+    }
+
+    &.selected-element {
+      background: $bg-color-light-dark;
+    }
+  }
+
+  .editor-col {
+    border-left: 2px solid $bg-color-light-dark;
+  }
+
+  .table {
+    .td,
+    .th {
+      border-bottom: $border-width solid $border-color;
+    }
+
+    &,
+    &.table-striped {
+      .tbody {
+        .tr {
+          &.selected {
+            background: #333 !important;
+          }
+
+          &.active {
+            background: $bg-color-dark;
+          }
+        }
+      }
+    }
+
+    &.table-hover {
+      .tbody {
+        .tr {
+          &:hover {
+            background: #151515;
+          }
+        }
+      }
+    }
+
+    &.table-striped {
+      .tbody {
+        .tr:nth-of-type(odd) {
+          background: $bg-color;
+        }
+      }
+    }
+  }
+
+  #titlebar {
+    background: $bg-color-light-dark;
+    box-shadow: 0 0 1px 0 #000;
+
+    .titlebar-elements {
+      .titlebar-element {
+        &:hover {
+          opacity: 1;
+          background: rgba($color: #fff, $alpha: 0.2);
+        }
+
+        &.close-button:hover {
+          background: red;
+        }
+      }
+    }
+  }
+
+  #settingbar {
+    width: $settingbar-width;
+    height: calc(100vh - #{$excluding-size});
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: $bg-color-light-dark;
+    padding: 0;
+    box-shadow: 0 0 1px 0 #000;
+    z-index: 9;
+
+    .settingbar-top-elements {
+      overflow-x: hidden;
+      overflow-y: overlay;
+      max-height: calc((100vh - 3.5rem) - #{$excluding-size});
+
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
+    }
+
+    .settingbar-bottom-elements {
+      padding-top: 0.5rem;
+      background: $bg-color-light-dark;
+      z-index: 1;
+    }
+
+    .settingbar-elements {
+      list-style: none;
+      text-align: center;
+      width: $settingbar-width;
+      padding: 0;
+      margin: 0;
+
+      .settingbar-element {
+        height: $settingbar-width;
+        width: 100%;
+        margin: 0;
+        border-left: 3px solid transparent;
+        opacity: 0.5;
+        transition: opacity 0.2s;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-direction: column;
+
+        &:hover {
+          opacity: 1;
+        }
+
+        &.selected {
+          border-left-color: $body-font-color-dark;
+          opacity: 1;
+        }
+
+        .settingbar-element-icon {
+          &.badge::after {
+            bottom: -10px;
+            right: 0;
+            position: absolute;
+            background: $success-color;
+          }
+
+          &.badge-update::after {
+            bottom: initial;
+            background: $primary-color;
+          }
+        }
+      }
+    }
+  }
+
+  .ex-tooltip {
+    .ex-tooltip-content {
+      background: rgba(48, 55, 66, 0.95);
+      color: #fff;
+    }
+
+    &:hover .ex-tooltip-content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  #footer {
+    background: $primary-color;
+    box-shadow: 0 0 1px 0 #000;
+
+    .footer-elements {
+      .footer-element {
+        &.footer-link {
+          &:hover {
+            background: rgba($color: #fff, $alpha: 0.1);
+          }
+        }
+      }
+    }
+  }
+}
+
+.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
+  background-color: #c9561a99;
+}
+
+.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
+  background-color: #c9571a33;
+  border: none;
+}
+
+.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
+  color: #e0d00c;
+}
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@ -0,0 +1,299 @@
+.theme-light {
+  ::-webkit-scrollbar-track {
+    background: #fff;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba($color: $bg-color-light-dark, $alpha: 0.5);
+
+    &:hover {
+      background: rgba($color: $bg-color-light-dark, $alpha: 1);
+    }
+  }
+
+  .form-input:disabled,
+  .form-input.disabled,
+  .form-select:disabled,
+  .form-select.disabled {
+    background: #ababab;
+  }
+
+  #titlebar {
+    background: $bg-color-light;
+    box-shadow: 0 0 1px 0 #000;
+
+    .titlebar-elements {
+      .titlebar-element {
+        &:hover {
+          opacity: 1;
+          background: rgba($color: rgb(172, 172, 172), $alpha: 0.2);
+        }
+
+        &.close-button:hover {
+          background: red;
+        }
+      }
+    }
+  }
+
+  .btn {
+    &.btn-link {
+      color: rgba($body-font-color, 0.8);
+
+      &:hover {
+        color: $body-font-color;
+      }
+    }
+
+    &.btn-gray {
+      color: #fff;
+      background: $bg-color-gray;
+
+      &:hover {
+        background: $bg-color-dark;
+      }
+    }
+
+    &.btn-dark {
+      color: #fff;
+      background: lighten($bg-color-light-dark, 20%);
+      border-color: lighten($bg-color-light-dark, 20%);
+
+      &:hover {
+        background: $bg-color-gray;
+      }
+    }
+  }
+
+  .modal {
+    color: $body-font-color;
+
+    &:target .modal-overlay,
+    &.active .modal-overlay {
+      background: rgba($bg-color-dark, 0.75);
+    }
+
+    .modal-container .modal-header {
+      background: $bg-color-light-dark;
+      color: #fff;
+    }
+  }
+
+  .empty {
+    background: transparent;
+  }
+
+  .tile {
+    &:hover {
+      background: $bg-color-light-gray;
+    }
+
+    &.selected-element {
+      background: $bg-color-light-gray;
+    }
+  }
+
+  .editor-col {
+    border-left: 2px solid darken($bg-color-light-gray, 15%);
+  }
+
+  .file-uploader {
+    border: 0.05rem solid $border-color-dark;
+    background-color: $bg-color-light;
+
+    .file-uploader-message {
+      border-right: 0.05rem solid $border-color-dark;
+      background-color: $bg-color-light;
+    }
+  }
+
+  #settingbar {
+    width: $settingbar-width;
+    height: calc(100vh - #{$excluding-size});
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: $bg-color-light-dark;
+    padding: 0;
+    box-shadow: 0 0 1px 0 #000;
+    z-index: 9;
+
+    .settingbar-top-elements {
+      overflow-x: hidden;
+      overflow-y: overlay;
+      max-height: calc((100vh - 3.5rem) - #{$excluding-size});
+
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
+    }
+
+    .settingbar-bottom-elements {
+      padding-top: 0.5rem;
+      background: $bg-color-light-dark;
+      z-index: 1;
+    }
+
+    .settingbar-elements {
+      list-style: none;
+      text-align: center;
+      width: $settingbar-width;
+      padding: 0;
+      margin: 0;
+
+      .settingbar-element {
+        height: $settingbar-width;
+        width: 100%;
+        margin: 0;
+        border-left: 3px solid transparent;
+        opacity: 0.5;
+        transition: opacity 0.2s;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-direction: column;
+
+        &:hover {
+          opacity: 1;
+        }
+
+        &.selected {
+          border-left-color: $body-font-color-dark;
+          opacity: 1;
+        }
+
+        .settingbar-element-icon {
+          &.badge::after {
+            bottom: -10px;
+            right: 0;
+            position: absolute;
+            background: $success-color;
+          }
+
+          &.badge-update::after {
+            bottom: initial;
+            background: $primary-color;
+          }
+        }
+      }
+    }
+  }
+
+  .ex-tooltip {
+    .ex-tooltip-content {
+      background: rgba(48, 55, 66, 0.95);
+      color: #fff;
+    }
+
+    &:hover .ex-tooltip-content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  .workspace {
+    .workspace-explorebar {
+      background: $bg-color-light-gray;
+      box-shadow: 0 0 1px 0 #000;
+
+      .workspace-explorebar-database {
+        .database-name {
+          background: $bg-color-light-gray;
+        }
+
+        .table-size {
+          opacity: 0.4;
+        }
+      }
+    }
+
+    .workspace-query-results {
+      .table {
+        .th {
+          background: $body-bg;
+          border-color: rgba($bg-color-light-dark, 0.5);
+        }
+
+        .td {
+          border-color: rgba($bg-color-light-dark, 0.5);
+        }
+      }
+    }
+  }
+
+  .context {
+    color: $body-font-color-dark;
+
+    .context-container {
+      box-shadow: 0 0 2px 0 #000;
+      background: #1d1d1d;
+
+      .context-element {
+        .context-submenu {
+          background: #1d1d1d;
+          box-shadow: 0 0 2px 0 #000;
+        }
+
+        &:hover {
+          background: $primary-color;
+        }
+      }
+    }
+  }
+
+  .table {
+    .td,
+    .th {
+      border-bottom: $border-width solid $border-color;
+    }
+
+    &,
+    &.table-striped {
+      .tbody {
+        .tr {
+          &.selected {
+            background: rgba($bg-color-gray, 0.2) !important;
+          }
+
+          &.active {
+            background: $bg-color;
+          }
+        }
+      }
+    }
+
+    &.table-hover {
+      .tbody {
+        .tr {
+          &:hover {
+            background: $bg-color-light-gray;
+          }
+        }
+      }
+    }
+
+    &.table-striped {
+      .tbody {
+        .tr:nth-of-type(odd) {
+          background: $bg-color;
+        }
+      }
+    }
+  }
+
+  #footer {
+    background: $primary-color;
+    box-shadow: 0 0 1px 0 #000;
+
+    .footer-elements {
+      .footer-element {
+        &.footer-link {
+          &:hover {
+            background: rgba($color: #fff, $alpha: 0.1);
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/renderer/store/modules/settings.store.js
+++ b/src/renderer/store/modules/settings.store.js
@ -52,8 +52,13 @@ export default {
         state.explorebar_size = size;
         persistentStore.set('explorebar_size', state.explorebar_size);
      },
+      SET_APPLICATION_THEME (state, theme) {
+         state.application_theme = theme;
+         persistentStore.set('application_theme', state.application_theme);
+      },
      SET_EDITOR_THEME (state, theme) {
         state.editor_theme = theme;
+         persistentStore.set('editor_theme', state.editor_theme);
      }
   },
   actions: {
@ -75,6 +80,9 @@ export default {
      changeLineWrap ({ commit }, val) {
         commit('SET_LINE_WRAP', val);
      },
+      changeApplicationTheme ({ commit }, theme) {
+         commit('SET_APPLICATION_THEME', theme);
+      },
      changeEditorTheme ({ commit }, theme) {
         commit('SET_EDITOR_THEME', theme);
      }