From 158536088bbde7d3be6f3536fc74745eacd9655c Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Mon, 27 Jan 2025 04:29:01 +0530
Subject: [PATCH 1/3]  jq removal

---
 .../DialogBox/Themes/ApplyThemes.vue          | 354 +++++++++---------
 1 file changed, 167 insertions(+), 187 deletions(-)

diff --git a/src/components/DialogBox/Themes/ApplyThemes.vue b/src/components/DialogBox/Themes/ApplyThemes.vue
index 72763ad6..405b96ef 100644
--- a/src/components/DialogBox/Themes/ApplyThemes.vue
+++ b/src/components/DialogBox/Themes/ApplyThemes.vue
@@ -1,67 +1,49 @@
 <template>
-    <v-dialog
-        v-model="SimulatorState.dialogBox.theme_dialog"
-        :persistent="true"
-    >
+    <v-dialog v-model="SimulatorState.dialogBox.theme_dialog" :persistent="true">
         <v-card class="messageBoxContent">
             <v-card-text>
-                <template v-if="iscustomTheme == false">
+                <template v-if="!iscustomTheme">
                     <p class="dialogHeader">Select Theme</p>
-                    <v-btn
-                        size="x-small"
-                        icon
-                        class="dialogClose"
-                        @click="closeThemeDialog()"
-                    >
+                    <v-btn size="x-small" icon class="dialogClose" @click="closeThemeDialog()">
                         <v-icon>mdi-close</v-icon>
                     </v-btn>
-                    <div
-                        id="colorThemesDialog"
-                        class="customScroll colorThemesDialog"
-                        tabindex="0"
-                        title="Select Theme"
-                    >
+                    <div id="colorThemesDialog" class="customScroll colorThemesDialog" tabindex="0" title="Select Theme">
                         <div
                             v-for="theme in themes"
                             :id="theme"
                             :key="theme"
                             class="theme"
-                            :class="
-                                theme == selectedTheme ? 'selected set' : ''
-                            "
+                            :class="{ selected: theme === selectedTheme, set: theme === selectedTheme }"
                         >
-                            <div
-                                class="themeSel"
-                                @click="changeTheme(theme)"
-                            ></div>
+                            <div class="themeSel" @click="changeTheme(theme)"></div>
                             <span>
                                 <img
-                                    v-if="theme == 'Default Theme'"
+                                    v-if="theme === 'Default Theme'"
                                     src="../../../assets/themes/DefaultTheme.svg"
                                     style="display: block"
                                 />
                                 <img
-                                    v-if="theme == 'Night Sky'"
+                                    v-if="theme === 'Night Sky'"
                                     src="../../../assets/themes/NightSky.svg"
                                     style="display: block"
                                 />
                                 <img
-                                    v-if="theme == 'Lite-born Spring'"
+                                    v-if="theme === 'Lite-born Spring'"
                                     src="../../../assets/themes/LitebornSpring.svg"
                                     style="display: block"
                                 />
                                 <img
-                                    v-if="theme == 'G&W'"
+                                    v-if="theme === 'G&W'"
                                     src="../../../assets/themes/GnW.svg"
                                     style="display: block"
                                 />
                                 <img
-                                    v-if="theme == 'High Contrast'"
+                                    v-if="theme === 'High Contrast'"
                                     src="../../../assets/themes/HighContrast.svg"
                                     style="display: block"
                                 />
                                 <img
-                                    v-if="theme == 'Color Blind'"
+                                    v-if="theme === 'Color Blind'"
                                     src="../../../assets/themes/ColorBlind.svg"
                                     style="display: block"
                                 />
@@ -72,35 +54,22 @@
                                     type="radio"
                                     value="theme"
                                     name="theme"
-                                    :checked="theme == selectedTheme || theme == 'Default Theme'"
+                                    :checked="theme === selectedTheme || theme === 'Default Theme'"
                                 />
