moving the apply of theme to header

NuGet · Apr 11, 2024 · 1a5b26d · 1a5b26d
1 parent c998562
commit 1a5b26d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js
@@ -536,34 +536,17 @@
 
     initializeJQueryValidator();
 
-    // Check the browser preferred color scheme
-    const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const defaultTheme = prefersDarkMode ? "dark" : "light";
-    const preferredTheme = localStorage.getItem("theme")
-
-    // Check if the localStorage item is set, if not set it to the system theme
-    if (!preferredTheme || !(preferredTheme === "dark" || preferredTheme === "light")) {
-        localStorage.setItem("theme", "system");
-    }
-
-    if (preferredTheme === "light" || preferredTheme === "dark") {
-        document.documentElement.setAttribute('data-theme', preferredTheme);
-    }
-    else {
-        document.documentElement.setAttribute('data-theme', defaultTheme);
-    }
-
     // Add listener to the theme selector
     var themeSelector = document.getElementById("select-option-theme");
     themeSelector.addEventListener("change", () => {
         if (themeSelector.value === "system") {
             localStorage.setItem("theme", "system");
-            document.documentElement.setAttribute('data-theme', defaultTheme);
+            document.body.setAttribute('data-theme', defaultTheme);
             document.getElementById("user-prefered-theme").textContent = "System";
         }
         else {
             localStorage.setItem("theme", themeSelector.value);
-            document.documentElement.setAttribute('data-theme', themeSelector.value);
+            document.body.setAttribute('data-theme', themeSelector.value);
             document.getElementById("user-prefered-theme").textContent = themeSelector.value == "light" ? "Light" : "Dark";
         }
     })

diff --git a/src/NuGetGallery/Views/Shared/Gallery/Layout.cshtml b/src/NuGetGallery/Views/Shared/Gallery/Layout.cshtml
@@ -30,6 +30,25 @@
 
     @Styles.Render("~/Content/gallery/css/site.min.css")
 
+    <script>
+        // Check the browser preferred color scheme
+        const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const defaultTheme = prefersDarkMode ? "dark" : "light";
+        const preferredTheme = localStorage.getItem("theme")
+
+        // Check if the localStorage item is set, if not set it to the system theme
+        if (!preferredTheme || !(preferredTheme === "dark" || preferredTheme === "light")) {
+            localStorage.setItem("theme", "system");
+        }
+
+        if (preferredTheme === "light" || preferredTheme === "dark") {
+            document.documentElement.setAttribute('data-theme', preferredTheme);
+        }
+        else {
+            document.documentElement.setAttribute('data-theme', defaultTheme);
+        }
+    </script>
+
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>

diff --git a/src/NuGetGallery/Views/Shared/ListPackages.cshtml b/src/NuGetGallery/Views/Shared/ListPackages.cshtml
@@ -205,7 +205,7 @@
                         <div class="sortby col-md-3">
                             <div class="row">
                                 <label for="sortby">Sort by</label>
-                                <select name="sortby" id="sortby" form="search-form" aria-label="sort package search results by">
+                                <select name="sortby" id="sortby" class="select-brand" form="search-form" aria-label="sort package search results by">
                                     <option value="relevance" aria-label="Sort By: Relevance" @(Model.SortBy == "relevance" ? "selected" : "")>Relevance</option>
                                     <option value="totalDownloads-desc" aria-label="Sort By: Downloads" @(Model.SortBy == "totalDownloads-desc" ? "selected" : "")>Downloads</option>
                                     <option value="created-desc" aria-label="Sort By: Recently updated" @(Model.SortBy == "created-desc" ? "selected" : "")>Recently updated</option>