Full Theme Support and More Settings are Functional

2024-12-28 04:55:06 +01:00 · 2020-02-29 22:37:02 -05:00 · 2020-02-29 22:37:02 -05:00 · 77e7168c73
commit 77e7168c73
parent f429e346cf
30 changed files with 1040 additions and 312 deletions
--- a/src/index.ejs
+++ b/src/index.ejs
@ -15,7 +15,7 @@
    <% } %>
  </head>

-  <body class="redLight">
+  <body class="light mainRed secBlue">
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <script>
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@ -18,13 +18,30 @@ export default Vue.extend({
  mounted: function () {
    this.$store.dispatch('grabUserSettings')

-    const theme = localStorage.getItem('theme')
-    console.log(theme)
+    let baseTheme = localStorage.getItem('baseTheme')
+    let mainColor = localStorage.getItem('mainColor')
+    let secColor = localStorage.getItem('secColor')

-    if (theme !== null) {
-      this.updateTheme(theme)
+    if (baseTheme === null) {
+      baseTheme = 'light'
    }

+    if (mainColor === null) {
+      mainColor = 'mainRed'
+    }
+
+    if (secColor === null) {
+      secColor = 'secBlue'
+    }
+
+    const theme = {
+      baseTheme: baseTheme,
+      mainColor: mainColor,
+      secColor: secColor
+    }
+
+    this.updateTheme(theme)
+
    // Open links externally by default
    $(document).on('click', 'a[href^="http"]', (event) => {
      const el = event.currentTarget
@ -38,9 +55,12 @@ export default Vue.extend({
  methods: {
    updateTheme: function (theme) {
      console.log(theme)
+      const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
      const body = document.getElementsByTagName('body')[0]
-      body.className = theme
-      localStorage.setItem('theme', theme)
+      body.className = className
+      localStorage.setItem('baseTheme', theme.baseTheme)
+      localStorage.setItem('mainColor', theme.mainColor)
+      localStorage.setItem('secColor', theme.secColor)
    }
  }
 })
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/src/renderer/components/ft-button/ft-button.js
@ -19,11 +19,11 @@ export default Vue.extend({
    },
    textColor: {
      type: String,
-      default: '#FFFFFF'
+      default: 'var(--text-with-accent-color)'
    },
    backgroundColor: {
      type: String,
-      default: '#2196F3'
+      default: 'var(--accent-color)'
    }
  }
 })
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@ -22,6 +22,15 @@
  color: var(--teritary-text-color);
 }

+.search .ft-input {
+  color: var(--text-with-main-color);
+  border-bottom: 1px solid var(--text-with-main-color);
+}
+
+.search ::-webkit-input-placeholder {
+  color: var(--text-with-main-color);
+}
+
 .inputAction {
  position: absolute;
  padding: 10px;
@ -32,6 +41,10 @@
  color: var(--primary-text-color);
 }

+.search .inputAction {
+  color: var(--text-with-main-color)
+}
+
 .inputAction:hover {
  background-color: var(--side-nav-hover-color);
  -moz-transition: background 0.2s ease-in;
@ -39,9 +52,17 @@
  transition: background 0.2s ease-in;
 }

+.search .inputAction:hover {
+  background-color: var(--primary-color-hover);
+}
+
 .inputAction:active {
  background-color: var(--teritary-text-color);
  -moz-transition: background 0.2s ease-in;
  -o-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
 }
+
+.search .inputAction:active {
+  background-color: var(--primary-color-active);
+}
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@ -10,13 +10,25 @@ export default Vue.extend({
    showArrow: {
      type: Boolean,
      default: true
+    },
+    isSearch: {
+      type: Boolean,
+      default: false
    }
  },
  data: function () {
    return {
      id: '',
-      inputData: '',
-      component: this
+      inputData: ''
+    }
+  },
+  computed: {
+    barColor: function () {
+      return this.$store.getters.getBarColor
+    },
+
+    forceTextColor: function () {
+      return this.isSearch && this.barColor
    }
  },
  mounted: function () {
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@ -1,5 +1,8 @@
 <template>
-  <div class="ft-input-component">
+  <div
+    class="ft-input-component"
+    :class="{ search: forceTextColor }"
+  >
    <input
      :id="id"
      v-model="inputData"
@ -11,7 +14,7 @@
      v-if="showArrow"
      icon="arrow-right"
      class="inputAction"
-      @click="handleClick(inputData, component)"
+      @click="handleClick"
    />
  </div>
 </template>
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@ -40,6 +40,10 @@
 	border: none;
 }

+.select option {
+	color: #000000;
+}
+
 /* Remove focus */
 .select-text:focus {
 	outline: none;
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@ -1,8 +1,8 @@
 .pure-material-slider {
-    --pure-material-safari-helper1: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
-    --pure-material-safari-helper2: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
-    --pure-material-safari-helper3: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
-    --pure-material-safari-helper4: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    --pure-material-safari-helper1: var(--accent-color-opacity1);
+    --pure-material-safari-helper2: var(--accent-color-opacity2);
+    --pure-material-safari-helper3: var(--accent-color-opacity3);
+    --pure-material-safari-helper4: var(--accent-color-opacity4);
    display: inline-block;
    width: 220px;
    color: rgba(var(--primary-text-color), 0.87);
@ -58,7 +58,7 @@
    border-radius: 1px;
    width: 100%;
    height: 2px;
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    background-color: var(--accent-color-opacity4);
 }

 /* Webkit | Thumb */
@ -69,7 +69,7 @@
    border-radius: 50%;
    height: 2px;
    width: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
    transform: scale(6, 6);
    transition: box-shadow 0.2s;
 }
@ -110,7 +110,7 @@
    border-radius: 1px;
    width: 100%;
    height: 2px;
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    background-color: var(--accent-color-opacity4);
 }

 /* Moz | Thumb */
@ -121,7 +121,7 @@
    border-radius: 50%;
    height: 2px;
    width: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
    transform: scale(6, 6);
    transition: box-shadow 0.2s;
 }
@ -130,25 +130,25 @@
 .pure-material-slider > input::-moz-range-progress {
    border-radius: 1px;
    height: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
 }

 /* Moz | Hover, Focus */
 .pure-material-slider:hover > input:hover::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }

 .pure-material-slider > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }

 .pure-material-slider:hover > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }

 /* Moz | Active */
 .pure-material-slider > input:active::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important;
+    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }

 /* Moz | Disabled */
@ -185,14 +185,14 @@
 .pure-material-slider > input::-ms-fill-lower {
    border-radius: 1px;
    height: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
 }

 /* MS | Progress */
 .pure-material-slider > input::-ms-fill-upper {
    border-radius: 1px;
    height: 2px;
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    background-color: var(--accent-color-opacity4);
 }

 /* MS | Thumb */
