✨ CustomSwitchButton is now using system image name

DouShouQi_App/DouShouQi_App/Components/Settings/CustomSwitchButton.swift

@@ -13,29 +13,37 @@ struct CustomSwitchButton: View {
     @Binding var IsOn: Bool
     
     // Image when Off
-    var imgNameIsOff: String
-    var imgIsOffWidth: CGFloat = 50
-    var imgIsOffHeight: CGFloat = 50
+    var imgSystemNameIsOff: String
+    var imgIsOffWidth: CGFloat = 25
+    var imgIsOffHeight: CGFloat = 25
     
     // Image when Off
-    var imgNameIsOn: String
-    var imgIsOnWidth: CGFloat = 50
-    var imgIsOnHeight: CGFloat = 50
+    var imgSystemNameIsOn: String
+    var imgIsOnWidth: CGFloat = 25
+    var imgIsOnHeight: CGFloat = 25
     
     var body: some View {
         HStack {
-            Image(imgNameIsOff)
-                .resizable()
-                .aspectRatio(contentMode: .fit)
-                .frame(width: imgIsOffWidth, height: imgIsOffHeight)
+            VStack {
+                if (!IsOn) {
+                    Image(systemName: imgSystemNameIsOff)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: imgIsOffWidth, height: imgIsOffHeight)
+                }
+            }.frame(width: imgIsOffWidth, height: imgIsOffHeight)
             
             Toggle("isOn", isOn: $IsOn)
                 .labelsHidden()
             
-            Image(imgNameIsOn)
-                .resizable()
-                .aspectRatio(contentMode: .fit)
-                .frame(width: imgIsOnWidth, height: imgIsOnHeight)
+            VStack {
+                if (IsOn) {
+                    Image(systemName: imgSystemNameIsOn)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: imgIsOnWidth, height: imgIsOnHeight)
+                }
+            }.frame(width: imgIsOffWidth, height: imgIsOffHeight)
         }
     }
 }

DouShouQi_App/DouShouQi_App/Views/Menu/SettingsView.swift

@@ -15,7 +15,7 @@ struct SettingsView: View {
     
     @State private var theme = false
     @State private var choice = "English"
-    @State private var sound = false
+    @State private var sound = true
     
     var body: some View {
         VStack {
@@ -30,7 +30,7 @@ struct SettingsView: View {
                     
                     Spacer()
                     
-                    CustomSwitchButton(IsOn: $theme, imgNameIsOff: AppImages.TitleImage, imgNameIsOn: AppImages.TitleImage)
+                    CustomSwitchButton(IsOn: $theme, imgSystemNameIsOff: "sun.max", imgSystemNameIsOn: "moon")
                 }
                 
                 Divider()
@@ -51,10 +51,13 @@ struct SettingsView: View {
                 
                 Divider()
                 
-                VStack(alignment: .leading) {
-                    Toggle("Sound", isOn: $sound)
-                        .toggleStyle(.switch)
+                HStack {
+                    Text("Theme")
                         .font(.headline)
+                    
+                    Spacer()
+                    
+                    CustomSwitchButton(IsOn: $sound, imgSystemNameIsOff: "speaker.slash", imgSystemNameIsOn: "speaker.2")
                 }
                 
                 Divider()