Remove unused bootswatch dependency

package.json

@@ -22,7 +22,6 @@
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "bootstrap-vue-next": "^0.7.3",
-    "bootswatch": "^5.2.3",
     "core-js": "^3.29.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",

src/components/BootswatchThemeSelect.vue

@@ -1,49 +1,15 @@
 <template>
-  <div>
+  <b-link variant="outline-primary" class="nav-link" @click="toggleNight">
-    <b-nav-item-dropdown
+    <ThemeLightDark :size="16" />
-      v-if="!simple"
+  </b-link>
-      id="my-nav-dropdown"
-      text="Theme"
-      toggle-class="nav-link-custom"
-      right
-      lazy
-    >
-      <b-dropdown-item v-if="themeList1.length === 0">
-        <b-spinner small></b-spinner> Loading Themes...
-      </b-dropdown-item>
-
-      <!-- TODO Add  v-b-tooltip.hover.right=="{ variant: 'className' }" for tooltip class rendered from bootswatch-->
-      <b-dropdown-item-button
-        v-for="(theme, key) in themeList1"
-        :key="key"
-        :active="activeTheme === theme.name"
-        :title="theme.description"
-        @click="handleClick(theme.name)"
-        >{{ theme.name }}{{ theme.dark ? ' [dark]' : '' }}</b-dropdown-item-button
-      >
-    </b-nav-item-dropdown>
-    <b-link v-else variant="outline-primary" class="nav-link" @click="toggleNight">
-      <ThemeLightDark :size="16" />
-    </b-link>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import axios from 'axios';
 import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
-import { FTHTMLStyleElement } from '@/types/styleElement';
 import { useSettingsStore } from '@/stores/settings';
-import { themeList, ThemeType } from '@/shared/themes';
 
-const props = defineProps({
-  simple: {
-    type: Boolean,
-    default: true,
-  },
-});
 const activeTheme = ref('');
-const themeList1 = ref<ThemeType[]>(themeList);
 const settingsStore = useSettingsStore();
 
 const setTheme = (themeName) => {
@@ -52,43 +18,18 @@ const setTheme = (themeName) => {
     return;
   }
   if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
-    const styles = document.getElementsByTagName('style');
+    // const styles = document.getElementsByTagName('style');
-    const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
     document.documentElement.setAttribute(
       'data-theme',
       themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
     );
-    // Reset all bootswatch styles
+    if (activeTheme.value) {
-    bw.forEach((style, index) => {
-      (bw[index] as FTHTMLStyleElement).disabled = true;
-    });
-    if (props.simple && activeTheme.value) {
       // Only transition if simple mode is active
       document.documentElement.classList.add('ft-theme-transition');
       window.setTimeout(() => {
         document.documentElement.classList.remove('ft-theme-transition');
       }, 1000);
     }
-  } else {
-    // Dynamic import for a different theme, to avoid loading ALL themes.
-    import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
-      console.log('theme', mod);
-      document.documentElement.removeAttribute('data-theme');
-      const styles = document.getElementsByTagName('style');
-      const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
-      bw.forEach((style, index) => {
-        if (!style.id) {
-          // If its a style that was just imported and hasn't been assigned an id.
-          bw[index].id = themeName;
-        } else if (style.id === themeName) {
-          // If it's a style that has been imported already.
-          (bw[index] as FTHTMLStyleElement).disabled = false;
-        } else {
-          // All other style themes should be disabled.
-          (bw[index] as FTHTMLStyleElement).disabled = true;
-        }
-      });
-    });
   }
   // Save the theme as localstorage
   settingsStore.currentTheme = themeName;
@@ -99,32 +40,9 @@ onMounted(() => {
   if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
 });
 
-const handleClick = (name: string) => {
-  setTheme(name.trim());
-};
 const toggleNight = () => {
   setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
 };
-const fetchApi = () => {
-  // Fetches boostswatch api and dynamically sets themes.
-  // Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
-  axios
-    .get('https://bootswatch.com/api/4.json')
-    // .then((res) => {
-
-    // const { themes } = res.data;
-    // this.themes = themes;
-    // Use this code in the browser console and copy and paste the filteredThemes into this.themes
-    // console.log(themes);
-    // const filteredThemes = [];
-    // themes.forEach((item) =>
-    //   filteredThemes.push({ name: item.name, description: item.description }),
-    // );
-    // })
-    .catch((error) => {
-      console.error(error);
-    });
-};
 </script>
 
 <style scoped></style>

yarn.lock

@@ -2001,11 +2001,6 @@ bootstrap@^5.2.3:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
   integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
 
-bootswatch@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-5.2.3.tgz#a12bef6ea1a54f1b5b55b472c11a846d1cb77239"
-  integrity sha512-tvnW15WoOY2sEp1uT1ITDQiJy2TekQa+K+Q28WDXibleIxsY0nAoC9IylbnUPD7Q5vkCIclOuBHLVBblJYYPSA==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"