From d249fd106a0f260398ca49587d14d5c3571f8cf6 Mon Sep 17 00:00:00 2001 From: Alonso Torres Date: Tue, 9 Jun 2026 11:17:06 +0200 Subject: [PATCH] :bug: Fix theme problem after update (#9955) --- .../src/app/app.component.ts | 14 +++++--------- .../contrast-plugin/src/app/app.component.ts | 19 +++++-------------- .../icons-plugin/src/app/app.component.ts | 15 ++++++--------- .../src/app/app.component.ts | 14 +++++--------- .../src/app/app.component.ts | 15 +++++---------- .../src/app/app.component.ts | 15 ++++++--------- .../table-plugin/src/app/app.component.ts | 13 +++++-------- 7 files changed, 37 insertions(+), 68 deletions(-) diff --git a/plugins/apps/colors-to-tokens-plugin/src/app/app.component.ts b/plugins/apps/colors-to-tokens-plugin/src/app/app.component.ts index 7403a5aceb..1e1e204541 100644 --- a/plugins/apps/colors-to-tokens-plugin/src/app/app.component.ts +++ b/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>(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( diff --git a/plugins/apps/contrast-plugin/src/app/app.component.ts b/plugins/apps/contrast-plugin/src/app/app.component.ts index b482460f78..6c4e9263bf 100644 --- a/plugins/apps/contrast-plugin/src/app/app.component.ts +++ b/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>(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( diff --git a/plugins/apps/icons-plugin/src/app/app.component.ts b/plugins/apps/icons-plugin/src/app/app.component.ts index 4c3ebc6ed3..ee24b3e356 100644 --- a/plugins/apps/icons-plugin/src/app/app.component.ts +++ b/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>( @@ -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( diff --git a/plugins/apps/lorem-ipsum-plugin/src/app/app.component.ts b/plugins/apps/lorem-ipsum-plugin/src/app/app.component.ts index 4c91dc0ba9..1016cc4a4e 100644 --- a/plugins/apps/lorem-ipsum-plugin/src/app/app.component.ts +++ b/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>(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( diff --git a/plugins/apps/poc-tokens-plugin/src/app/app.component.ts b/plugins/apps/poc-tokens-plugin/src/app/app.component.ts index 8b60e40d8d..089649f6ac 100644 --- a/plugins/apps/poc-tokens-plugin/src/app/app.component.ts +++ b/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>( 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( diff --git a/plugins/apps/rename-layers-plugin/src/app/app.component.ts b/plugins/apps/rename-layers-plugin/src/app/app.component.ts index bc6fc72c59..70055739cc 100644 --- a/plugins/apps/rename-layers-plugin/src/app/app.component.ts +++ b/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>(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( diff --git a/plugins/apps/table-plugin/src/app/app.component.ts b/plugins/apps/table-plugin/src/app/app.component.ts index cb13e22061..4cce7de045 100644 --- a/plugins/apps/table-plugin/src/app/app.component.ts +++ b/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>(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(