Use data-theme attribute for theme switching and set color-scheme (#1808)

- Update theme toggle and initialization scripts to set data-theme attribute
- Replace CSS selectors using .dark class with [data-theme="dark"] and 
  [data-theme="light"] attribute selectors
- Set CSS color-scheme variable alongside theme colors for better native 
  control appearance
- Removes redundant styles

---------

Co-authored-by: Aditya Telange <21258296+adityatelange@users.noreply.github.com>

layouts/partials/footer.html

@@ -81,11 +81,12 @@
 {{- if (not site.Params.disableThemeToggle) }}
 <script>
     document.getElementById("theme-toggle").addEventListener("click", () => {
-        if (document.body.className.includes("dark")) {
-            document.body.classList.remove('dark');
+        const html = document.querySelector("html");
+        if (html.dataset.theme === "dark") {
+            html.dataset.theme = 'light';
             localStorage.setItem("pref-theme", 'light');
         } else {
-            document.body.classList.add('dark');
+            html.dataset.theme = 'dark';
             localStorage.setItem("pref-theme", 'dark');
         }
     })