-                                <label :for="theme.replace(' ', '')">{{
-                                    theme
-                                }}</label>
+                                <label :for="theme.replace(' ', '')">{{ theme }}</label>
                             </span>
                         </div>
                     </div>
                 </template>
                 <template v-else>
                     <p class="dialogHeader">Custom Theme</p>
-                    <v-btn
-                        size="x-small"
-                        icon
-                        class="dialogClose"
-                        @click="closeCustomThemeDialog()"
-                    >
+                    <v-btn size="x-small" icon class="dialogClose" @click="closeCustomThemeDialog()">
                         <v-icon>mdi-close</v-icon>
                     </v-btn>
                     <form @input="changeCustomTheme($event)">
-                        <div
-                            v-for="customTheme in customThemes"
-                            :key="customTheme"
-                        >
+                        <div v-for="customTheme in customThemes" :key="customTheme">
                             <label :for="customTheme" class="customColorLabel">
-                                {{ customTheme }}
-                                ({{
-                                    customThemesList[customTheme]?.description
-                                }})
+                                {{ customTheme }} ({{ customThemesList[customTheme]?.description }})
                             </label>
                             <input
                                 type="color"
@@ -115,29 +84,13 @@
                 </template>
             </v-card-text>
             <v-card-actions>
-                <v-btn class="messageBtn" block @click="applyTheme()">
-                    Apply Theme
-                </v-btn>
-                <template v-if="iscustomTheme == false">
-                    <v-btn class="messageBtn" block @click="applyCustomTheme()">
-                        Custom Theme
-                    </v-btn>
+                <v-btn class="messageBtn" block @click="applyTheme()">Apply Theme</v-btn>
+                <template v-if="!iscustomTheme">
+                    <v-btn class="messageBtn" block @click="applyCustomTheme()">Custom Theme</v-btn>
                 </template>
                 <template v-else>
-                    <v-btn
-                        class="messageBtn"
-                        block
-                        @click="importCustomTheme()"
-                    >
-                        Import Theme
-                    </v-btn>
-                    <v-btn
-                        class="messageBtn"
-                        block
-                        @click="exportCustomTheme()"
-                    >
-                        Export Theme
-                    </v-btn>
+                    <v-btn class="messageBtn" block @click="importCustomTheme()">Import Theme</v-btn>
+                    <v-btn class="messageBtn" block @click="exportCustomTheme()">Export Theme</v-btn>
                 </template>
             </v-card-actions>
         </v-card>
@@ -145,155 +98,182 @@
 </template>
 
 <script lang="ts" setup>
-import { useState } from '#/store/SimulatorStore/state'
-import { onMounted, onUpdated, ref, reactive } from '@vue/runtime-core'
-import themeOptions from '#/simulator/src/themer/themes'
-import {
-    getThemeCardSvg,
-    updateBG,
-    updateThemeForStyle,
-} from '#/simulator/src/themer/themer'
-const SimulatorState = useState()
-import { CreateAbstraction, Themes } from '#/simulator/src/themer/customThemeAbstraction'
-import { confirmSingleOption } from '#/components/helpers/confirmComponent/ConfirmComponent.vue'
-const themes = ref([''])
-const customThemes = ref<((keyof typeof customThemesList)[]) | undefined>(undefined);
-const customThemesList: Themes = reactive({})
-const selectedTheme = ref('default-theme')
-const iscustomTheme = ref(false)
+import { useState } from '#/store/SimulatorStore/state';
+import { onMounted, ref, reactive } from 'vue';
+import themeOptions from '#/simulator/src/themer/themes';
+import { getThemeCardSvg, updateBG, updateThemeForStyle } from '#/simulator/src/themer/themer';
+import { CreateAbstraction, Themes } from '#/simulator/src/themer/customThemeAbstraction';
+import { confirmSingleOption } from '#/components/helpers/confirmComponent/ConfirmComponent.vue';
+
+const SimulatorState = useState();
+const themes = ref<string[]>([]);
+const customThemes = ref<(keyof typeof customThemesList)[]>([]);
+const customThemesList: Themes = reactive({});
+const selectedTheme = ref<string>(localStorage.getItem('theme') || 'default-theme');
+const iscustomTheme = ref<boolean>(false);
 
 onMounted(() => {
-    SimulatorState.dialogBox.theme_dialog = false
-    selectedTheme.value = localStorage.getItem('theme') ?? 'default-theme'
-    themes.value = Object.keys(themeOptions)
-    themes.value.splice(-1, 1)
-    const customTheme = CreateAbstraction(themeOptions['Custom Theme'])
+    SimulatorState.dialogBox.theme_dialog = false;
+    themes.value = Object.keys(themeOptions).filter((theme) => theme !== 'Custom Theme');
+    const customTheme = CreateAbstraction(themeOptions['Custom Theme']);
     Object.keys(customTheme).forEach((key) => {
-        customThemesList[key as keyof typeof customThemesList] = customTheme[key as keyof typeof customThemesList]
-    })
-    customThemes.value = Object.keys(customThemesList) as (keyof typeof customThemesList)[]
-})
+        customThemesList[key as keyof typeof customThemesList] = customTheme[key as keyof typeof customThemesList];
+    });
+    customThemes.value = Object.keys(customThemesList) as (keyof typeof customThemesList)[];
+});
 
