From b716a165c87e731925e7934fe99e9b0cd381feda Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 2 Jun 2023 17:05:10 +0200
Subject: [PATCH] Use bootstraps bultin functionality to switch theme

---
 index.html                               | 34 +++++++++++++-----------
 src/components/ThemeSelect.vue           | 12 ++++-----
 src/styles/_bootstrap_variables_ovw.scss |  3 +++
 src/styles/_styles_ovw.scss              | 17 +++++++-----
 4 files changed, 38 insertions(+), 28 deletions(-)
diff --git a/index.html b/index.html
index 2b6ad1e9..cf82fac6 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,22 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="/favicon.ico">
-    <title>FreqUI</title>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="/favicon.ico">
+  <title>FreqUI</title>
+
+</head>
+
+<body data-bs-theme="dark">
+  <noscript>
+    <strong>We're sorry but FreqUI doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
 
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but FreqUI doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
 </html>
diff --git a/src/components/ThemeSelect.vue b/src/components/ThemeSelect.vue
index d8b1601c..7ab2ac68 100644
--- a/src/components/ThemeSelect.vue
+++ b/src/components/ThemeSelect.vue
@@ -6,8 +6,11 @@
 
 <script setup lang="ts">
 import { useSettingsStore } from '@/stores/settings';
+import { useColorMode } from 'bootstrap-vue-next';
 import { onMounted, ref } from 'vue';
 
+const mode = useColorMode();
+
 const activeTheme = ref('');
 const settingsStore = useSettingsStore();
 
@@ -18,17 +21,14 @@ const setTheme = (themeName: string) => {
   }
   if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
     // const styles = document.getElementsByTagName('style');
-    document.documentElement.setAttribute(
-      'data-theme',
-      themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
-    );
     if (activeTheme.value) {
       // Only transition if simple mode is active
-      document.documentElement.classList.add('ft-theme-transition');
+      document.body.classList.add('ft-theme-transition');
       window.setTimeout(() => {
-        document.documentElement.classList.remove('ft-theme-transition');
+        document.body.classList.remove('ft-theme-transition');
       }, 1000);
     }
+    mode.value = themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark';
   }
   // Save the theme as localstorage
   settingsStore.currentTheme = themeName;
diff --git a/src/styles/_bootstrap_variables_ovw.scss b/src/styles/_bootstrap_variables_ovw.scss
index 81889ffe..4210de67 100644
--- a/src/styles/_bootstrap_variables_ovw.scss
+++ b/src/styles/_bootstrap_variables_ovw.scss
@@ -2,3 +2,6 @@
 // $body-bg: rgb(42, 42, 49);
 $font-size-base: 0.9rem;
 $primary: #0089a1;
+
+$body-bg-dark: #121212;
+$body-color-dark: #dedede;
diff --git a/src/styles/_styles_ovw.scss b/src/styles/_styles_ovw.scss
index dcd55b96..b6f19192 100644
--- a/src/styles/_styles_ovw.scss
+++ b/src/styles/_styles_ovw.scss
@@ -37,7 +37,7 @@
     transform: none !important;
 }
 
-[data-theme="dark"] {
+[data-bs-theme="dark"] {
     $bg-dark: rgb(18, 18, 18);
 
     $bg-darker: darken($bg-dark, 5%);
@@ -227,11 +227,14 @@
     background-color: unset !important;
 }
 
-html.ft-theme-transition,
-html.ft-theme-transition *,
-html.ft-theme-transition *:before,
-html.ft-theme-transition *:after {
-    transition: background 750ms ease-in-out,
-        border-color 750ms ease-in-out;
+body.ft-theme-transition,
+body.ft-theme-transition *,
+body.ft-theme-transition *:before,
+body.ft-theme-transition *:after {
+    transition:
+        background 750ms ease-in-out,
+        border-color 750ms ease-in-out,
+        background-color 750ms ease-in-out,
+        ;
     transition-delay: 0 !important;
 }
