From 055cfced1ad5d8465df888d668d33d074690dd11 Mon Sep 17 00:00:00 2001 From: James Newton-King Date: Mon, 26 Aug 2024 09:01:20 +0800 Subject: [PATCH 1/4] Give theme cookie an expiration --- src/Aspire.Dashboard/wwwroot/js/app-theme.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Aspire.Dashboard/wwwroot/js/app-theme.js b/src/Aspire.Dashboard/wwwroot/js/app-theme.js index 5e837c74d7e..e49ef853fe5 100644 --- a/src/Aspire.Dashboard/wwwroot/js/app-theme.js +++ b/src/Aspire.Dashboard/wwwroot/js/app-theme.js @@ -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 + // If we want the cookie to persist longer then we'll need to reset it when the dashboard launches. + document.cookie = `${currentThemeCookieName}=${theme}; expires=${new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365).toGMTString()}`; } /** From 9683cbe307d0d444a1df8f6e90c0110ff2f95860 Mon Sep 17 00:00:00 2001 From: James Newton-King Date: Mon, 26 Aug 2024 09:17:36 +0800 Subject: [PATCH 2/4] Update --- src/Aspire.Dashboard/wwwroot/js/app-theme.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Aspire.Dashboard/wwwroot/js/app-theme.js b/src/Aspire.Dashboard/wwwroot/js/app-theme.js index e49ef853fe5..3db730cb6a1 100644 --- a/src/Aspire.Dashboard/wwwroot/js/app-theme.js +++ b/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() { @@ -263,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(); From 3c76749d980a4c4d2aed06e0b93c334548da8d05 Mon Sep 17 00:00:00 2001 From: James Newton-King Date: Mon, 26 Aug 2024 09:22:36 +0800 Subject: [PATCH 3/4] Update --- src/Aspire.Dashboard/wwwroot/js/app-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Aspire.Dashboard/wwwroot/js/app-theme.js b/src/Aspire.Dashboard/wwwroot/js/app-theme.js index 3db730cb6a1..5d367956499 100644 --- a/src/Aspire.Dashboard/wwwroot/js/app-theme.js +++ b/src/Aspire.Dashboard/wwwroot/js/app-theme.js @@ -63,7 +63,7 @@ function getSystemTheme() { function setThemeCookie(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 - // If we want the cookie to persist longer then we'll need to reset it when the dashboard launches. + // 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()}`; } From 946ce57536dfcbdeabf51012295176e15a5a868e Mon Sep 17 00:00:00 2001 From: James Newton-King Date: Mon, 26 Aug 2024 12:42:52 +0800 Subject: [PATCH 4/4] Update --- src/Aspire.Dashboard/wwwroot/js/app-theme.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/Aspire.Dashboard/wwwroot/js/app-theme.js b/src/Aspire.Dashboard/wwwroot/js/app-theme.js index 5d367956499..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,7 +30,7 @@ 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() { @@ -61,10 +60,15 @@ function getSystemTheme() { * @param {string} theme */ function setThemeCookie(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()}`; + 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;`; + } } /**