🐛 Fix theme problem after update (#9955)

plugins/apps/colors-to-tokens-plugin/src/app/app.component.ts

@@ -1,6 +1,5 @@
-import { Component, effect, inject, linkedSignal } from '@angular/core';
+import { Component, effect, linkedSignal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
 import type {
   PluginMessageEvent,
   PluginUIEvent,
@@ -8,7 +7,7 @@ import type {
   SetColorsPluginEvent,
   TokenFileExtraData,
 } from '../model';
-import { filter, fromEvent, map, merge, take } from 'rxjs';
+import { filter, fromEvent, map, merge, of } from 'rxjs';
 import { transformToToken } from './utils/transform-to-token';
 import { SvgComponent } from './components/svg.component';
 
@@ -70,14 +69,11 @@ import { SvgComponent } from './components/svg.component';
   },
 })
 export class AppComponent {
-  route = inject(ActivatedRoute);
   messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(window, 'message');
 
-  initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   theme = toSignal(
     merge(

plugins/apps/contrast-plugin/src/app/app.component.ts

@@ -1,17 +1,11 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
 import type {
   PluginMessageEvent,
   PluginUIEvent,
   ThemePluginEvent,
 } from '../model';
-import { filter, fromEvent, map, merge, take } from 'rxjs';
+import { filter, fromEvent, map, merge, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { Shape } from '@penpot/plugin-types';
 
@@ -118,14 +112,11 @@ import { Shape } from '@penpot/plugin-types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  #route = inject(ActivatedRoute);
   #messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(window, 'message');
 
-  #initialTheme$ = this.#route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  #initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   selection = toSignal(
     this.#messages$.pipe(

plugins/apps/icons-plugin/src/app/app.component.ts

@@ -1,10 +1,10 @@
-import { Component, inject, signal } from '@angular/core';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { Component, signal } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { FeatherIconNames, icons } from 'feather-icons';
 import { IconButtonComponent } from './components/icon-button/icon-button.component';
 import { IconSearchComponent } from './components/icon-search/icon-search.component';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { filter, fromEvent, map, merge, take } from 'rxjs';
+import { filter, fromEvent, map, merge, of } from 'rxjs';
 import { PluginMessageEvent } from '../model';
 
 @Component({
@@ -36,7 +36,6 @@ import { PluginMessageEvent } from '../model';
   },
 })
 export class AppComponent {
-  public route = inject(ActivatedRoute);
   public icons = signal(icons);
   public iconKeys = signal(Object.keys(icons) as FeatherIconNames[]);
   public messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(
@@ -44,11 +43,9 @@ export class AppComponent {
     'message',
   );
 
-  public initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  public initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   public theme = toSignal(
     merge(

plugins/apps/lorem-ipsum-plugin/src/app/app.component.ts

@@ -1,13 +1,12 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
 import type {
   GenerationTypes,
   PluginMessageEvent,
   PluginUIEvent,
 } from '../model';
-import { filter, fromEvent, map, merge, take } from 'rxjs';
+import { filter, fromEvent, map, merge, of } from 'rxjs';
 
 @Component({
   imports: [ReactiveFormsModule],
@@ -67,14 +66,11 @@ import { filter, fromEvent, map, merge, take } from 'rxjs';
   },
 })
 export class AppComponent {
-  route = inject(ActivatedRoute);
   messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(window, 'message');
 
-  initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   theme = toSignal(
     merge(

plugins/apps/poc-tokens-plugin/src/app/app.component.ts

@@ -1,7 +1,6 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
-import { fromEvent, map, filter, take, merge } from 'rxjs';
+import { fromEvent, map, filter, merge, of } from 'rxjs';
 import { PluginMessageEvent, PluginUIEvent } from '../model';
 
 type TokenTheme = {
@@ -39,18 +38,14 @@ type TokensGroup = [string, Token[]];
   },
 })
 export class AppComponent {
-  public route = inject(ActivatedRoute);
-
   public messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(
     window,
     'message',
   );
 
-  public initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  public initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   public theme = toSignal(
     merge(

plugins/apps/rename-layers-plugin/src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, ViewChild, inject } from '@angular/core';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import type {
@@ -7,7 +7,7 @@ import type {
   ReplaceText,
   ThemePluginEvent,
 } from '../app/model';
-import { filter, fromEvent, map, merge, take } from 'rxjs';
+import { filter, fromEvent, map, merge, of } from 'rxjs';
 import { FormsModule } from '@angular/forms';
 import { Shape } from '@penpot/plugin-types';
 
@@ -24,7 +24,6 @@ export class AppComponent {
   @ViewChild('searchElement') public searchElement!: ElementRef;
   @ViewChild('addElement') public addElement!: ElementRef;
 
-  route = inject(ActivatedRoute);
   messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(window, 'message');
   public textToReplace: ReplaceText = {
     search: '',
@@ -38,11 +37,9 @@ export class AppComponent {
     this.sendMessage({ type: 'ready' });
   }
 
-  initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   theme = toSignal(
     merge(

plugins/apps/table-plugin/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 
 import type {
@@ -8,7 +8,7 @@ import type {
   TableConfigEvent,
   TableOptions,
 } from '../app/model';
-import { filter, fromEvent, map, merge, take } from 'rxjs';
+import { filter, fromEvent, map, merge, of, take } from 'rxjs';
 import { FormBuilder, ReactiveFormsModule, FormGroup } from '@angular/forms';
 
 @Component({
@@ -37,14 +37,11 @@ export class AppComponent {
     alternateRows: [false],
   });
 
-  route = inject(ActivatedRoute);
   messages$ = fromEvent<MessageEvent<PluginMessageEvent>>(window, 'message');
 
-  initialTheme$ = this.route.queryParamMap.pipe(
-    map((params) => params.get('theme')),
-    filter((theme) => !!theme),
-    take(1),
-  );
+  initialTheme$ = of(
+    new URLSearchParams(window.location.search).get('theme'),
+  ).pipe(filter((theme) => !!theme));
 
   theme = toSignal(
     merge(