-function changeTheme(theme: string) {
+function changeTheme(theme: string): void {
     selectedTheme.value = theme;
-    updateThemeForStyle(theme)
-    updateBG()
+    updateThemeForStyle(theme);
+    updateBG();
 }
 
-function changeCustomTheme(e: InputEvent) {
-    const customTheme = customThemesList[(e.target as HTMLInputElement).name as keyof typeof customThemesList];
+function changeCustomTheme(e: Event): void {
+    const target = e.target as HTMLInputElement;
+    const customTheme = customThemesList[target.name as keyof typeof customThemesList];
     if (customTheme) {
-        customTheme.color = (e.target as HTMLInputElement).value;
+        customTheme.color = target.value;
         customTheme.ref.forEach((property: string) => {
-            themeOptions['Custom Theme'][property] = (e.target as HTMLInputElement).value
-        })
+            themeOptions['Custom Theme'][property] = target.value;
+        });
     }
-    customThemesList[(e.target as HTMLInputElement).name as keyof typeof customThemesList] = customTheme
-    updateThemeForStyle('Custom Theme')
-    updateBG()
+    updateThemeForStyle('Custom Theme');
+    updateBG();
 }
 
-function applyTheme() {
-    if (iscustomTheme.value == false) {
-        if ($('.selected label').text()) {
-            localStorage.removeItem('Custom Theme')
-            localStorage.setItem('theme', $('.selected label').text())
+function applyTheme(): void {
+    if (!iscustomTheme.value) {
+        const selectedThemeLabel = document.querySelector('.selected label')?.textContent;
+        if (selectedThemeLabel) {
+            localStorage.removeItem('Custom Theme');
+            localStorage.setItem('theme', selectedThemeLabel);
         }
     } else {
-        // update theme to Custom Theme
-        localStorage.setItem('theme', 'Custom Theme')
-        // add Custom theme to custom theme object
-        localStorage.setItem(
-            'Custom Theme',
-            JSON.stringify(themeOptions['Custom Theme'])
-        )
+        localStorage.setItem('theme', 'Custom Theme');
+        localStorage.setItem('Custom Theme', JSON.stringify(themeOptions['Custom Theme']));
     }
-    $('.set').removeClass('set')
-    $('.selected').addClass('set')
-    SimulatorState.dialogBox.theme_dialog = false
-    setTimeout(() => (iscustomTheme.value = false), 1000)
+    SimulatorState.dialogBox.theme_dialog = false;
+    setTimeout(() => (iscustomTheme.value = false), 1000);
 }
-function applyCustomTheme() {
-    iscustomTheme.value = true
-    updateThemeForStyle(localStorage.getItem('theme'))
-    updateBG()
-    localStorage.setItem('theme', 'Custom Theme')
-    // add Custom theme to custom theme object
-    localStorage.setItem(
-        'Custom Theme',
-        JSON.stringify(themeOptions['Custom Theme'])
-    )
-    $('.set').removeClass('set')
-    $('.selected').addClass('set')
+
+function applyCustomTheme(): void {
+    iscustomTheme.value = true;
+    updateThemeForStyle(localStorage.getItem('theme') || 'default-theme');
+    updateBG();
+    localStorage.setItem('theme', 'Custom Theme');
+    localStorage.setItem('Custom Theme', JSON.stringify(themeOptions['Custom Theme']));
 }
 
-function receivedText(e: ProgressEvent<FileReader>) {
-    let lines = []
-    if(typeof e.target?.result === 'string') {
-        lines = JSON.parse(e.target.result)
-    }
-    let customTheme = CreateAbstraction(lines)
-    themeOptions['Custom Theme'] = lines
-    // preview theme
-    updateThemeForStyle('Custom Theme')
-    updateBG()
-    // update colors in dialog box
-    SimulatorState.dialogBox.theme_dialog = false
-    SimulatorState.dialogBox.theme_dialog = true
-    const customThemeValues = CreateAbstraction(themeOptions['Custom Theme'])
+function receivedText(e: ProgressEvent<FileReader>): void {
+    const lines = typeof e.target?.result === 'string' ? JSON.parse(e.target.result) : [];
+    const customTheme = CreateAbstraction(lines);
+    themeOptions['Custom Theme'] = lines;
+    updateThemeForStyle('Custom Theme');
+    updateBG();
+    SimulatorState.dialogBox.theme_dialog = false;
+    SimulatorState.dialogBox.theme_dialog = true;
+    const customThemeValues = CreateAbstraction(themeOptions['Custom Theme']);
     Object.keys(customThemeValues).forEach((key) => {
-        customThemesList[key as keyof typeof customThemesList] = customThemeValues[key as keyof typeof customThemesList]
-    })
-    customThemes.value = Object.keys(customThemesList) as (keyof typeof customThemesList)[]
+        customThemesList[key as keyof typeof customThemesList] = customThemeValues[key as keyof typeof customThemesList];
+    });
+    customThemes.value = Object.keys(customThemesList) as (keyof typeof customThemesList)[];
 }
 
-function importCustomTheme() {
-    const fileInput = document.createElement('input')
-    fileInput.type = 'file'
-    fileInput.accept = '.json'
-    fileInput.style.display = 'none'
+function importCustomTheme(): void {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = '.json';
+    fileInput.style.display = 'none';
     fileInput.addEventListener('change', (event) => {
-        const file = (event.target as HTMLInputElement).files?.[0]
+        const file = (event.target as HTMLInputElement).files?.[0];
         if (file && file.name.split('.')[1] === 'json') {
-            const fr = new FileReader()
-            fr.onload = receivedText
-            fr.readAsText(file)
+            const fr = new FileReader();
+            fr.onload = receivedText;
+            fr.readAsText(file);
         } else {
-            confirmSingleOption('File Not Supported !')
+            confirmSingleOption('File Not Supported !');
         }
-    })
-    document.body.appendChild(fileInput)
-    fileInput.click()
-    document.body.removeChild(fileInput)
+    });
+    document.body.appendChild(fileInput);
+    fileInput.click();
+    document.body.removeChild(fileInput);
 }
 
-function exportCustomTheme() {
-    const dlAnchorElem = document.getElementById('downloadThemeFile')
-    dlAnchorElem?.setAttribute(
-        'href',
-        `data:text/json;charset=utf-8,${encodeURIComponent(
-            JSON.stringify(themeOptions['Custom Theme'])
-        )}`
-    )
-    dlAnchorElem?.setAttribute('download', 'CV_CustomTheme.json')
-    dlAnchorElem?.click()
+function exportCustomTheme(): void {
+    const dlAnchorElem = document.getElementById('downloadThemeFile');
+    if (dlAnchorElem) {
+        dlAnchorElem.setAttribute(
+            'href',
+            `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(themeOptions['Custom Theme']))}`
+        );
+        dlAnchorElem.setAttribute('download', 'CV_CustomTheme.json');
+        dlAnchorElem.click();
+    }
 }
 
-function closeThemeDialog() {
-    SimulatorState.dialogBox.theme_dialog = false
-    setTimeout(() => (iscustomTheme.value = false), 1000)
-    updateThemeForStyle(localStorage.getItem('theme'))
-    updateBG()
+function closeThemeDialog(): void {
+    SimulatorState.dialogBox.theme_dialog = false;
+    setTimeout(() => (iscustomTheme.value = false), 1000);
+    updateThemeForStyle(localStorage.getItem('theme') || 'default-theme');
+    updateBG();
 }
-function closeCustomThemeDialog() {
-    SimulatorState.dialogBox.theme_dialog = false
-    setTimeout(() => (iscustomTheme.value = false), 1000)
-    const customTheme = localStorage.getItem('Custom Theme')
+
+function closeCustomThemeDialog(): void {
+    SimulatorState.dialogBox.theme_dialog = false;
+    setTimeout(() => (iscustomTheme.value = false), 1000);
+    const customTheme = localStorage.getItem('Custom Theme');
     if (customTheme) {
-        themeOptions['Custom Theme'] = JSON.parse(customTheme) || themeOptions['Default Theme'] // hack for closing dialog box without saving
+        themeOptions['Custom Theme'] = JSON.parse(customTheme);
     }
-    // Rollback to previous theme
-    updateThemeForStyle(localStorage.getItem('theme'))
-    updateBG()
+    updateThemeForStyle(localStorage.getItem('theme') || 'default-theme');
+    updateBG();
 }
 </script>
+
+<style scoped>
+.dialogHeader {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+.dialogClose {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+
+.colorThemesDialog {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.theme {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+}
+
+.theme.selected {
+    border: 2px solid #1976d2;
+}
+
+.themeNameBox {
+    margin-top: 0.5rem;
+}
+
+.customColorLabel {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.customColorInput {
+    margin-bottom: 1rem;
+}
+
+.messageBtn {
+    margin-top: 1rem;
+}
+</style>
\ No newline at end of file

From 1dae747954a56cc5374392814cc0bafea58d74ba Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 7 Feb 2025 19:32:15 +0530
Subject: [PATCH 2/3] resolve

---
 .../DialogBox/Themes/ApplyThemes.vue          | 96 +++++++------------
 1 file changed, 34 insertions(+), 62 deletions(-)

diff --git a/src/components/DialogBox/Themes/ApplyThemes.vue b/src/components/DialogBox/Themes/ApplyThemes.vue
index 405b96ef..c6d7ed79 100644
--- a/src/components/DialogBox/Themes/ApplyThemes.vue
+++ b/src/components/DialogBox/Themes/ApplyThemes.vue
@@ -7,55 +7,28 @@
                     <v-btn size="x-small" icon class="dialogClose" @click="closeThemeDialog()">
                         <v-icon>mdi-close</v-icon>
                     </v-btn>
-                    <div id="colorThemesDialog" class="customScroll colorThemesDialog" tabindex="0" title="Select Theme">
-                        <div
-                            v-for="theme in themes"
-                            :id="theme"
-                            :key="theme"
-                            class="theme"
-                            :class="{ selected: theme === selectedTheme, set: theme === selectedTheme }"
-                        >
+                    <div id="colorThemesDialog" class="customScroll colorThemesDialog" tabindex="0"
+                        title="Select Theme">
+                        <div v-for="theme in themes" :id="theme" :key="theme" class="theme"
+                            :class="{ selected: theme === selectedTheme, set: theme === selectedTheme }">
                             <div class="themeSel" @click="changeTheme(theme)"></div>
                             <span>
-                                <img
-                                    v-if="theme === 'Default Theme'"
-                                    src="../../../assets/themes/DefaultTheme.svg"
-                                    style="display: block"
-                                />
-                                <img
-                                    v-if="theme === 'Night Sky'"
-                                    src="../../../assets/themes/NightSky.svg"
-                                    style="display: block"
-                                />
-                                <img
-                                    v-if="theme === 'Lite-born Spring'"
-                                    src="../../../assets/themes/LitebornSpring.svg"
-                                    style="display: block"
-                                />
-                                <img
-                                    v-if="theme === 'G&W'"
-                                    src="../../../assets/themes/GnW.svg"
-                                    style="display: block"
-                                />
-                                <img
-                                    v-if="theme === 'High Contrast'"
-                                    src="../../../assets/themes/HighContrast.svg"
-                                    style="display: block"
-                                />
-                                <img
-                                    v-if="theme === 'Color Blind'"
-                                    src="../../../assets/themes/ColorBlind.svg"
-                                    style="display: block"
-                                />
+                                <img v-if="theme === 'Default Theme'" src="../../../assets/themes/DefaultTheme.svg"
+                                    style="display: block" />
+                                <img v-if="theme === 'Night Sky'" src="../../../assets/themes/NightSky.svg"
+                                    style="display: block" />
+                                <img v-if="theme === 'Lite-born Spring'" src="../../../assets/themes/LitebornSpring.svg"
+                                    style="display: block" />
+                                <img v-if="theme === 'G&W'" src="../../../assets/themes/GnW.svg"
+                                    style="display: block" />
+                                <img v-if="theme === 'High Contrast'" src="../../../assets/themes/HighContrast.svg"
+                                    style="display: block" />
+                                <img v-if="theme === 'Color Blind'" src="../../../assets/themes/ColorBlind.svg"
+                                    style="display: block" />
                             </span>
                             <span id="themeNameBox" class="themeNameBox">
-                                <input
-                                    :id="theme.replace(' ', '')"
-                                    type="radio"
-                                    value="theme"
-                                    name="theme"
-                                    :checked="theme === selectedTheme || theme === 'Default Theme'"
-                                />
+                                <input :id="theme.replace(' ', '')" type="radio" value="theme" name="theme"
+                                    :checked="theme === selectedTheme || theme === 'Default Theme'" />
                                 <label :for="theme.replace(' ', '')">{{ theme }}</label>
                             </span>
                         </div>
@@ -71,13 +44,8 @@
                             <label :for="customTheme" class="customColorLabel">
                                 {{ customTheme }} ({{ customThemesList[customTheme]?.description }})
                             </label>
-                            <input
-                                type="color"
-                                :name="customTheme"
-                                :value="customThemesList[customTheme]?.color"
-                                class="customColorInput"
-                                @input="changeCustomTheme($event)"
-                            />
+                            <input type="color" :name="customTheme" :value="customThemesList[customTheme]?.color"
+                                class="customColorInput" @input="changeCustomTheme($event)" />
                         </div>
                         <a id="downloadThemeFile" style="display: none"></a>
                     </form>
@@ -142,18 +110,22 @@ function changeCustomTheme(e: Event): void {
 }
 
 function applyTheme(): void {
-    if (!iscustomTheme.value) {
-        const selectedThemeLabel = document.querySelector('.selected label')?.textContent;
-        if (selectedThemeLabel) {
-            localStorage.removeItem('Custom Theme');
-            localStorage.setItem('theme', selectedThemeLabel);
+    try {
+        if (!iscustomTheme.value) {
+            const selectedThemeLabel = document.querySelector('.selected label')?.textContent;
+            if (selectedThemeLabel) {
+                localStorage.removeItem('Custom Theme');
+                localStorage.setItem('theme', selectedThemeLabel);
+            }
+        } else {
+            localStorage.setItem('theme', 'Custom Theme');
+            localStorage.setItem('Custom Theme', JSON.stringify(themeOptions['Custom Theme']));
         }
-    } else {
-        localStorage.setItem('theme', 'Custom Theme');
-        localStorage.setItem('Custom Theme', JSON.stringify(themeOptions['Custom Theme']));
+        SimulatorState.dialogBox.theme_dialog = false;
+        setTimeout(() => (iscustomTheme.value = false), 1000);
+    } catch (error) {
+        console.error('Failed to save theme settings:', error);
     }
-    SimulatorState.dialogBox.theme_dialog = false;
-    setTimeout(() => (iscustomTheme.value = false), 1000);
 }
 
 function applyCustomTheme(): void {

From 3fe438744348f9e247e3f36fe6a2d9d3563abb41 Mon Sep 17 00:00:00 2001
From: Harsh Rao <166894150+ThatDeparted2061@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:39:15 +0000
Subject: [PATCH 3/3] Chore: Reduce usage of set timout and set interval and
 use vue lifecycle hooks

---
 src/components/DialogBox/Themes/ApplyThemes.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/DialogBox/Themes/ApplyThemes.vue b/src/components/DialogBox/Themes/ApplyThemes.vue
index c6d7ed79..4df4e1e0 100644
--- a/src/components/DialogBox/Themes/ApplyThemes.vue
+++ b/src/components/DialogBox/Themes/ApplyThemes.vue
@@ -67,7 +67,7 @@
 
 <script lang="ts" setup>
 import { useState } from '#/store/SimulatorStore/state';
-import { onMounted, ref, reactive } from 'vue';
+import { onMounted, ref, reactive, watch } from 'vue';
 import themeOptions from '#/simulator/src/themer/themes';
 import { getThemeCardSvg, updateBG, updateThemeForStyle } from '#/simulator/src/themer/themer';
 import { CreateAbstraction, Themes } from '#/simulator/src/themer/customThemeAbstraction';
@@ -80,6 +80,16 @@ const customThemesList: Themes = reactive({});
 const selectedTheme = ref<string>(localStorage.getItem('theme') || 'default-theme');
 const iscustomTheme = ref<boolean>(false);
 
+// Watch for dialog close to reset custom theme state
+watch(
+    () => SimulatorState.dialogBox.theme_dialog,
+    (newValue) => {
+        if (!newValue) {
+            iscustomTheme.value = false;
+        }
+    }
+);
+
 onMounted(() => {
     SimulatorState.dialogBox.theme_dialog = false;
     themes.value = Object.keys(themeOptions).filter((theme) => theme !== 'Custom Theme');
@@ -122,7 +132,6 @@ function applyTheme(): void {
             localStorage.setItem('Custom Theme', JSON.stringify(themeOptions['Custom Theme']));
         }
         SimulatorState.dialogBox.theme_dialog = false;
-        setTimeout(() => (iscustomTheme.value = false), 1000);
     } catch (error) {
         console.error('Failed to save theme settings:', error);
     }
@@ -185,14 +194,12 @@ function exportCustomTheme(): void {
 
 function closeThemeDialog(): void {
     SimulatorState.dialogBox.theme_dialog = false;
-    setTimeout(() => (iscustomTheme.value = false), 1000);
     updateThemeForStyle(localStorage.getItem('theme') || 'default-theme');
     updateBG();
 }
 
 function closeCustomThemeDialog(): void {
     SimulatorState.dialogBox.theme_dialog = false;
-    setTimeout(() => (iscustomTheme.value = false), 1000);
     const customTheme = localStorage.getItem('Custom Theme');
     if (customTheme) {
         themeOptions['Custom Theme'] = JSON.parse(customTheme);