fix card style for light theme

Author: lorens-osman-dev

src/createFamily/buttons.ts

@@ -5,6 +5,7 @@ import deleteActiveNoteModal from "./deleteActiveNoteModal";
 import { createClustersAndOrphansFolder } from "./createClustersAndOrphansFolder";
 import { puzzleTemplate } from "./templates";
 import type { clusterPluginSettings } from "main";
+import { stringify } from "querystring";
 
 const clusters = "CLUSTERS"
 const orphans = "ORPHANS"
@@ -283,10 +284,19 @@ export async function cardStyleFunction(settings: clusterPluginSettings){
     setTimeout(() => {
 
         const appContainer = document.body  
+        const classList = Array.from(appContainer.classList)
+        const isDark = classList.find((className : string) => className ==="theme-dark" )
+        
+        console.log("classList:", classList);
         if(settings.cardStyle){
-            appContainer.classList.add("card-layout-open-dark")
+            if(isDark){
+
+                appContainer.classList.add("card-layout-open-dark")
+            }
+            appContainer.classList.add("card-layout-open-light")
         }else{
             appContainer.classList.remove("card-layout-open-dark")
+            appContainer.classList.remove("card-layout-open-light")
         }
     }, 500);
 }

src/createFamily/settings.ts

@@ -61,19 +61,25 @@ export class settingTab extends PluginSettingTab {
 			const cardStyle = new Setting(containerEl);
 			cardStyle.setName("Card Style");
 			cardStyle.setDesc(
-				"If you are using 'Lorens' theme this option will add card style on PC.",
+				"If you are using 'Lorens' theme on PC this option will add card style .",
 			);
 			cardStyle.addToggle((toggle: ToggleComponent) => {
 				toggle.setValue(this.plugin.settings.cardStyle);
 				toggle.onChange(async (value) => {
 					this.plugin.settings.cardStyle = value;
-                    const appContainer = document.body  
+										const appContainer = document.body  
+										const classList = Array.from(appContainer.classList)
+										const isDark = classList.find((className : string) => className ==="theme-dark" )
                     if(value){
                         await this.plugin.saveSettings();
-                        appContainer.classList.add("card-layout-open-dark")
-                        console.log(this.plugin.settings.cardStyle)
+												if(isDark){
+
+													appContainer.classList.add("card-layout-open-dark")
+											}
+											appContainer.classList.add("card-layout-open-light")
                     }else{
                         appContainer.classList.remove("card-layout-open-dark")
+												appContainer.classList.remove("card-layout-open-light")
                         await this.plugin.saveSettings();
 
                     }