Refactor theme section: update dark theme toggle structure and labels

Author: MaxITService

welcome-page-files/styles.css

@@ -117,7 +117,6 @@ img {
   align-items: center;
   gap: 10px;
   margin-top: 20px;
-  justify-content: center;
 }
 
 .switch {

welcome.html

@@ -175,16 +175,25 @@ <h2>Cross-Chat Prompt Sharing: Reuse Prompts Anywhere</h2>
         <h2>See the code and support author, privacy concerns.</h2>
         <p>The extension is open-source and you can see the code on <a href="https://github.com/MaxITService/ChatGPT-Quick-Buttons-for-your-text">GitHub</a>.
            If you have any questions or suggestions for new features, please contact the author at <a href="mailto:[email protected]">[email protected]</a>. The extension does not collect any data</p>
+    </section>
+
+    <!-- =====  Theme Section (Dark Theme Toggle) ===== -->
+    <section class="section" id="themeSection">
+      <h2>Theme</h2>
+      <!-- iPhone-style toggle switch -->
+      <div class="switch-container">
+        <label class="switch">
+          <input
+            type="checkbox"
+            id="darkThemeToggle"
+            aria-label="Enable Dark Theme"
+          />
+          <span class="slider"></span>
+        </label>
+        <span class="switch-label">Enable Dark Theme</span>
       </div>
     </section>
-   
-    <div class="switch-container">
-      <label class="switch">
-        <input type="checkbox" id="darkThemeToggle" aria-label="Toggle Dark Theme">
-        <span class="slider"></span>
-        <span class="switch-label">Dark Theme</span>
-      </label>
-    </div>
+    <!-- ===== End Theme Section ===== -->
   </div>
 
   <script src="welcome-page-files/theme.js"></script>