[darkMode] Prevent success toast until uiSetting saved (#29898)

* [uiSettings] add getSaved$() for setting updates that have been saved

* [styles/theme] only prompt for refresh when setting is saved

src/core/public/ui_settings/ui_settings_client.ts

@@ -33,6 +33,7 @@ interface Params {
 
 export class UiSettingsClient {
   private readonly update$ = new Rx.Subject<{ key: string; newValue: any; oldValue: any }>();
+  private readonly saved$ = new Rx.Subject<{ key: string; newValue: any; oldValue: any }>();
 
   private readonly api: UiSettingsApi;
   private readonly onUpdateError: (error: Error) => void;
@@ -182,11 +183,8 @@ You can use \`config.get("${key}", defaultValue)\`, which will just return
 
     // don't broadcast change if userValue was already overriding the default
     if (this.cache[key].userValue == null) {
-      this.update$.next({
-        key,
-        newValue: newDefault,
-        oldValue: prevDefault,
-      });
+      this.update$.next({ key, newValue: newDefault, oldValue: prevDefault });
+      this.saved$.next({ key, newValue: newDefault, oldValue: prevDefault });
     }
   }
 
@@ -198,12 +196,21 @@ You can use \`config.get("${key}", defaultValue)\`, which will just return
     return this.update$.asObservable();
   }
 
+  /**
+   * Returns an Observable that notifies subscribers of each update to the uiSettings,
+   * including the key, newValue, and oldValue of the setting that changed.
+   */
+  public getSaved$() {
+    return this.saved$.asObservable();
+  }
+
   /**
    * Prepares the uiSettingsClient to be discarded, completing any update$ observables
    * that have been created.
    */
   public stop() {
     this.update$.complete();
+    this.saved$.complete();
   }
 
   private assertUpdateAllowed(key: string) {
@@ -233,6 +240,7 @@ You can use \`config.get("${key}", defaultValue)\`, which will just return
     try {
       const { settings } = await this.api.batchSet(key, newVal);
       this.cache = defaultsDeep({}, defaults, settings);
+      this.saved$.next({ key, newValue: newVal, oldValue: initialVal });
       return true;
     } catch (error) {
       this.setLocally(key, initialVal);

src/ui/public/autoload/styles.js

@@ -30,7 +30,7 @@ context.keys().forEach(key => context(key));
 import '../styles/disable_animations';
 
 chrome.getUiSettingsClient()
-  .getUpdate$()
+  .getSaved$()
   .pipe(filter(update => update.key === 'theme:darkMode'))
   .subscribe(() => {
     toastNotifications.addSuccess(i18n.translate('common.ui.styles.themeAppliedToast', {