Give theme cookie an expiration

src/Aspire.Dashboard/wwwroot/js/app-theme.js

@@ -35,7 +35,7 @@ export function updateTheme(specifiedTheme) {
  * @returns {string}
  */
 export function getThemeCookieValue() {
-    return getCookieValue(currentThemeCookieName) ?? themeSettingSystem;
+    return getCookieValue(currentThemeCookieName);
 }
 
 export function getCurrentTheme() {
@@ -61,7 +61,10 @@ function getSystemTheme() {
  * @param {string} theme
  */
 function setThemeCookie(theme) {
-    document.cookie = `${currentThemeCookieName}=${theme}`;
+    // Cookie will expire after 1 year. Using a much larger value won't have an impact because
+    // Chrome limits expiration to 400 days: https://developer.chrome.com/blog/cookie-max-age-expires
+    // The cookie is reset when the dashboard loads to creating a sliding expiration.
+    document.cookie = `${currentThemeCookieName}=${theme}; expires=${new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365).toGMTString()}`;
 }
 
 /**
@@ -260,6 +263,12 @@ function initializeTheme() {
     const effectiveTheme = getEffectiveTheme(themeCookieValue);
 
     applyTheme(effectiveTheme);
+
+    // If a theme cookie has been set then set it again on page load.
+    // This updates the cookie expiration date and creates a sliding expiration.
+    if (themeCookieValue) {
+        setThemeCookie(themeCookieValue);
+    }
 }
 
 createAdditionalDesignTokens();