From e1a2d43c9db6b6afb2e6a3148b966b58368d084b Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 7 Oct 2021 19:41:01 +0300
Subject: [PATCH 01/29] Add system preference to theme-settings

---
 src/renderer/components/theme-settings/theme-settings.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index b38e95a010d35..748d0273e00cf 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -35,6 +35,7 @@ export default Vue.extend({
       baseThemeValues: [
         'light',
         'dark',
+        'system',
         'black',
         'dracula'
       ],
@@ -99,6 +100,7 @@ export default Vue.extend({
       return [
         this.$t('Settings.Theme Settings.Base Theme.Light'),
         this.$t('Settings.Theme Settings.Base Theme.Dark'),
+        this.$t('Settings.Theme Settings.Base Theme.System'),
         this.$t('Settings.Theme Settings.Base Theme.Black'),
         this.$t('Settings.Theme Settings.Base Theme.Dracula')
       ]

From 2c04d3c44192443a8a4d4ecf01e915cdf29bcd9d Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 7 Oct 2021 19:41:56 +0300
Subject: [PATCH 02/29] Add watching logic to check for dark theme settings

---
 src/renderer/App.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index ec2ebd1372154..0ac467477e651 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -124,6 +124,7 @@ export default Vue.extend({
   created () {
     this.checkThemeSettings()
     this.setWindowTitle()
+    this.watchSystemTheme()
   },
   mounted: function () {
     this.grabUserSettings().then(async () => {
@@ -186,11 +187,26 @@ export default Vue.extend({
       this.updateTheme(theme)
     },
 
+    watchSystemTheme: function () {
+      window.matchMedia('(prefers-color-scheme: dark)').onchange = (e) => {
+        this.checkThemeSettings()
+      }
+    },
+
+    getThemeClass: function (baseTheme) {
+      if (baseTheme === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      }
+
+      return baseTheme
+    },
+
     updateTheme: function (theme) {
       console.log(theme)
-      const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
+      let className = `${this.getThemeClass(theme.baseTheme)} ${theme.mainColor} ${theme.secColor}`
       const body = document.getElementsByTagName('body')[0]
       body.className = className
+
       localStorage.setItem('baseTheme', theme.baseTheme)
       localStorage.setItem('mainColor', theme.mainColor)
       localStorage.setItem('secColor', theme.secColor)

From aa2686cc57a2e04dd0475eafd072589a5544b50e Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 7 Oct 2021 19:44:53 +0300
Subject: [PATCH 03/29] Add en system theme translation

---
 static/locales/en-US.yaml | 1 +
 static/locales/en_GB.yaml | 1 +
 2 files changed, 2 insertions(+)

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 324f214fd93ff..708dfcb64d8cc 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -163,6 +163,7 @@ Settings:
       Base Theme: Base Theme
       Black: Black
       Dark: Dark
+      System: System
       Light: Light
       Dracula: Dracula
     Main Color Theme:
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index a298e962ecd42..3ea3ff2cceae5 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -158,6 +158,7 @@ Settings:
       Base Theme: 'Base theme'
       Black: 'Black'
       Dark: 'Dark'
+      System: 'System'
       Light: 'Light'
       Dracula: 'Dracula'
     Main Color Theme:

From 125ab92272c6e4d39eab6741db42c38b2cdb4046 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 8 Oct 2021 09:37:10 +0300
Subject: [PATCH 04/29] Add explicit darkTheme option to browserWindow

---
 src/main/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/main/index.js b/src/main/index.js
index c594cfbd6b589..e61fcd05038a9 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,6 +1,6 @@
 import {
   app, BrowserWindow, dialog, Menu, ipcMain,
-  powerSaveBlocker, screen, session, shell
+  powerSaveBlocker, screen, session, shell, nativeTheme
 } from 'electron'
 import path from 'path'
 import cp from 'child_process'
@@ -38,6 +38,8 @@ function runApp() {
   let mainWindow
   let startupUrl
 
+  nativeTheme.themeSource = 'system'
+
   // CORS somehow gets re-enabled in Electron v9.0.4
   // This line disables it.
   // This line can possible be removed if the issue is fixed upstream
@@ -177,6 +179,7 @@ function runApp() {
      */
     const commonBrowserWindowOptions = {
       backgroundColor: '#212121',
+      darkTheme: nativeTheme.shouldUseDarkColors,
       icon: isDev
         ? path.join(__dirname, '../../_icons/iconColor.png')
         /* eslint-disable-next-line */

From 5343f8a02bbed66fa97a23bbae484b1f762e40d1 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 8 Oct 2021 09:41:29 +0300
Subject: [PATCH 05/29] Remove unnecessary themeSource line

---
 src/main/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index e61fcd05038a9..42fa9f2d2709e 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -38,8 +38,6 @@ function runApp() {
   let mainWindow
   let startupUrl
 
-  nativeTheme.themeSource = 'system'
-
   // CORS somehow gets re-enabled in Electron v9.0.4
   // This line disables it.
   // This line can possible be removed if the issue is fixed upstream

From 2893fbf141b0b47e9952a4ec746b27bfeb0abbff Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 8 Oct 2021 09:44:08 +0300
Subject: [PATCH 06/29] Fix lint errors

---
 src/renderer/App.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 0ac467477e651..0d680eedc6e93 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -203,7 +203,7 @@ export default Vue.extend({
 
     updateTheme: function (theme) {
       console.log(theme)
-      let className = `${this.getThemeClass(theme.baseTheme)} ${theme.mainColor} ${theme.secColor}`
+      const className = `${this.getThemeClass(theme.baseTheme)} ${theme.mainColor} ${theme.secColor}`
       const body = document.getElementsByTagName('body')[0]
       body.className = className
 
@@ -465,7 +465,7 @@ export default Vue.extend({
       'setInvidiousInstancesList'
     ]),
 
-    setWindowTitle: function() {
+    setWindowTitle: function () {
       if (this.windowTitle !== null) {
         document.title = this.windowTitle
       }

From 607fc15120ef39cb8dd38f56611ff2860fa1fa6d Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 9 Oct 2021 11:49:21 +0300
Subject: [PATCH 07/29] Move to using main process messaging for theme change

---
 src/main/index.js   | 10 ++++++++++
 src/renderer/App.js | 40 ++++++++++++++++++++++------------------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 42fa9f2d2709e..83d9cde26eddc 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -338,7 +338,17 @@ function runApp() {
     app.quit()
   })
 
+<<<<<<< HEAD
   ipcMain.on(IpcChannels.ENABLE_PROXY, (_, url) => {
+=======
+  nativeTheme.on('updated', () => {
+    if (mainWindow) {
+      mainWindow.webContents.send('native-theme-update', nativeTheme.shouldUseDarkColors)
+    }
+  })
+
+  ipcMain.on('enableProxy', (_, url) => {
+>>>>>>> 4b5a72ae (Move to using main process messaging for theme change)
     console.log(url)
     session.defaultSession.setProxy({
       proxyRules: url
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 0d680eedc6e93..cfb27c7f5b19e 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -122,9 +122,9 @@ export default Vue.extend({
     }
   },
   created () {
+    this.setBodytheme()
     this.checkThemeSettings()
     this.setWindowTitle()
-    this.watchSystemTheme()
   },
   mounted: function () {
     this.grabUserSettings().then(async () => {
@@ -144,6 +144,7 @@ export default Vue.extend({
           this.activateKeyboardShortcuts()
           this.openAllLinksExternally()
           this.enableOpenUrl()
+          this.watchSystemTheme()
           await this.checkExternalPlayer()
         }
 
@@ -161,6 +162,14 @@ export default Vue.extend({
     })
   },
   methods: {
+    setBodytheme: function () {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.dataset.theme = 'dark'
+      } else {
+        document.body.dataset.theme = 'light'
+      }
+    },
+
     checkThemeSettings: function () {
       let baseTheme = localStorage.getItem('baseTheme')
       let mainColor = localStorage.getItem('mainColor')
@@ -187,25 +196,10 @@ export default Vue.extend({
       this.updateTheme(theme)
     },
 
-    watchSystemTheme: function () {
-      window.matchMedia('(prefers-color-scheme: dark)').onchange = (e) => {
-        this.checkThemeSettings()
-      }
-    },
-
-    getThemeClass: function (baseTheme) {
-      if (baseTheme === 'system') {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-      }
-
-      return baseTheme
-    },
-
     updateTheme: function (theme) {
       console.log(theme)
-      const className = `${this.getThemeClass(theme.baseTheme)} ${theme.mainColor} ${theme.secColor}`
-      const body = document.getElementsByTagName('body')[0]
-      body.className = className
+      const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
+      document.body.className = className
 
       localStorage.setItem('baseTheme', theme.baseTheme)
       localStorage.setItem('mainColor', theme.mainColor)
@@ -439,6 +433,16 @@ export default Vue.extend({
       })
     },
 
+    /**
+     * Linux fix for dynamically updating theme preference, this works on
+     * all systems running the electron app.
+     */
+    watchSystemTheme: function () {
+      ipcRenderer.on('native-theme-update', (event, shouldUseDarkColors) => {
+        document.body.dataset.theme = shouldUseDarkColors ? 'dark' : 'light'
+      });
+    },
+
     enableOpenUrl: function () {
       ipcRenderer.on('openUrl', (event, url) => {
         if (url) {

From f07a3a25fefe33b1a61e8e59bcca428453b93782 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 9 Oct 2021 11:49:32 +0300
Subject: [PATCH 08/29] Add system dataset selectors for themes

---
 src/renderer/themes.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 73e365fba2164..d22ec1ea08061 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -1,4 +1,4 @@
-.light {
+.system[data-theme*='light'], .light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
   --tertiary-text-color: #757575;
@@ -22,7 +22,7 @@
   --logo-text: url("~../../_icons/textColorSmall.png");
 }
 
-.dark {
+.system[data-theme*='dark'], .dark {
   --primary-text-color: #EEEEEE;
   --secondary-text-color: #ddd;
   --tertiary-text-color: #999;

From f2ef15c11dd871c330474a5a4535cee8fe81762a Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 9 Oct 2021 11:50:38 +0300
Subject: [PATCH 09/29] Fix lint errors

---
 src/renderer/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index cfb27c7f5b19e..3208ab4f37e7b 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -440,7 +440,7 @@ export default Vue.extend({
     watchSystemTheme: function () {
       ipcRenderer.on('native-theme-update', (event, shouldUseDarkColors) => {
         document.body.dataset.theme = shouldUseDarkColors ? 'dark' : 'light'
-      });
+      })
     },
 
     enableOpenUrl: function () {

From ee930306603c5e2af92049c764d45c3a4b065b36 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 10 Oct 2021 16:58:33 +0300
Subject: [PATCH 10/29] Change system theme to system default

---
 src/renderer/components/theme-settings/theme-settings.js | 4 ++--
 static/locales/en-US.yaml                                | 2 +-
 static/locales/en_GB.yaml                                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 748d0273e00cf..109bbe3980e9e 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -33,9 +33,9 @@ export default Vue.extend({
         'no'
       ],
       baseThemeValues: [
+        'system',
         'light',
         'dark',
-        'system',
         'black',
         'dracula'
       ],
@@ -98,9 +98,9 @@ export default Vue.extend({
 
     baseThemeNames: function () {
       return [
+        this.$t('Settings.Theme Settings.Base Theme.System Default'),
         this.$t('Settings.Theme Settings.Base Theme.Light'),
         this.$t('Settings.Theme Settings.Base Theme.Dark'),
-        this.$t('Settings.Theme Settings.Base Theme.System'),
         this.$t('Settings.Theme Settings.Base Theme.Black'),
         this.$t('Settings.Theme Settings.Base Theme.Dracula')
       ]
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 708dfcb64d8cc..94240baf53281 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -163,7 +163,7 @@ Settings:
       Base Theme: Base Theme
       Black: Black
       Dark: Dark
-      System: System
+      System Default: System Default
       Light: Light
       Dracula: Dracula
     Main Color Theme:
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index 3ea3ff2cceae5..fdaea70016597 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -158,7 +158,7 @@ Settings:
       Base Theme: 'Base theme'
       Black: 'Black'
       Dark: 'Dark'
-      System: 'System'
+      System Default: 'System Default'
       Light: 'Light'
       Dracula: 'Dracula'
     Main Color Theme:

From 774eb0c2875fae1aba3ee54df7851dad6257f300 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 10 Oct 2021 17:00:16 +0300
Subject: [PATCH 11/29] Use system default for deciding background color of
 newWindow

---
 src/main/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/index.js b/src/main/index.js
index 83d9cde26eddc..a017a3a2c5b4d 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -176,7 +176,8 @@ function runApp() {
      * Initial window options
      */
     const commonBrowserWindowOptions = {
-      backgroundColor: '#212121',
+      // We respect system defaults first, before checking for user-preferences
+      backgroundColor: nativeTheme.shouldUseDarkColors ? '#f1f1f1' : '#f1f1f1',
       darkTheme: nativeTheme.shouldUseDarkColors,
       icon: isDev
         ? path.join(__dirname, '../../_icons/iconColor.png')

From 025998fcea0d38aca1092eff7cb826dc0806ae04 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 10 Oct 2021 23:50:12 +0300
Subject: [PATCH 12/29] Add baseTheme to state persistance

---
 src/renderer/components/theme-settings/theme-settings.js  | 4 +++-
 src/renderer/components/theme-settings/theme-settings.vue | 2 +-
 src/renderer/store/modules/settings.js                    | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 109bbe3980e9e..a4df3f717d7e3 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -142,7 +142,7 @@ export default Vue.extend({
     this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
   },
   methods: {
-    updateBaseTheme: function (theme) {
+    updateTheme: function (theme) {
       const mainColor = `main${this.currentMainColor}`
       const secColor = `sec${this.currentSecColor}`
 
@@ -152,6 +152,7 @@ export default Vue.extend({
         secColor: secColor
       }
 
+      this.updateBaseTheme(theme)
       this.$parent.$parent.updateTheme(payload)
       this.currentBaseTheme = theme
     },
@@ -218,6 +219,7 @@ export default Vue.extend({
 
     ...mapActions([
       'updateBarColor',
+      'updateBaseTheme',
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar'
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 2b5082fbf08f3..28bf1090a04df 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -46,7 +46,7 @@
         :value="currentBaseTheme"
         :select-names="baseThemeNames"
         :select-values="baseThemeValues"
-        @change="updateBaseTheme"
+        @change="updateTheme"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Main Color Theme.Main Color Theme')"
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 6b9140a333e8f..22db696087c1a 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -167,6 +167,7 @@ const state = {
   barColor: false,
   checkForBlogPosts: true,
   checkForUpdates: true,
+  baseTheme: 'system',
   // currentTheme: 'lightRed',
   defaultCaptionSettings: '{}',
   defaultInterval: 5,

From 1cb02e5d35bc1113dbcce60249c66254997ce296 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 10 Oct 2021 23:50:25 +0300
Subject: [PATCH 13/29] Use baseTheme on browserWindow creation

---
 src/main/index.js | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/main/index.js b/src/main/index.js
index a017a3a2c5b4d..422fc1783e007 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -176,7 +176,7 @@ function runApp() {
      * Initial window options
      */
     const commonBrowserWindowOptions = {
-      // We respect system defaults first, before checking for user-preferences
+      // Respect system defaults first, before checking for user-preferences
       backgroundColor: nativeTheme.shouldUseDarkColors ? '#f1f1f1' : '#f1f1f1',
       darkTheme: nativeTheme.shouldUseDarkColors,
       icon: isDev
@@ -230,7 +230,35 @@ function runApp() {
       height: 800
     })
 
+<<<<<<< HEAD
     const boundsDoc = await baseHandlers.settings._findBounds()
+=======
+    await settingsDb.findOne({'_id': 'baseTheme'}).then(({ value }) => {
+      switch (value) {
+        case 'system':
+          newWindow.setBackgroundColor(
+            nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
+          )
+          break
+        case 'dark':
+          newWindow.setBackgroundColor('#212121')
+          break
+        case 'light':
+          newWindow.setBackgroundColor('#f1f1f1')
+          break
+        case 'black':
+          newWindow.setBackgroundColor('#000')
+          break
+        case 'dracula':
+          newWindow.setBackgroundColor('#282a36')
+          break
+      }
+    }).catch((error) => {
+      // Stick with the system default in the case we cannot find baseTheme
+    })
+
+    const boundsDoc = await settingsDb.findOne({ _id: 'bounds' })
+>>>>>>> ab1e0dae (Use baseTheme on browserWindow creation)
     if (typeof boundsDoc?.value === 'object') {
       const { maximized, ...bounds } = boundsDoc.value
       const allDisplaysSummaryWidth = screen

From 24aa3282e250586ab0b10bc3f6ee2730323d55a4 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 10 Oct 2021 23:56:08 +0300
Subject: [PATCH 14/29] Fix lint errors

---
 src/main/index.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 422fc1783e007..de89808e481ba 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -230,10 +230,8 @@ function runApp() {
       height: 800
     })
 
-<<<<<<< HEAD
     const boundsDoc = await baseHandlers.settings._findBounds()
-=======
-    await settingsDb.findOne({'_id': 'baseTheme'}).then(({ value }) => {
+    await settingsDb.findOne({ _id: 'baseTheme' }).then(({ value }) => {
       switch (value) {
         case 'system':
           newWindow.setBackgroundColor(
@@ -253,12 +251,9 @@ function runApp() {
           newWindow.setBackgroundColor('#282a36')
           break
       }
-    }).catch((error) => {
-      // Stick with the system default in the case we cannot find baseTheme
     })
 
     const boundsDoc = await settingsDb.findOne({ _id: 'bounds' })
->>>>>>> ab1e0dae (Use baseTheme on browserWindow creation)
     if (typeof boundsDoc?.value === 'object') {
       const { maximized, ...bounds } = boundsDoc.value
       const allDisplaysSummaryWidth = screen
@@ -367,17 +362,13 @@ function runApp() {
     app.quit()
   })
 
-<<<<<<< HEAD
-  ipcMain.on(IpcChannels.ENABLE_PROXY, (_, url) => {
-=======
   nativeTheme.on('updated', () => {
     if (mainWindow) {
       mainWindow.webContents.send('native-theme-update', nativeTheme.shouldUseDarkColors)
     }
   })
-
-  ipcMain.on('enableProxy', (_, url) => {
->>>>>>> 4b5a72ae (Move to using main process messaging for theme change)
+  
+  ipcMain.on(IpcChannels.ENABLE_PROXY, (_, url) => {
     console.log(url)
     session.defaultSession.setProxy({
       proxyRules: url

From d65c2c31071213beee6175f4b449e7a2cae22bb1 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 14 Oct 2021 09:47:42 +0300
Subject: [PATCH 15/29] Improve window background logic

---
 src/main/index.js                             | 42 ++++++++-----------
 src/renderer/App.js                           |  7 +++-
 .../theme-settings/theme-settings.js          |  2 +-
 .../theme-settings/theme-settings.vue         |  2 +-
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index de89808e481ba..39caaaa00191b 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -172,12 +172,27 @@ function runApp() {
   }
 
   async function createWindow(replaceMainWindow = true) {
+    const windowBackground = await settingsDb.findOne({ _id: 'baseTheme' }).then(({ value }) => {
+      switch (value) {
+        case 'dark':
+          return '#212121'
+        case 'light':
+          return '#f1f1f1'
+        case 'black':
+          return '#000'
+        case 'dracula':
+          return '#282a36'
+        case 'system':
+        default:
+          return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
+      }
+    })
+
     /**
      * Initial window options
      */
     const commonBrowserWindowOptions = {
-      // Respect system defaults first, before checking for user-preferences
-      backgroundColor: nativeTheme.shouldUseDarkColors ? '#f1f1f1' : '#f1f1f1',
+      backgroundColor: windowBackground,
       darkTheme: nativeTheme.shouldUseDarkColors,
       icon: isDev
         ? path.join(__dirname, '../../_icons/iconColor.png')
@@ -230,29 +245,6 @@ function runApp() {
       height: 800
     })
 
-    const boundsDoc = await baseHandlers.settings._findBounds()
-    await settingsDb.findOne({ _id: 'baseTheme' }).then(({ value }) => {
-      switch (value) {
-        case 'system':
-          newWindow.setBackgroundColor(
-            nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
-          )
-          break
-        case 'dark':
-          newWindow.setBackgroundColor('#212121')
-          break
-        case 'light':
-          newWindow.setBackgroundColor('#f1f1f1')
-          break
-        case 'black':
-          newWindow.setBackgroundColor('#000')
-          break
-        case 'dracula':
-          newWindow.setBackgroundColor('#282a36')
-          break
-      }
-    })
-
     const boundsDoc = await settingsDb.findOne({ _id: 'bounds' })
     if (typeof boundsDoc?.value === 'object') {
       const { maximized, ...bounds } = boundsDoc.value
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 3208ab4f37e7b..57851262d7f54 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -122,7 +122,7 @@ export default Vue.extend({
     }
   },
   created () {
-    this.setBodytheme()
+    this.setBodyTheme()
     this.checkThemeSettings()
     this.setWindowTitle()
   },
@@ -162,7 +162,7 @@ export default Vue.extend({
     })
   },
   methods: {
-    setBodytheme: function () {
+    setBodyTheme: function () {
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.body.dataset.theme = 'dark'
       } else {
@@ -175,6 +175,7 @@ export default Vue.extend({
       let mainColor = localStorage.getItem('mainColor')
       let secColor = localStorage.getItem('secColor')
 
+      console.log(baseTheme)
       if (baseTheme === null) {
         baseTheme = 'dark'
       }
@@ -204,6 +205,8 @@ export default Vue.extend({
       localStorage.setItem('baseTheme', theme.baseTheme)
       localStorage.setItem('mainColor', theme.mainColor)
       localStorage.setItem('secColor', theme.secColor)
+
+      console.log(localStorage.getItem('baseTheme'))
     },
 
     checkForNewUpdates: function () {
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index a4df3f717d7e3..8d5bedfd08f1d 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -142,7 +142,7 @@ export default Vue.extend({
     this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
   },
   methods: {
-    updateTheme: function (theme) {
+    handleUpdateTheme: function (theme) {
       const mainColor = `main${this.currentMainColor}`
       const secColor = `sec${this.currentSecColor}`
 
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 28bf1090a04df..b767e09ab2a66 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -46,7 +46,7 @@
         :value="currentBaseTheme"
         :select-names="baseThemeNames"
         :select-values="baseThemeValues"
-        @change="updateTheme"
+        @change="handleUpdateTheme"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Main Color Theme.Main Color Theme')"

From b206d6870b1e5472703bba65be1e29899d42fa78 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 14 Oct 2021 10:45:23 +0300
Subject: [PATCH 16/29] Catch settingsDb errors

---
 src/main/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/main/index.js b/src/main/index.js
index 39caaaa00191b..456ce90b627ba 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -186,6 +186,9 @@ function runApp() {
         default:
           return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
       }
+    }).catch((error) => {
+      // Default to nativeTheme settings if nothing is found.
+      return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
     })
 
     /**

From b2af0f5193ed0bc6a63baa6eb11f9a09c057a057 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 14 Oct 2021 11:07:56 +0300
Subject: [PATCH 17/29] Remove dark flash on light themes

---
 src/index.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ejs b/src/index.ejs
index 11d81f7d19926..a8d1de0293307 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -16,7 +16,7 @@
     <% } %>
   </head>
 
-  <body class="dark mainRed secBlue">
+  <body class="mainRed secBlue">
     <div id="app"></div>
     <!-- Set `__static` path to static files in production -->
     <script>

From 10e719b3117196ae388f5f3bf7bd7fa365a4c366 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 14 Oct 2021 12:49:00 +0300
Subject: [PATCH 18/29] Fix lint issues

---
 src/main/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/index.js b/src/main/index.js
index 456ce90b627ba..66305b9cd0879 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -187,6 +187,7 @@ function runApp() {
           return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
       }
     }).catch((error) => {
+      console.log(error)
       // Default to nativeTheme settings if nothing is found.
       return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
     })

From 2907bfbf544617263df65ab06c144898a876e13c Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 15 Oct 2021 09:51:35 +0300
Subject: [PATCH 19/29] Fix system default sync on multiple windows

---
 src/main/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 66305b9cd0879..9a5f94121472a 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -359,9 +359,11 @@ function runApp() {
   })
 
   nativeTheme.on('updated', () => {
-    if (mainWindow) {
-      mainWindow.webContents.send('native-theme-update', nativeTheme.shouldUseDarkColors)
-    }
+    const allWindows = BrowserWindow.getAllWindows()
+
+    allWindows.forEach((window) => {
+      window.webContents.send('native-theme-update', nativeTheme.shouldUseDarkColors)
+    })
   })
   
   ipcMain.on(IpcChannels.ENABLE_PROXY, (_, url) => {

From 1b1e6973c3d8409c7d86ef8a5ef482b3d1c0d225 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 15 Oct 2021 10:24:59 +0300
Subject: [PATCH 20/29] Load database on each new window

---
 src/main/index.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/main/index.js b/src/main/index.js
index 9a5f94121472a..79222aa5ce688 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -35,9 +35,14 @@ function runApp() {
   process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'
   const isDev = process.env.NODE_ENV === 'development'
   const isDebug = process.argv.includes('--debug')
+  const localDataStorage = app.getPath('userData') // Grabs the userdata directory based on the user's OS
+
+  let settingsDb
   let mainWindow
   let startupUrl
 
+  loadDatabase()
+
   // CORS somehow gets re-enabled in Electron v9.0.4
   // This line disables it.
   // This line can possible be removed if the issue is fixed upstream
@@ -160,6 +165,13 @@ function runApp() {
       mainWindow.webContents.openDevTools()
     }
   })
+  
+  function loadDatabase() {
+    settingsDb = Datastore.create({
+      filename: localDataStorage + '/settings.db',
+      autoload: true
+    })
+  }
 
   async function installDevTools() {
     try {
@@ -172,6 +184,8 @@ function runApp() {
   }
 
   async function createWindow(replaceMainWindow = true) {
+    loadDatabase()
+
     const windowBackground = await settingsDb.findOne({ _id: 'baseTheme' }).then(({ value }) => {
       switch (value) {
         case 'dark':

From 642aaf25a9b8e87aa3fb5adb5225218af696a493 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Fri, 15 Oct 2021 10:26:05 +0300
Subject: [PATCH 21/29] Fix lint errors

---
 src/main/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/index.js b/src/main/index.js
index 79222aa5ce688..1200bcace83b5 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -165,7 +165,7 @@ function runApp() {
       mainWindow.webContents.openDevTools()
     }
   })
-  
+
   function loadDatabase() {
     settingsDb = Datastore.create({
       filename: localDataStorage + '/settings.db',

From 08f587da4ac34c880527ed0533efc7f78f1cdbdc Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Mon, 20 Dec 2021 21:24:39 +0100
Subject: [PATCH 22/29] Update compatibility for shared electron storage

---
 src/constants.js                |  1 +
 src/datastores/handlers/base.js |  4 ++++
 src/main/index.js               | 17 ++---------------
 src/renderer/App.js             |  6 ++----
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index ba55e79b97c8a..20aca01a3b91c 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -12,6 +12,7 @@ const IpcChannels = {
   START_POWER_SAVE_BLOCKER: 'start-power-save-blocker',
   CREATE_NEW_WINDOW: 'create-new-window',
   OPEN_IN_EXTERNAL_PLAYER: 'open-in-external-player',
+  NATIVE_THEME_UPDATE: 'native-theme-update',
 
   DB_SETTINGS: 'db-settings',
   DB_HISTORY: 'db-history',
diff --git a/src/datastores/handlers/base.js b/src/datastores/handlers/base.js
index 90b9d183d7ff3..1250052510cb1 100644
--- a/src/datastores/handlers/base.js
+++ b/src/datastores/handlers/base.js
@@ -27,6 +27,10 @@ class Settings {
     return db.settings.findOne({ _id: 'bounds' })
   }
 
+  static _findTheme() {
+    return db.settings.findOne({ _id: 'baseTheme' })
+  }
+
   static _updateBounds(value) {
     return db.settings.update({ _id: 'bounds' }, { _id: 'bounds', value }, { upsert: true })
   }
diff --git a/src/main/index.js b/src/main/index.js
index 1200bcace83b5..61436bee90e7e 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -35,14 +35,10 @@ function runApp() {
   process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'
   const isDev = process.env.NODE_ENV === 'development'
   const isDebug = process.argv.includes('--debug')
-  const localDataStorage = app.getPath('userData') // Grabs the userdata directory based on the user's OS
 
-  let settingsDb
   let mainWindow
   let startupUrl
 
-  loadDatabase()
-
   // CORS somehow gets re-enabled in Electron v9.0.4
   // This line disables it.
   // This line can possible be removed if the issue is fixed upstream
@@ -166,13 +162,6 @@ function runApp() {
     }
   })
 
-  function loadDatabase() {
-    settingsDb = Datastore.create({
-      filename: localDataStorage + '/settings.db',
-      autoload: true
-    })
-  }
-
   async function installDevTools() {
     try {
       /* eslint-disable */
@@ -184,9 +173,7 @@ function runApp() {
   }
 
   async function createWindow(replaceMainWindow = true) {
-    loadDatabase()
-
-    const windowBackground = await settingsDb.findOne({ _id: 'baseTheme' }).then(({ value }) => {
+    const windowBackground = await baseHandlers.settings._findTheme().then(({ value }) => {
       switch (value) {
         case 'dark':
           return '#212121'
@@ -376,7 +363,7 @@ function runApp() {
     const allWindows = BrowserWindow.getAllWindows()
 
     allWindows.forEach((window) => {
-      window.webContents.send('native-theme-update', nativeTheme.shouldUseDarkColors)
+      window.webContents.send(IpcChannels.NATIVE_THEME_UPDATE, nativeTheme.shouldUseDarkColors)
     })
   })
   
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 57851262d7f54..0df3d1b47db6e 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -12,6 +12,7 @@ import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
 import $ from 'jquery'
 import marked from 'marked'
 import Parser from 'rss-parser'
+import { IpcChannels } from '../constants'
 
 let ipcRenderer = null
 
@@ -198,15 +199,12 @@ export default Vue.extend({
     },
 
     updateTheme: function (theme) {
-      console.log(theme)
       const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
       document.body.className = className
 
       localStorage.setItem('baseTheme', theme.baseTheme)
       localStorage.setItem('mainColor', theme.mainColor)
       localStorage.setItem('secColor', theme.secColor)
-
-      console.log(localStorage.getItem('baseTheme'))
     },
 
     checkForNewUpdates: function () {
@@ -441,7 +439,7 @@ export default Vue.extend({
      * all systems running the electron app.
      */
     watchSystemTheme: function () {
-      ipcRenderer.on('native-theme-update', (event, shouldUseDarkColors) => {
+      ipcRenderer.on(IpcChannels.NATIVE_THEME_UPDATE, (event, shouldUseDarkColors) => {
         document.body.dataset.theme = shouldUseDarkColors ? 'dark' : 'light'
       })
     },

From d87aa545882b056ae727918f4009d72b2f79e823 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Mon, 20 Dec 2021 22:38:16 +0100
Subject: [PATCH 23/29] Remove unused console log

---
 src/renderer/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 0df3d1b47db6e..fa26b0983178f 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -176,7 +176,6 @@ export default Vue.extend({
       let mainColor = localStorage.getItem('mainColor')
       let secColor = localStorage.getItem('secColor')
 
-      console.log(baseTheme)
       if (baseTheme === null) {
         baseTheme = 'dark'
       }

From 1b74c3f0ce436aa92425ad4f7b6b9a3bcd99449b Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Tue, 21 Dec 2021 22:12:37 +0100
Subject: [PATCH 24/29] Revert unnecessary changes

---
 src/main/index.js   | 6 +++---
 src/renderer/App.js | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 61436bee90e7e..c7fec25770ebd 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -180,7 +180,7 @@ function runApp() {
         case 'light':
           return '#f1f1f1'
         case 'black':
-          return '#000'
+          return '#000000'
         case 'dracula':
           return '#282a36'
         case 'system':
@@ -250,7 +250,7 @@ function runApp() {
       height: 800
     })
 
-    const boundsDoc = await settingsDb.findOne({ _id: 'bounds' })
+    const boundsDoc = await baseHandlers.settings._findBounds()
     if (typeof boundsDoc?.value === 'object') {
       const { maximized, ...bounds } = boundsDoc.value
       const allDisplaysSummaryWidth = screen
@@ -366,7 +366,7 @@ function runApp() {
       window.webContents.send(IpcChannels.NATIVE_THEME_UPDATE, nativeTheme.shouldUseDarkColors)
     })
   })
-  
+
   ipcMain.on(IpcChannels.ENABLE_PROXY, (_, url) => {
     console.log(url)
     session.defaultSession.setProxy({
diff --git a/src/renderer/App.js b/src/renderer/App.js
index fa26b0983178f..8dcb3cd430e4c 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -198,6 +198,7 @@ export default Vue.extend({
     },
 
     updateTheme: function (theme) {
+      console.log(theme)
       const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
       document.body.className = className
 

From 6714ff8e32b292663f935bfb4e3513cc7a40ecc6 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Wed, 12 Jan 2022 23:06:43 +0100
Subject: [PATCH 25/29] Fix window maximize white flash

---
 src/main/index.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index c7fec25770ebd..2e19788d32c65 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -213,6 +213,7 @@ function runApp() {
         contextIsolation: false
       }
     }
+
     const newWindow = new BrowserWindow(
       Object.assign(
         {
@@ -265,9 +266,6 @@ function runApp() {
           height: bounds.height
         })
       }
-      if (maximized) {
-        newWindow.maximize()
-      }
     }
 
     // If called multiple times
@@ -292,6 +290,13 @@ function runApp() {
     // Show when loaded
     newWindow.once('ready-to-show', () => {
       newWindow.show()
+
+      if (typeof boundsDoc?.value === 'object') {
+        if (boundsDoc.value.maximized) {
+          newWindow.maximize()
+        }
+      }
+
       newWindow.focus()
     })
 

From 1c31a5275b81a3020b98ff385ce848d0c59e58d5 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 5 Mar 2022 23:40:22 +0100
Subject: [PATCH 26/29] Fix handleBaseTheme usage

---
 src/renderer/components/theme-settings/theme-settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index cfe5b1a01d5f7..f8d1522f3ebfb 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -46,7 +46,7 @@
         :value="baseTheme"
         :select-names="baseThemeNames"
         :select-values="baseThemeValues"
-        @change="handleUpdateTheme"
+        @change="updateBaseTheme"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Main Color Theme.Main Color Theme')"

From 5935fb2e6e8f5f5cf29932ad493e1f36c7e53a76 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 5 Mar 2022 23:53:08 +0100
Subject: [PATCH 27/29] Use data-system-theme instead of data-theme

---
 src/index.ejs           | 3 ++-
 src/renderer/App.js     | 6 +++---
 src/renderer/themes.css | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/index.ejs b/src/index.ejs
index a8d1de0293307..d3fab60d96127 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -16,7 +16,8 @@
     <% } %>
   </head>
 
-  <body class="mainRed secBlue">
+  <!-- The body class list is overwritten in App.js:202 using user preferences -->
+  <body class="system mainRed secBlue">
     <div id="app"></div>
     <!-- Set `__static` path to static files in production -->
     <script>
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 965a0000440dc..3501db3556ba5 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -183,9 +183,9 @@ export default Vue.extend({
   methods: {
     setBodyTheme: function () {
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.body.dataset.theme = 'dark'
+        document.body.dataset.systemTheme = 'dark'
       } else {
-        document.body.dataset.theme = 'light'
+        document.body.dataset.systemTheme = 'light'
       }
     },
 
@@ -449,7 +449,7 @@ export default Vue.extend({
      */
     watchSystemTheme: function () {
       ipcRenderer.on(IpcChannels.NATIVE_THEME_UPDATE, (event, shouldUseDarkColors) => {
-        document.body.dataset.theme = shouldUseDarkColors ? 'dark' : 'light'
+        document.body.dataset.systemTheme = shouldUseDarkColors ? 'dark' : 'light'
       })
     },
 
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index d22ec1ea08061..3cc12b015c13a 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -1,4 +1,4 @@
-.system[data-theme*='light'], .light {
+.system[data-system-theme*='light'], .light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
   --tertiary-text-color: #757575;
@@ -22,7 +22,7 @@
   --logo-text: url("~../../_icons/textColorSmall.png");
 }
 
-.system[data-theme*='dark'], .dark {
+.system[data-system-theme*='dark'], .dark {
   --primary-text-color: #EEEEEE;
   --secondary-text-color: #ddd;
   --tertiary-text-color: #999;

From f3e109cbca9aa7cc07c443e5a96b78ccb70cc204 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 5 Mar 2022 23:58:01 +0100
Subject: [PATCH 28/29] Revert window maximize changes

---
 src/main/index.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 4cf696128b395..7b0f638def422 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -265,6 +265,10 @@ function runApp() {
           height: bounds.height
         })
       }
+
+      if (maximized) {
+        newWindow.maximize()
+      }
     }
 
     // If called multiple times
@@ -299,13 +303,6 @@ function runApp() {
       if (newWindow.isVisible()) { return }
 
       newWindow.show()
-
-      if (typeof boundsDoc?.value === 'object') {
-        if (boundsDoc.value.maximized) {
-          newWindow.maximize()
-        }
-      }
-
       newWindow.focus()
     })
 

From 910f60b0bb70e658fe38a4904b07db0691c395c5 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sun, 6 Mar 2022 14:33:11 +0100
Subject: [PATCH 29/29] Fix theme flash on new window open

---
 src/index.ejs        |  3 +--
 src/renderer/App.js  | 20 ++++++++------------
 src/renderer/App.vue |  1 +
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/index.ejs b/src/index.ejs
index d3fab60d96127..f0dad7e033e66 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -16,8 +16,7 @@
     <% } %>
   </head>
 
-  <!-- The body class list is overwritten in App.js:202 using user preferences -->
-  <body class="system mainRed secBlue">
+  <body>
     <div id="app"></div>
     <!-- Set `__static` path to static files in production -->
     <script>
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 3501db3556ba5..7ce52b6ae2b59 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -114,6 +114,10 @@ export default Vue.extend({
       return this.$store.getters.getSecColor
     },
 
+    systemTheme: function () {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    },
+
     externalLinkOpeningPromptNames: function () {
       return [
         this.$t('Yes'),
@@ -142,11 +146,12 @@ export default Vue.extend({
   },
   created () {
     this.setBodyTheme()
-    this.checkThemeSettings()
     this.setWindowTitle()
   },
   mounted: function () {
     this.grabUserSettings().then(async () => {
+      this.checkThemeSettings()
+
       await this.fetchInvidiousInstances({ isDev: this.isDev })
       if (this.defaultInvidiousInstance === '') {
         await this.setRandomCurrentInvidiousInstance()
@@ -181,14 +186,6 @@ export default Vue.extend({
     })
   },
   methods: {
-    setBodyTheme: function () {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.body.dataset.systemTheme = 'dark'
-      } else {
-        document.body.dataset.systemTheme = 'light'
-      }
-    },
-
     checkThemeSettings: function () {
       const theme = {
         baseTheme: this.baseTheme || 'dark',
@@ -202,9 +199,8 @@ export default Vue.extend({
     updateTheme: function (theme) {
       console.group('updateTheme')
       console.log('Theme: ', theme)
-      const className = `${theme.baseTheme} main${theme.mainColor} sec${theme.secColor}`
-      const body = document.getElementsByTagName('body')[0]
-      body.className = className
+      document.body.className = `${theme.baseTheme} main${theme.mainColor} sec${theme.secColor}`
+      document.body.dataset.systemTheme = this.systemTheme
       console.groupEnd()
     },
 
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 0e5d5db1ef09e..2083d29bc78c9 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="dataReady"
     id="app"
     :class="{
       hideOutlines: hideOutlines,