feat: show toast before applying system color scheme

app/assets/javascripts/services/themeManager.ts

@@ -14,8 +14,15 @@ import {
   CreateIntentPayloadFromObject,
 } from '@standardnotes/snjs';
 import { InternalEventBus } from '@standardnotes/services';
+import {
+  dismissToast,
+  ToastType,
+  addTimedToast,
+} from '@standardnotes/stylekit';
 
-const CACHED_THEMES_KEY = 'cachedThemes';
+const CachedThemesKey = 'cachedThemes';
+const TimeBeforeApplyingColorScheme = 5;
+const DefaultThemeIdentifier = 'Default';
 
 export class ThemeManager extends ApplicationService {
   private activeThemes: UuidString[] = [];
@@ -40,7 +47,7 @@ export class ThemeManager extends ApplicationService {
         this.deactivateAllThemes();
         this.activeThemes = [];
         this.application?.removeValue(
-          CACHED_THEMES_KEY,
+          CachedThemesKey,
           StorageValueModes.Nonwrapped
         );
         break;
@@ -72,19 +79,17 @@ export class ThemeManager extends ApplicationService {
       false
     );
 
-    if (useDeviceThemeSettings === this.lastUseDeviceThemeSettings) {
-      return;
+    if (useDeviceThemeSettings !== this.lastUseDeviceThemeSettings) {
+      this.lastUseDeviceThemeSettings = useDeviceThemeSettings;
     }
 
-    this.lastUseDeviceThemeSettings = useDeviceThemeSettings;
+    if (useDeviceThemeSettings) {
+      const prefersDarkColorScheme = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      );
 
-    const prefersDarkColorScheme = window.matchMedia(
-      '(prefers-color-scheme: dark)'
-    );
-    this.setThemeAsPerColorScheme(
-      useDeviceThemeSettings,
-      prefersDarkColorScheme.matches
-    );
+      this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches);
+    }
   }
 
   get webApplication() {
@@ -142,37 +147,59 @@ export class ThemeManager extends ApplicationService {
   }
 
   private colorSchemeEventHandler(event: MediaQueryListEvent) {
-    this.setThemeAsPerColorScheme(
-      this.lastUseDeviceThemeSettings,
-      event.matches
+    this.setThemeAsPerColorScheme(event.matches);
+  }
+
+  private showColorSchemeToast(setThemeCallback: () => void) {
+    const [toastId, intervalId] = addTimedToast(
+      {
+        type: ToastType.Regular,
+        message: (timeRemaining) =>
+          `Applying system color scheme in ${timeRemaining}s...`,
+        actions: [
+          {
+            label: 'Keep current theme',
+            handler: () => {
+              dismissToast(toastId);
+              clearInterval(intervalId);
+            },
+          },
+          {
+            label: 'Apply now',
+            handler: () => {
+              dismissToast(toastId);
+              clearInterval(intervalId);
+              setThemeCallback();
+            },
+          },
+        ],
+      },
+      setThemeCallback,
+      TimeBeforeApplyingColorScheme
     );
   }
 
-  private setThemeAsPerColorScheme(
-    useDeviceThemeSettings: boolean,
-    prefersDarkColorScheme: boolean
-  ) {
-    if (useDeviceThemeSettings) {
-      const preference = prefersDarkColorScheme
-        ? PrefKey.AutoDarkThemeIdentifier
-        : PrefKey.AutoLightThemeIdentifier;
-      const themes = this.application.items.getDisplayableItems(
-        ContentType.Theme
-      ) as SNTheme[];
-
-      const enableDefaultTheme = () => {
-        const activeTheme = themes.find(
-          (theme) => theme.active && !theme.isLayerable()
-        );
-        if (activeTheme) this.application.mutator.toggleTheme(activeTheme);
-      };
-
-      const themeIdentifier = this.application.getPreference(
-        preference,
-        'Default'
-      ) as string;
-      if (themeIdentifier === 'Default') {
-        enableDefaultTheme();
+  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
+    const preference = prefersDarkColorScheme
+      ? PrefKey.AutoDarkThemeIdentifier
+      : PrefKey.AutoLightThemeIdentifier;
+
+    const themes = this.application.items.getDisplayableItems(
+      ContentType.Theme
+    ) as SNTheme[];
+
+    const activeTheme = themes.find(
+      (theme) => theme.active && !theme.isLayerable()
+    );
+
+    const themeIdentifier = this.application.getPreference(
+      preference,
+      DefaultThemeIdentifier
+    ) as string;
+
+    const setTheme = () => {
+      if (themeIdentifier === DefaultThemeIdentifier && activeTheme) {
+        this.application.mutator.toggleTheme(activeTheme);
       } else {
         const theme = themes.find(
           (theme) => theme.package_info.identifier === themeIdentifier
@@ -181,6 +208,16 @@ export class ThemeManager extends ApplicationService {
           this.application.mutator.toggleTheme(theme);
         }
       }
+    };
+
+    const isPreferredThemeNotActive =
+      activeTheme?.identifier !== themeIdentifier;
+
+    const isDefaultThemePreferredAndNotActive =
+      themeIdentifier === DefaultThemeIdentifier && activeTheme;
+
+    if (isPreferredThemeNotActive || isDefaultThemePreferredAndNotActive) {
+      this.showColorSchemeToast(setTheme);
     }
   }
 
@@ -282,15 +319,15 @@ export class ThemeManager extends ApplicationService {
     });
 
     return this.application.setValue(
-      CACHED_THEMES_KEY,
+      CachedThemesKey,
       mapped,
       StorageValueModes.Nonwrapped
     );
   }
 
   private async getCachedThemes() {
     const cachedThemes = (await this.application.getValue(
-      CACHED_THEMES_KEY,
+      CachedThemesKey,
       StorageValueModes.Nonwrapped
     )) as SNTheme[];
     if (cachedThemes) {

package.json

@@ -30,7 +30,7 @@
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/responses": "1.5.1",
     "@standardnotes/services": "1.7.1",
-    "@standardnotes/stylekit": "5.20.0",
+    "@standardnotes/stylekit": "5.21.3",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",

yarn.lock

@@ -2510,10 +2510,10 @@
     "@standardnotes/sncrypto-common" "^1.7.4"
     "@standardnotes/utils" "^1.4.6"
 
-"@standardnotes/stylekit@5.20.0":
-  version "5.20.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.20.0.tgz#84ad262b39cbe307a9e06ffa8eb05119db8a7adb"
-  integrity sha512-R926S0NlzB97wq6PyX978s1g21KSymX3CjQCmbM3tfV7KFXfNjjDdWSTVetC8exZj/BPvsudfOtNA5bVsJ8RkA==
+"@standardnotes/stylekit@5.21.3":
+  version "5.21.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.21.3.tgz#32d136328e7ec04f983fe635ec507a05084f3aac"
+  integrity sha512-0ILhE/xtuGBbBuMRurdWDuHrtMvIoJoMwu/2wp+2WNlYzWbSzq/TQ3MYYBUUS76K/nerxJwr7kBtZeJpCdWccg==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"