@ -203,27 +203,27 @@
    border-radius: 50%;
    height: 2px;
    width: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
    transform: scale(6, 6);
    transition: box-shadow 0.2s;
 }

 /* MS | Hover, Focus */
 .pure-material-slider:hover > input::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }

 .pure-material-slider > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }

 .pure-material-slider:hover > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }

 /* MS | Active */
 .pure-material-slider > input:active::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important;
+    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }

 /* MS | Disabled */
--- a/src/renderer/components/ft-slider/ft-slider.js
+++ b/src/renderer/components/ft-slider/ft-slider.js
@ -43,6 +43,11 @@ export default Vue.extend({
      }
    }
  },
+  watch: {
+    defaultValue: function () {
+      this.currentValue = this.defaultValue
+    }
+  },
  mounted: function () {
    this.id = this._uid
    this.currentValue = this.defaultValue
--- a/src/renderer/components/ft-slider/ft-slider.vue
+++ b/src/renderer/components/ft-slider/ft-slider.vue
@ -9,6 +9,7 @@
      :max="maxValue"
      :step="step"
      v-model.number="currentValue"
+      @change="$emit('change', $event.target.value)"
    >
      <span>
        {{ label }} -
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
@ -55,11 +55,11 @@
 }

 .switch-input:checked+.switch-label:before {
-    background-color: #90CAF9;
+    background-color: var(--accent-color-light);
 }

 .switch-input:checked+.switch-label:after {
-    background-color: #2196F3;
+    background-color: var(--accent-color);
    -ms-transform: translate(80%, -50%);
    -webkit-transform: translate(80%, -50%);
    transform: translate(80%, -50%);
--- a/src/renderer/components/ft-video-player/ft-video-player.js
+++ b/src/renderer/components/ft-video-player/ft-video-player.js
@ -46,6 +46,7 @@ export default Vue.extend({
  data: function () {
    return {
      id: '',
+      volume: 1,
      player: null,
      useDash: false,
      useHls: false,
@ -99,17 +100,27 @@ export default Vue.extend({
      return this.$store.getters.getListType
    },

-    videoFormatPreference: function () {
-      return this.$store.getters.getVideoFormatPreference
+    defaultPlayback: function () {
+      return this.$store.getters.getDefaultPlayback
    },

-    autoplay: function () {
-      return this.$store.getters.getAutoplay
+    defaultVideoFormat: function () {
+      return this.$store.getters.getDefaultVideoFormat
+    },
+
+    autoplayVideos: function () {
+      return this.$store.getters.getAutoplayVideos
    }
  },
  mounted: function () {
    this.id = this._uid

+    const volume = sessionStorage.getItem('volume')
+
+    if (volume !== null) {
+      this.volume = volume
+    }
+
    this.determineFormatType()
  },
  beforeDestroy: function () {
@ -129,6 +140,9 @@ export default Vue.extend({

        this.player = videojs(videoPlayer)

+        this.player.volume(this.volume)
+        this.player.playbackRate(this.defaultPlayback)
+
        this.player.vttThumbnails({
          src: this.storyboardSrc
        })
@ -141,7 +155,7 @@ export default Vue.extend({
          this.player.httpSourceSelector()
        }

-        if (this.autoplay) {
+        if (this.autoplayVideos) {
          // Calling play() won't happen right away, so a quick timeout will make it function properly.
          setTimeout(() => {
            this.player.play()
@ -152,6 +166,7 @@ export default Vue.extend({

        this.player.on('mousemove', this.hideMouseTimeout)
        this.player.on('mouseleave', this.removeMouseTimeout)
+        this.player.on('volumechange', this.updateVolume)

        const v = this

@ -161,6 +176,11 @@ export default Vue.extend({
      }
    },

+    updateVolume: function (event) {
+      const volume = this.player.volume()
+      sessionStorage.setItem('volume', volume)
+    },
+
    determineFormatType: function () {
      if (this.format === 'dash') {
        this.enableDashFormat()
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@ -16,17 +16,6 @@ export default Vue.extend({
  data: function () {
    return {
      title: 'General Settings',
-      currentTheme: '',
-      themeNames: [
-        'Light Red',
-        'Dark Red',
-        'Gray Red'
-      ],
-      themeValues: [
-        'redLight',
-        'redDark',
-        'redGray'
-      ],
      backendNames: [
        'Invidious API',
        'Local API'
@ -558,9 +547,6 @@ export default Vue.extend({
    checkForUpdates: function () {
      return this.$store.getters.getCheckForUpdates
    },
-    barColor: function () {
-      return this.$store.getters.getBarColor
-    },
    backendPreference: function () {
      return this.$store.getters.getBackendPreference
    },
@ -577,14 +563,7 @@ export default Vue.extend({
      return this.$store.getters.getThumbnailPreference
    }
  },
-  mounted: function () {
-    this.currentTheme = localStorage.getItem('theme')
-  },
  methods: {
-    updateTheme: function (theme) {
-      this.$parent.$parent.updateTheme(theme)
-    },
-
    ...mapActions([
      'updateBackendFallback',
      'updateCheckForUpdates',
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@ -17,11 +17,6 @@
        :default-value="checkForUpdates"
        @change="updateCheckForUpdates"
      />
-      <ft-toggle-switch
-        label="Match Top Bar with Theme Color"
-        :default-value="barColor"
-        @change="updateBarColor"
-      />
    </ft-flex-box>
    <br>
    <ft-flex-box>
@ -32,13 +27,6 @@
        :select-values="backendValues"
        @change="updateBackendPreference"
      />
-      <ft-select
-        placeholder="Default Theme"
-        :value="currentTheme"
-        :select-names="themeNames"
-        :select-values="themeValues"
-        @change="updateTheme"
-      />
      <ft-select
        placeholder="Default Landing Page"
        :value="landingPage"
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@ -54,13 +55,67 @@ export default Vue.extend({
    }
  },
  computed: {
-    invidiousInstance: function () {
-      return this.$store.getters.getInvidiousInstance
+    rememberHistory: function () {
+      return this.$store.getters.getRememberHistory
+    },
+
+    autoplayVideos: function () {
+      return this.$store.getters.getAutoplayVideos
+    },
+
+    autoplayPlaylists: function () {
+      return this.$store.getters.getAutoplayPlaylists
+    },
+
+    playNextVideo: function () {
+      return this.$store.getters.getPlayNextVideo
+    },
+
+    enableSubtitles: function () {
+      return this.$store.getters.getEnableSubtitles
+    },
+
+    forceLocalBackendForLegacy: function () {
+      return this.$store.getters.getForceLocalBackendForLegacy
+    },
+
+    proxyVideos: function () {
+      return this.$store.getters.getProxyVideos
+    },
+
+    defaultVolume: function () {
+      return parseFloat(this.$store.getters.getDefaultVolume) * 100
+    },
+
+    defaultPlayback: function () {
+      return parseFloat(this.$store.getters.getDefaultPlayback)
+    },
+
+    defaultVideoFormat: function () {
+      return this.$store.getters.getDefaultVideoFormat
+    },
+
+    defaultQuality: function () {
+      return this.$store.getters.getDefaultQuality
    }
  },
  methods: {
-    goToChannel: function () {
-      console.log('TODO: Handle goToChannel')
-    }
+    parseVolumeBeforeUpdate: function (volume) {
+      this.updateDefaultVolume(volume / 100)
+    },
+
+    ...mapActions([
+      'updateRememberHistory',
+      'updateAutoplayVideos',
+      'updateAutoplayPlaylists',
+      'updatePlayNextVideo',
+      'updateEnableSubtitles',
+      'updateForceLocalBackendForLegacy',
+      'updateProxyVideos',
+      'updateDefaultVolume',
+      'updateDefaultPlayback',
+      'updateDefaultVideoFormat',
+      'updateDefaultQuality'
+    ])
  }
 })
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@ -9,58 +9,76 @@
    <ft-flex-box>
      <ft-toggle-switch
        label="Remember History"
+        :default-value="rememberHistory"
+        @change="updateRememberHistory"
      />
      <ft-toggle-switch
        label="Autoplay Videos"
+        :default-value="autoplayVideos"
+        @change="updateAutoplayVideos"
      />
      <ft-toggle-switch
        label="Autoplay Playlists"
+        :default-value="autoplayPlaylists"
+        @change="updateAutoplayPlaylists"
      />
      <ft-toggle-switch
        label="Play Next Video"
+        :default-value="playNextVideo"
+        @change="updatePlayNextVideo"
      />
      <ft-toggle-switch
        label="Enable Subtitles by Default"
+        :default-value="enableSubtitles"
+        @change="updateEnableSubtitles"
      />
      <ft-toggle-switch
        label="Force Local Backend for Legacy Formats"
+        :default-value="forceLocalBackendForLegacy"
+        @change="updateForceLocalBackendForLegacy"
      />
      <ft-toggle-switch
        label="Proxy Videos Through Invidious"
+        :default-value="proxyVideos"
+        @change="updateProxyVideos"
      />
    </ft-flex-box>
    <br>
    <ft-flex-box>
      <ft-slider
        label="Default Volume"
-        :default-value="100"
+        :default-value="defaultVolume"
        :min-value="0"
        :max-value="100"
        :step="1"
        value-extension="%"
+        @change="parseVolumeBeforeUpdate"
      />
      <ft-slider
        label="Default Playback Rate"
-        :default-value="1"
+        :default-value="defaultPlayback"
        :min-value="0.25"
        :max-value="3"
        :step="0.25"
        value-extension="x"
+        @change="updateDefaultPlayback"
      />
    </ft-flex-box>
    <br>
    <ft-flex-box>
      <ft-select
        placeholder="Default Video Format"
-        :value="formatValues[0]"
+        :value="defaultVideoFormat"
        :select-names="formatNames"
        :select-values="formatValues"
+        @change="updateDefaultVideoFormat"
      />
      <ft-select
        placeholder="Default Quality"
-        :value="qualityValues[0]"
+        :value="defaultQuality"
        :select-names="qualityNames"
        :select-values="qualityValues"
+        @change="updateDefaultQuality"
      />
    </ft-flex-box>
  </ft-card>
--- a/src/renderer/components/theme-settings/theme-settings.css
+++ b/src/renderer/components/theme-settings/theme-settings.css
@ -0,0 +1,9 @@
+.relative {
+  position: relative;
+}
+
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 10px;
+}
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@ -0,0 +1,127 @@
+import Vue from 'vue'
+import { mapActions } from 'vuex'
+import FtCard from '../ft-card/ft-card.vue'
+import FtSelect from '../ft-select/ft-select.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+export default Vue.extend({
+  name: 'ThemeSettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-select': FtSelect,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-flex-box': FtFlexBox
+  },
+  data: function () {
+    return {
+      title: 'Theme Settings',
+      currentBaseTheme: '',
+      currentMainColor: '',
+      currentSecColor: '',
+      baseThemeNames: [
+        'Light',
+        'Dark',
+        'Gray'
+      ],
+      baseThemeValues: [
+        'light',
+        'dark',
+        'gray'
+      ],
+      colorNames: [
+        'Red',
+        'Pink',
+        'Purple',
+        'Deep Purple',
+        'Indigo',
+        'Blue',
+        'Light Blue',
+        'Cyan',
+        'Teal',
+        'Green',
+        'Light Green',
+        'Lime',
+        'Yellow',
+        'Amber',
+        'Orange',
+        'Deep Orange'
+      ],
+      colorValues: [
+        'Red',
+        'Pink',
+        'Purple',
+        'DeepPurple',
+        'Indigo',
+        'Blue',
+        'LightBlue',
+        'Cyan',
+        'Teal',
+        'Green',
+        'LightGreen',
+        'Lime',
+        'Yellow',
+        'Amber',
+        'Orange',
+        'DeepOrange'
+      ]
+    }
+  },
+  computed: {
+    barColor: function () {
+      return this.$store.getters.getBarColor
+    }
+  },
+  mounted: function () {
+    this.currentBaseTheme = localStorage.getItem('baseTheme')
+    this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
+    this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
+  },
+  methods: {
+    updateBaseTheme: function (theme) {
+      const mainColor = `main${this.currentMainColor}`
+      const secColor = `sec${this.currentSecColor}`
+
+      const payload = {
+        baseTheme: theme,
+        mainColor: mainColor,
+        secColor: secColor
+      }
+
+      this.$parent.$parent.updateTheme(payload)
+      this.currentBaseTheme = theme
+    },
+
+    updateMainColor: function (color) {
+      const mainColor = `main${color}`
+      const secColor = `sec${this.currentSecColor}`
+
+      const payload = {
+        baseTheme: this.currentBaseTheme,
+        mainColor: mainColor,
+        secColor: secColor
+      }
+
+      this.$parent.$parent.updateTheme(payload)
+      this.currentMainColor = color
+    },
+
+    updateSecColor: function (color) {
+      const mainColor = `main${this.currentMainColor}`
+      const secColor = `sec${color}`
+
+      const payload = {
+        baseTheme: this.currentBaseTheme,
+        mainColor: mainColor,
+        secColor: secColor
+      }
+
+      this.$parent.$parent.updateTheme(payload)
+      this.currentSecColor = color
+    },
+
+    ...mapActions([
+      'updateBarColor'
+    ])
+  }
+})
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@ -0,0 +1,42 @@
+<template>
+  <ft-card
+    class="relative card">
+    <h3>
+      {{ title }}
+    </h3>
+    <ft-flex-box>
+      <ft-toggle-switch
+        label="Match Top Bar with Main Color"
+        :default-value="barColor"
+        @change="updateBarColor"
+      />
+    </ft-flex-box>
+    <br>
+    <ft-flex-box>
+      <ft-select
+        placeholder="Base Theme"
+        :value="currentBaseTheme"
+        :select-names="baseThemeNames"
+        :select-values="baseThemeValues"
+        @change="updateBaseTheme"
+      />
+      <ft-select
+        placeholder="Main Color Theme"
+        :value="currentMainColor"
+        :select-names="colorNames"
+        :select-values="colorValues"
+        @change="updateMainColor"
+      />
+      <ft-select
+        placeholder="Secondary Color Theme"
+        :value="currentSecColor"
+        :select-names="colorNames"
+        :select-values="colorValues"
+        @change="updateSecColor"
+      />
+    </ft-flex-box>
+  </ft-card>
+</template>
+
+<script src="./theme-settings.js" />
+<style scoped src="./theme-settings.css" />
--- a/src/renderer/components/top-nav/top-nav.css
+++ b/src/renderer/components/top-nav/top-nav.css
@ -18,6 +18,9 @@
  position: absolute;
  top: 10px;
  left: 10px;
+}
+
+.navIcon {
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
@ -30,78 +33,42 @@
  transition: background 0.2s ease-out;
 }

-.menuIcon:hover {
+.topNavBarColor .navIcon {
+  color: var(--text-with-main-color);
+}
+
+.navIcon:hover {
  background-color: var(--side-nav-hover-color);
  -moz-transition: background 0.2s ease-in;
  -o-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
 }

-.menuIcon:active {
+.topNavBarColor .navIcon:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.navIcon:active {
  background-color: var(--teritary-text-color);
  -moz-transition: background 0.2s ease-in;
  -o-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
 }

+.topNavBarColor .menuIcon:active {
+  background-color: var(--primary-color-active)
+}
+
 .navBackIcon {
  position: absolute;
  top: 10px;
  left: 50px;
-  font-size: 20px;
-  padding: 10px;
-  cursor: pointer;
-  color: var(--primary-text-color);
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.navBackIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.navBackIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
 }

 .navForwardIcon {
  position: absolute;
  top: 10px;
  left: 85px;
-  font-size: 20px;
-  padding: 10px;
-  cursor: pointer;
-  color: var(--primary-text-color);
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.navForwardIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.navForwardIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
 }

 .logoIcon {
@ -142,32 +109,14 @@
  position: relative;
 }

-.search {
+.searchInput {
  width: 450px;
 }

 .navFilterIcon {
  position: absolute;
-  padding: 10px;
  top: 10px;
  right: 10px;
-  cursor: pointer;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.navFilterIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.navFilterIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
 }

 .searchFilters {
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@ -4,17 +4,17 @@
    :class="{ topNavBarColor: barColor }"
  >
    <font-awesome-icon
-      class="menuIcon"
+      class=" menuIcon navIcon"
      icon="bars"
      @click="toggleSideNav"
    />
    <font-awesome-icon
-      class="navBackIcon"
+      class="navBackIcon navIcon"
      icon="arrow-left"
      @click="historyBack"
    />
    <font-awesome-icon
-      class="navForwardIcon"
+      class="navForwardIcon navIcon"
      icon="arrow-right"
      @click="historyForward"
    />
@ -29,11 +29,12 @@
    <div class="searchContainer">
      <ft-input
        placeholder="Search / Go to URL"
-        class="search"
+        class="searchInput"
+        :is-search="true"
        @click="goToSearch"
      />
      <font-awesome-icon
-        class="navFilterIcon"
+        class="navFilterIcon navIcon"
        icon="filter"
        @click="showFilters = !showFilters"
      />
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@ -9,30 +9,29 @@ const settingsDb = new Datastore({

 const state = {
  currentTheme: 'lightRed',
-  barColor: false,
-  listType: 'grid',
-  invidiousInstance: 'https://invidio.us',
-  backendPreference: 'local',
-  useClickBaitRemover: true,
-  thumbnailPreference: '',
  backendFallback: true,
-  videoFormatPreference: 'dash',
-  defaultQuality: 'Auto',
-  videoAutoplay: true,
-  playlistAutoplay: true,
-  playNextVideo: false,
  checkForUpdates: true,
-  useTor: false,
-  history: true,
-  subtitles: false,
-  player: 'dash',
-  volume: 1,
-  rate: '1',
-  proxy: 'SOCKS5://127.0.0.1:9050',
-  proxyVideos: false,
-  region: 'US',
-  debugMode: false,
+  backendPreference: 'local',
  landingPage: 'subscriptions',
+  region: 'US',
+  listType: 'grid',
+  thumbnailPreference: '',
+  invidiousInstance: 'https://invidio.us',
+  barColor: false,
+  rememberHistory: true,
+  autoplayVideos: true,
+  autoplayPlaylists: true,
+  playNextVideo: false,
+  enableSubtitles: true,
+  forceLocalBackendForLegacy: true,
+  proxyVideos: false,
+  defaultVolume: 1,
+  defaultPlayback: 1,
+  defaultVideoFormat: 'dash',
+  defaultQuality: 'auto',
+  useTor: false,
+  proxy: 'SOCKS5://127.0.0.1:9050',
+  debugMode: false,
  disctractionFreeMode: false,
  hideWatchedSubs: false,
  profileList: [{ name: 'All Channels', color: '#304FFE' }],
@ -76,12 +75,48 @@ const getters = {
    return state.invidiousInstance
  },

-  getVideoFormatPreference: () => {
-    return state.videoFormatPreference
+  getRememberHistory: () => {
+    return state.rememberHistory
  },

-  getAutoplay: () => {
-    return state.videoAutoplay
+  getAutoplayVideos: () => {
+    return state.autoplayVideos
+  },
+
+  getAutoplayPlaylists: () => {
+    return state.autoplayPlaylists
+  },
+
+  getPlayNextVideo: () => {
+    return state.playNextVideo
+  },
+
+  getEnableSubtitles: () => {
+    return state.enableSubtitles
+  },
+
+  getForceLocalBackendForLegacy: () => {
+    return state.forceLocalBackendForLegacy
+  },
+
+  getProxyVideos: () => {
+    return state.proxyVideos
+  },
+
+  getDefaultVolume: () => {
+    return state.defaultVolume
+  },
+
+  getDefaultPlayback: () => {
+    return state.defaultPlayback
+  },
+
+  getDefaultVideoFormat: () => {
+    return state.defaultVideoFormat
+  },
+
+  getDefaultQuality: () => {
+    return state.defaultQuality
  }
 }

@ -89,6 +124,7 @@ const actions = {
  grabUserSettings ({ commit }) {
    settingsDb.find({}, (err, results) => {
      if (!err) {
+        console.log(results)
        results.forEach((result) => {
          switch (result._id) {
            case 'backendFallback':
@ -97,9 +133,6 @@ const actions = {
            case 'checkForUpdates':
              commit('setCheckForUpdates', result.value)
              break
-            case 'barColor':
-              commit('setBarColor', result.value)
-              break
            case 'backendPreference':
              commit('setBackendPreference', result.value)
              break
@ -115,6 +148,43 @@ const actions = {
            case 'thumbnailPreference':
              commit('setThumbnailPreference', result.value)
              break
+            case 'barColor':
+              commit('setBarColor', result.value)
+              break
+            case 'rememberHistory':
+              commit('setRememberHistory', result.value)
+              break
+            case 'autoplayVideos':
+              commit('setAutoplayVideos', result.value)
+              break
+            case 'autoplayPlaylists':
+              commit('setAutoplayPlaylists', result.value)
+              break
+            case 'playNextVideo':
+              commit('setPlayNextVideo', result.value)
+              break
+            case 'enableSubtitles':
+              commit('setEnableSubtitles', result.value)
+              break
+            case 'forceLocalBackendForLegacy':
+              commit('setForceLocalBackendForLegacy', result.value)
+              break
+            case 'proxyVideos':
+              commit('setProxyVideos', result.value)
+              break
+            case 'defaultVolume':
+              commit('setDefaultVolume', result.value)
+              sessionStorage.setItem('volume', result.value)
+              break
+            case 'defaultPlayback':
+              commit('setDefaultPlayback', result.value)
+              break
+            case 'defaultVideoFormat':
+              commit('setDefaultVideoFormat', result.value)
+              break
+            case 'defaultQuality':
+              commit('setDefaultQuality', result.value)
+              break
          }
        })
      }
@ -137,14 +207,6 @@ const actions = {
    })
  },

-  updateBarColor ({ commit }, barColor) {
-    settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
-      if (!err) {
-        commit('setBarColor', barColor)
-      }
-    })
-  },
-
  updateBackendPreference ({ commit }, backendPreference) {
    settingsDb.update({ _id: 'backendPreference' }, { _id: 'backendPreference', value: backendPreference }, { upsert: true }, (err, numReplaced) => {
      if (!err) {
@ -185,36 +247,109 @@ const actions = {
    })
  },

+  updateBarColor ({ commit }, barColor) {
+    settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setBarColor', barColor)
+      }
+    })
+  },
+
+  updateRememberHistory ({ commit }, history) {
+    settingsDb.update({ _id: 'rememberHistory' }, { _id: 'rememberHistory', value: history }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setRememberHistory', history)
+      }
+    })
+  },
+
+  updateAutoplayVideos ({ commit }, autoplayVideos) {
+    settingsDb.update({ _id: 'autoplayVideos' }, { _id: 'autoplayVideos', value: autoplayVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setAutoplayVideos', autoplayVideos)
+      }
+    })
+  },
+
+  updateAutoplayPlaylists ({ commit }, autoplayPlaylists) {
+    settingsDb.update({ _id: 'autoplayPlaylists' }, { _id: 'autoplayPlaylists', value: autoplayPlaylists }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setAutoplayPlaylists', autoplayPlaylists)
+      }
+    })
+  },
+
+  updatePlayNextVideo ({ commit }, playNextVideo) {
+    settingsDb.update({ _id: 'playNextVideo' }, { _id: 'playNextVideo', value: playNextVideo }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setPlayNextVideo', playNextVideo)
+      }
+    })
+  },
+
+  updateEnableSubtitles ({ commit }, enableSubtitles) {
+    settingsDb.update({ _id: 'enableSubtitles' }, { _id: 'enableSubtitles', value: enableSubtitles }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setEnableSubtitles', enableSubtitles)
+      }
+    })
+  },
+
+  updateForceLocalBackendForLegacy ({ commit }, forceLocalBackendForLegacy) {
+    settingsDb.update({ _id: 'forceLocalBackendForLegacy' }, { _id: 'forceLocalBackendForLegacy', value: forceLocalBackendForLegacy }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setForceLocalBackendForLegacy', forceLocalBackendForLegacy)
+      }
+    })
+  },
+
+  updateProxyVideos ({ commit }, proxyVideos) {
+    settingsDb.update({ _id: 'proxyVideos' }, { _id: 'proxyVideos', value: proxyVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setProxyVideos', proxyVideos)
+      }
+    })
+  },
+
+  updateDefaultVolume ({ commit }, defaultVolume) {
+    settingsDb.update({ _id: 'defaultVolume' }, { _id: 'defaultVolume', value: defaultVolume }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultVolume', defaultVolume)
+        sessionStorage.setItem('volume', defaultVolume)
+      }
+    })
+  },
+
+  updateDefaultPlayback ({ commit }, defaultPlayback) {
+    settingsDb.update({ _id: 'defaultPlayback' }, { _id: 'defaultPlayback', value: defaultPlayback }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultPlayback', defaultPlayback)
+      }
+    })
+  },
+
+  updateDefaultVideoFormat ({ commit }, defaultVideoFormat) {
+    settingsDb.update({ _id: 'defaultVideoFormat' }, { _id: 'defaultVideoFormat', value: defaultVideoFormat }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultVideoFormat', defaultVideoFormat)
+      }
+    })
+  },
+
+  updateDefaultQuality ({ commit }, defaultQuality) {
+    settingsDb.update({ _id: 'defaultQuality' }, { _id: 'defaultQuality', value: defaultQuality }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultQuality', defaultQuality)
+      }
+    })
+  },
+
  updateUseTor ({ commit }, useTor) {
    settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => {
      if (!err) {
        commit('setUseTor', useTor)
      }
    })
-  },
-
-  updateSetHistory ({ commit }, history) {
-    settingsDb.update({ _id: history }, { value: history }, { upsert: true }, (err, history) => {
-      if (!err) {
-        commit('setHistory', history)
-      }
-    })
-  },
-
-  updateAutoPlay ({ commit }, autoplay) {
-    settingsDb.update({ _id: autoplay }, { value: autoplay }, { upsert: true }, (err, autoplay) => {
-      if (!err) {
-        commit('setAutoplay', autoplay)
-      }
-    })
-  },
-
-  updateAutoPlayPlaylists ({ commit }, autoplayPlaylists) {
-    settingsDb.update({ _id: autoplayPlaylists }, { value: autoplayPlaylists }, { upsert: true }, (err, autoplayPlaylists) => {
-      if (!err) {
-        commit('setAutoplayPlaylists', autoplayPlaylists)
-      }
-    })
  }
 }

@ -228,9 +363,6 @@ const mutations = {
  setCheckForUpdates (state, checkForUpdates) {
    state.checkForUpdates = checkForUpdates
  },
-  setBarColor (state, barColor) {
-    state.barColor = barColor
-  },
  setBackendPreference (state, backendPreference) {
    state.backendPreference = backendPreference
  },
@ -246,14 +378,14 @@ const mutations = {
  setThumbnailPreference (state, thumbnailPreference) {
    state.thumbnailPreference = thumbnailPreference
  },
-  setUseTor (state, useTor) {
-    state.useTor = useTor
+  setBarColor (state, barColor) {
+    state.barColor = barColor
  },
-  setHistory (state, history) {
-    state.history = history
+  setRememberHistory (state, rememberHistory) {
+    state.rememberHistory = rememberHistory
  },
-  setAutoplay (state, autoplay) {
-    state.autoplay = autoplay
+  setAutoplayVideos (state, autoplayVideos) {
+    state.autoplayVideos = autoplayVideos
  },
  setAutoplayPlaylists (state, autoplayPlaylists) {
    state.autoplayPlaylists = autoplayPlaylists
@ -261,39 +393,36 @@ const mutations = {
  setPlayNextVideo (state, playNextVideo) {
    state.playNextVideo = playNextVideo
  },
-  setSubtitles (state, subtitles) {
-    state.subtitles = subtitles
+  setEnableSubtitles (state, enableSubtitles) {
+    state.enableSubtitles = enableSubtitles
  },
-  setUpdates (state, updates) {
-    state.updates = updates
-  },
-  setLocalScrape (state, localScrape) {
-    state.localScrape = localScrape
-  },
-  setPlayer (state, player) {
-    state.player = player
-  },
-  setQuality (state, quality) {
-    state.quality = quality
-  },
-  setVolume (state, volume) {
-    state.volume = volume
-  },
-  setRate (state, rate) {
-    state.rate = rate
-  },
-  setProxy (state, proxy) {
-    state.proxy = proxy
+  setForceLocalBackendForLegacy (state, forceLocalBackendForLegacy) {
+    state.forceLocalBackendForLegacy = forceLocalBackendForLegacy
  },
  setProxyVideos (state, proxyVideos) {
    state.proxyVideos = proxyVideos
  },
+  setDefaultVolume (state, defaultVolume) {
+    state.defaultVolume = defaultVolume
+  },
+  setDefaultPlayback (state, defaultPlayback) {
+    state.defaultPlayback = defaultPlayback
+  },
+  setDefaultVideoFormat (state, defaultVideoFormat) {
+    state.defaultVideoFormat = defaultVideoFormat
+  },
+  setDefaultQuality (state, defaultQuality) {
+    state.defaultQuality = defaultQuality
+  },
+  setProxy (state, proxy) {
+    state.proxy = proxy
+  },
+  setUseTor (state, useTor) {
+    state.useTor = useTor
+  },
  setDebugMode (state, debugMode) {
    state.debugMode = debugMode
  },
-  setStartScreen (state, startScreen) {
-    state.startScreen = startScreen
-  },
  setDistractionFreeMode (state, disctractionFreeMode) {
    state.disctractionFreeMode = disctractionFreeMode
  },
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@ -12,16 +12,20 @@ const state = {
 }

 const getters = {
+  getIsSideNavOpen () {
+    return state.isSideNavOpen
+  },
+
+  getCurrentVolume () {
+    return state.currentVolume
+  },
+
  getSessionSearchHistory () {
    return state.sessionSearchHistory
  },

  getSearchSettings () {
    return state.searchSettings
-  },
-
-  getIsSideNavOpen () {
-    return state.isSideNavOpen
  }
 }

--- a/src/renderer/store/modules/ytdl.js
+++ b/src/renderer/store/modules/ytdl.js
@ -2,6 +2,8 @@ import ytdl from 'ytdl-core'
 import ytsr from 'ytsr'
 import ytpl from 'ytpl'

+import IsEqual from 'lodash.isequal'
+
 const state = {
  main: 0,
  isYtSearchRunning: false
@ -22,8 +24,16 @@ const actions = {
        resolve(false)
      }

+      const defaultFilters = {
+        sortBy: 'relevance',
+        time: '',
+        type: 'all',
+        duration: ''
+      }
+
      commit('toggleIsYtSearchRunning')

+      if (!IsEqual(defaultFilters, rootState.utils.searchSettings)) {
        dispatch('ytSearchGetFilters', payload).then((filter) => {
          if (typeof (payload.options.nextpageRef) === 'undefined' && filter !== payload.query) {
            payload.options.nextpageRef = filter
@ -41,6 +51,19 @@ const actions = {
            }
          })
        })
+      } else {
+        ytsr(payload.query, payload.options, (err, result) => {
+          commit('toggleIsYtSearchRunning')
+          if (err) {
+            console.log(err)
+            reject(err)
+          } else {
+            console.log(result)
+            console.log('done')
+            resolve(result)
+          }
+        })
+      }
    })
  },

--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@ -1,8 +1,4 @@
-.redLight {
-  --primary-color: #f44336;
-  --primary-color-hover: #e53935;
-  --primary-color-active: #c62828;
-  --accent-color: #2196F3;
+.light {
  --primary-text-color: #212121;
  --secondary-text-color: #424242;
  --teritary-text-color: #757575;
@ -18,15 +14,10 @@
  --search-bar-color: #f5f5f5;
  --logo-icon: url("/_icons/iconColorSmall.png");
  --logo-text: url("/_icons/textColorSmall.png");
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }

-.redDark {
-  --primary-color: #f44336;
-  --primary-color-hover: #e53935;
-  --primary-color-active: #c62828;
-  --accent-color: #2196F3;
+
+.dark {
  --primary-text-color: #EEEEEE;
  --secondary-text-color: #E0E0E0;
  --teritary-text-color: #F5F5F5;
@ -42,34 +33,331 @@
  --search-bar-color: #f5f5f5;
  --logo-icon: url("/_icons/iconColorSmall.png");
  --logo-text: url("/_icons/textColorSmall.png");
+}
+
+
+.gray {
+  --primary-text-color: #EEEEEE;
+  --secondary-text-color: #E0E0E0;
+  --teritary-text-color: #F5F5F5;
+  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-shadow-color: rgba(0, 0, 0, 0.75);
+  --title-color: #EEEEEE;
+  --bg-color: #212121;
+  --card-bg-color: #303030;
+  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --side-nav-color: #262626;
+  --side-nav-hover-color: #212121;
+  --side-nav-active-color: #303030;
+  --search-bar-color: #f5f5f5;
+  --logo-icon: url("/_icons/iconColorSmall.png");
+  --logo-text: url("/_icons/textColorSmall.png");
+}
+
+.mainRed {
+  --primary-color: #f44336;
+  --primary-color-hover: #e53935;
+  --primary-color-active: #c62828;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainPink {
+  --primary-color: #E91E63;
+  --primary-color-hover: #D81B60;
+  --primary-color-active: #AD1457;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainPurple {
+  --primary-color: #9C27B0;
+  --primary-color-hover: #8E24AA;
+  --primary-color-active: #6A1B9A;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainDeepPurple {
+  --primary-color: #673AB7;
+  --primary-color-hover: #5E35B1;
+  --primary-color-active: #4527A0;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainIndigo {
+  --primary-color: #3F51B5;
+  --primary-color-hover: #3949AB;
+  --primary-color-active: #283593;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainBlue {
+  --primary-color: #2196F3;
+  --primary-color-hover: #1E88E5;
+  --primary-color-active: #1565C0;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainLightBlue {
+  --primary-color: #03A9F4;
+  --primary-color-hover: #039BE5;
+  --primary-color-active: #0277BD;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainCyan {
+  --primary-color: #00BCD4;
+  --primary-color-hover: #00ACC1;
+  --primary-color-active: #00838F;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainTeal {
+  --primary-color: #009688;
+  --primary-color-hover: #00897B;
+  --primary-color-active: #00695C;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainGreen {
+  --primary-color: #4CAF50;
+  --primary-color-hover: #43A047;
+  --primary-color-active: #2E7D32;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainLightGreen {
+  --primary-color: #8BC34A;
+  --primary-color-hover: #7CB342;
+  --primary-color-active: #558B2F;
+  --text-with-main-color: #000000;
  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }

-.redGray {
-  --primary-color: #f44336;
-  --primary-color-hover: #e53935;
-  --primary-color-active: #c62828;
-  --accent-color: #2196F3;
-  --primary-text-color: #212121;
-  --secondary-text-color: #424242;
-  --teritary-text-color: #757575;
-  --primary-input-color: rgba(0, 0, 0, 0.50);
-  --primary-shadow-color: rgba(232, 232, 232, 1);
-  --title-color: #3f7ac6;
-  --bg-color: #f1f1f1;
-  --card-bg-color: #FFFFFF;
-  --secondary-card-bg-color: #eeeeee;
-  --side-nav-color: #FFFFFF;
-  --side-nav-hover-color: #e0e0e0;
-  --side-nav-active-color: #757575;
-  --search-bar-color: #f5f5f5;
-  --logo-icon: url("/_icons/iconColorSmall.png");
-  --logo-text: url("/_icons/textColorSmall.png");
+.mainLime {
+  --primary-color: #CDDC39;
+  --primary-color-hover: #C0CA33;
+  --primary-color-active: #9E9D24;
+  --text-with-main-color: #000000;
  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }

+.mainYellow {
+  --primary-color: #FFEB3B;
+  --primary-color-hover: #FDD835;
+  --primary-color-active: #F9A825;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.mainAmber {
+  --primary-color: #FFC107;
+  --primary-color-hover: #FFB300;
+  --primary-color-active: #FF8F00;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.mainOrange {
+  --primary-color: #FF9800;
+  --primary-color-hover: #FB8C00;
+  --primary-color-active: #EF6C00;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.mainDeepOrange {
+  --primary-color: #FF5722;
+  --primary-color-hover: #F4511E;
+  --primary-color-active: #D84315;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.secRed {
+  --accent-color: #f44336;
+  --accent-color-light: #ef9a9a;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(244,67,54,0.04);
+  --accent-color-opacity2: rgba(244,67,54,0.12);
+  --accent-color-opacity3: rgba(244,67,54,0.16);
+  --accent-color-opacity4: rgba(244,67,54,0.24);
+}
+
+.secPink {
+  --accent-color: #E91E63;
+  --accent-color-light: #F48FB1;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(233,30,99,0.04);
+  --accent-color-opacity2: rgba(233,30,99,0.12);
+  --accent-color-opacity3: rgba(233,30,99,0.16);
+  --accent-color-opacity4: rgba(233,30,99,0.24);
+}
+
+.secPurple {
+  --accent-color: #9C27B0;
+  --accent-color-light: #CE93D8;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(156,39,176,0.04);
+  --accent-color-opacity2: rgba(156,39,176,0.12);
+  --accent-color-opacity3: rgba(156,39,176,0.16);
+  --accent-color-opacity4: rgba(156,39,176,0.24);
+}
+
+.secDeepPurple {
+  --accent-color: #673AB7;
+  --accent-color-light: #B39DDB;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(103,58,183,0.04);
+  --accent-color-opacity2: rgba(103,58,183,0.12);
+  --accent-color-opacity3: rgba(103,58,183,0.16);
+  --accent-color-opacity4: rgba(103,58,183,0.24);
+}
+
+.secIndigo {
+  --accent-color: #3F51B5;
+  --accent-color-light: #9FA8DA;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(63,81,181,0.04);
+  --accent-color-opacity2: rgba(63,81,181,0.12);
+  --accent-color-opacity3: rgba(63,81,181,0.16);
+  --accent-color-opacity4: rgba(63,81,181,0.24);
+}
+
+.secBlue {
+  --accent-color: #2196F3;
+  --accent-color-light: #90CAF9;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(33,150,243,0.04);
+  --accent-color-opacity2: rgba(33,150,243,0.12);
+  --accent-color-opacity3: rgba(33,150,243,0.16);
+  --accent-color-opacity4: rgba(33,150,243,0.24);
+}
+
+.secLightBlue {
+  --accent-color: #03A9F4;
+  --accent-color-light: #81D4FA;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(3,169,244,0.04);
+  --accent-color-opacity2: rgba(3,169,244,0.12);
+  --accent-color-opacity3: rgba(3,169,244,0.16);
+  --accent-color-opacity4: rgba(3,169,244,0.24);
+}
+
+.secCyan {
+  --accent-color: #00BCD4;
+  --accent-color-light: #80DEEA;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(0,188,212,0.04);
+  --accent-color-opacity2: rgba(0,188,212,0.12);
+  --accent-color-opacity3: rgba(0,188,212,0.16);
+  --accent-color-opacity4: rgba(0,188,212,0.24);
+}
+
+.secTeal {
+  --accent-color: #009688;
+  --accent-color-light: #80CBC4;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(0,150,136,0.04);
+  --accent-color-opacity2: rgba(0,150,136,0.12);
+  --accent-color-opacity3: rgba(0,150,136,0.16);
+  --accent-color-opacity4: rgba(0,150,136,0.24);
+}
+
+.secGreen {
+  --accent-color: #4CAF50;
+  --accent-color-light: #A5D6A7;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(76,175,80,0.04);
+  --accent-color-opacity2: rgba(76,175,80,0.12);
+  --accent-color-opacity3: rgba(76,175,80,0.16);
+  --accent-color-opacity4: rgba(76,175,80,0.24);
+}
+
+.secLightGreen {
+  --accent-color: #8BC34A;
+  --accent-color-light: #C5E1A5;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(139,195,74,0.04);
+  --accent-color-opacity2: rgba(139,195,74,0.12);
+  --accent-color-opacity3: rgba(139,195,74,0.16);
+  --accent-color-opacity4: rgba(139,195,74,0.24);
+}
+
+.secLime {
+  --accent-color: #CDDC39;
+  --accent-color-light: #E6EE9C;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(205,220,57,0.04);
+  --accent-color-opacity2: rgba(205,220,57,0.12);
+  --accent-color-opacity3: rgba(205,220,57,0.16);
+  --accent-color-opacity4: rgba(205,220,57,0.24);
+}
+
+.secYellow {
+  --accent-color: #FFEB3B;
+  --accent-color-light: #FFF59D;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,235,59,0.04);
+  --accent-color-opacity2: rgba(255,235,59,0.12);
+  --accent-color-opacity3: rgba(255,235,59,0.16);
+  --accent-color-opacity4: rgba(255,235,59,0.24);
+}
+
+.secAmber {
+  --accent-color: #FFC107;
+  --accent-color-light: #FFE082;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,193,7,0.04);
+  --accent-color-opacity2: rgba(255,193,7,0.12);
+  --accent-color-opacity3: rgba(255,193,7,0.16);
+  --accent-color-opacity4: rgba(255,193,7,0.24);
+}
+
+.secOrange {
+  --accent-color: #FF9800;
+  --accent-color-light: #FFCC80;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,152,0,0.04);
+  --accent-color-opacity2: rgba(255,152,0,0.12);
+  --accent-color-opacity3: rgba(255,152,0,0.16);
+  --accent-color-opacity4: rgba(255,152,0,0.24);
+}
+
+.secDeepOrange {
+  --accent-color: #FF5722;
+  --accent-color-light: #FFAB91;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,87,34,0.04);
+  --accent-color-opacity2: rgba(255,87,34,0.12);
+  --accent-color-opacity3: rgba(255,87,34,0.16);
+  --accent-color-opacity4: rgba(255,87,34,0.24);
+}
+
 body {
  color: var(--primary-text-color);
  background-color: var(--bg-color);
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@ -1,7 +1,7 @@
@charset "UTF-8";
 .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: absolute;
-  top: 0;
+  top: 3px;
  left: 0;
  width: 100%;
  height: 100%;
@ -982,6 +982,7 @@ body.vjs-full-window {

 .video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
+  top: 3px;
 }

 .video-js .vjs-volume-panel .vjs-volume-control {
@ -1204,7 +1205,7 @@ body.vjs-full-window {
 .video-js .vjs-time-control {
  flex: none;
  font-size: 1em;
-  line-height: 3em;
+  line-height: 4em;
  min-width: 2em;
  width: auto;
  padding-left: 0em;
@ -1292,7 +1293,7 @@ video::-webkit-media-text-track-display {
 .vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
  position: absolute;
-  top: 30%;
+  top: 16px;
  left: 0;
  width: 100%;
  height: 100%;
@ -1802,7 +1803,7 @@ video::-webkit-media-text-track-display {
    right: 0;
    width: 100%;
    height: .4em;
-    top: -.4em
+    top: -.1em
 }

 .video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder {
@ -1918,11 +1919,11 @@ video::-webkit-media-text-track-display {
 }

 .video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
-    background-color: #cc181e
+    background-color: var(--primary-color)
 }

 .video-js .vjs-loading-spinner {
-    border-color: #cc181e
+    border-color: var(--primary-color)
 }

 .video-js .vjs-control-bar2 {
@ -1936,7 +1937,7 @@ video::-webkit-media-text-track-display {
 }

 .video-js .vjs-play-progress,.video-js  .vjs-volume-level {
-    background-color: #cc181e
+    background-color: var(--primary-color)
 }

 .video-js .vjs-load-progress {
@ -1981,3 +1982,7 @@ video::-webkit-media-text-track-display {
    pointer-events: none;
    box-shadow: 0 0 7px rgba(0,0,0,.6);
 }
+
+.video-js .vjs-http-source-selector {
+  top: 4px;
+}
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@ -34,7 +34,8 @@
        </div>
        <ft-button
          label="SUBSCRIBE"
-          background-color="#f44336"
+          background-color="var(--primary-color)"
+          text-color="var(--text-with-main-color)"
          class="subscribeButton"
          @click="handleSubscription"
        />
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
+import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
 import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue'

@ -11,6 +12,7 @@ export default Vue.extend({
    'ft-card': FtCard,
    'ft-element-list': FtElementList,
    'general-settings': GeneralSettings,
+    'theme-settings': ThemeSettings,
    'player-settings': PlayerSettings,
    'subscription-settings': SubscriptionSettings
  },
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@ -1,6 +1,7 @@
 <template>
  <div>
    <general-settings />
+    <theme-settings />
    <player-settings />
    <subscription-settings />
  </div>
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@ -65,8 +65,12 @@ export default Vue.extend({
      return this.$store.getters.getInvidiousInstance
    },

-    videoFormatPreference: function() {
-      return this.$store.getters.getVideoFormatPreference
+    defaultVideoFormat: function () {
+      return this.$store.getters.getDefaultVideoFormat
+    },
+
+    forceLocalBackendForLegacy: function () {
+      return this.$store.getters.getForceLocalBackendForLegacy
    },

    videoDashUrl: function () {
@ -100,6 +104,10 @@ export default Vue.extend({
          break
        case 'invidious':
          this.getVideoInformationInvidious(this.videoId)
+
+          if (this.forceLocalBackendForLegacy) {
+            this.getVideoInformationLocal(this.videoId)
+          }
          break
      }
    },
@ -108,7 +116,7 @@ export default Vue.extend({
    this.videoId = this.$route.params.id
    this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90`

-    this.activeFormat = this.videoFormatPreference
+    this.activeFormat = this.defaultVideoFormat

    if (this.proxyVideos) {
      this.dashSrc = this.dashSrc + '?local=true'
@ -116,10 +124,10 @@ export default Vue.extend({

    switch (this.backendPreference) {
      case 'local':
-        this.getVideoInformationLocal(this.videoId)
+        this.getVideoInformationLocal()
        break
      case 'invidious':
-        this.getVideoInformationInvidious(this.videoId)
+        this.getVideoInformationInvidious()
        break
    }
  },
@ -223,7 +231,6 @@ export default Vue.extend({
          this.videoPublished = result.published * 1000
          this.videoDescriptionHtml = result.descriptionHtml
          this.recommendedVideos = result.recommendedVideos
-          this.videoSourceList = result.formatStreams.reverse()
          this.captionSourceList = result.captions.map(caption => {
            caption.url = this.invidiousInstance + caption.url
            caption.type = ''
@ -231,6 +238,12 @@ export default Vue.extend({
            return caption
          })

+          if (this.forceLocalBackendForLegacy) {
+            this.videoSourceList = result.formatStreams.reverse()
+          } else {
+            this.getLegacyFormats()
+          }
+
          this.isLoading = false
        })
        .catch(err => {
@ -247,6 +260,14 @@ export default Vue.extend({
        })
    },

+    getLegacyFormats: function () {
+      this.$store
+        .dispatch('ytGetVideoInformation', this.videoId)
+        .then(result => {
+          this.videoSourceList = result.player_response.streamingData.formats
+        })
+    },
+
    enableDashFormat: function () {
      if (this.activeFormat === 'dash') {
        return