diff --git a/src/Aspire.Dashboard/wwwroot/js/app-theme.js b/src/Aspire.Dashboard/wwwroot/js/app-theme.js index 5e837c74d7e..8b491bb15ee 100644 --- a/src/Aspire.Dashboard/wwwroot/js/app-theme.js +++ b/src/Aspire.Dashboard/wwwroot/js/app-theme.js @@ -10,7 +10,6 @@ import { } from "/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js"; const currentThemeCookieName = "currentTheme"; -const themeSettingSystem = "System"; const themeSettingDark = "Dark"; const themeSettingLight = "Light"; const darkThemeLuminance = 0.19; @@ -31,11 +30,11 @@ export function updateTheme(specifiedTheme) { } /** - * Returns the value of the currentTheme cookie, or System if the cookie is not set. + * Returns the value of the currentTheme cookie. * @returns {string} */ export function getThemeCookieValue() { - return getCookieValue(currentThemeCookieName) ?? themeSettingSystem; + return getCookieValue(currentThemeCookieName); } export function getCurrentTheme() { @@ -61,7 +60,15 @@ function getSystemTheme() { * @param {string} theme */ function setThemeCookie(theme) { - document.cookie = `${currentThemeCookieName}=${theme}`; + if (theme == themeSettingDark || theme == themeSettingLight) { + // 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}; Path=/; expires=${new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365).toGMTString()}`; + } else { + // Delete cookie for other values (e.g. System) + document.cookie = `${currentThemeCookieName}=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`; + } } /** @@ -260,6 +267,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();