fix(frontend): モバイルでヘッダーのデザインを変更すると、ぼかし設定が強制された

CHANGELOG_CHERRYPICK.md

@@ -28,6 +28,7 @@
 ### Client
 - 이모티콘 피커의 검색 건수를 100개로 증가 (misskey-dev/misskey#11371)
 - Fix: 움직임이 있는 MFM 설정을 사용하지 않아도 `$[rainbow ]`문자를 볼 수 있음 (misskey-dev/misskey#11361)
+- Fix: 모바일에서 헤더의 디자인을 변경하면 블러 설정이 강제됨
 
 ### Server
 - Fix: 실행 중인 앱 내에서 ServerStatsService 시작 (misskey-dev/misskey#11342)

packages/frontend/src/components/global/CPPageHeader.vue

@@ -97,7 +97,7 @@ const metadata = injectPageMetadata();
 const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
-const el = $shallowRef<HTMLElement | undefined>(undefined);
+let el = $shallowRef<HTMLElement | undefined>(undefined);
 const tabRefs: Record<string, HTMLElement | null> = {};
 const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
 const bg = ref<string | undefined>(undefined);
@@ -172,19 +172,16 @@ function goBack() {
 }
 
 const calcBg = () => {
-	const rawBg = metadata?.bg || 'var(--bg)';
-	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-	if (narrow) tinyBg.setAlpha(1);
-	else tinyBg.setAlpha(0.85);
-	bg.value = tinyBg.toRgbString();
+  const rawBg = 'var(--bg)';
+  const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+  if (narrow) tinyBg.setAlpha(1);
+  else tinyBg.setAlpha(0.85);
+  bg.value = tinyBg.toRgbString();
 };
 
 let ro: ResizeObserver | null;
 
 onMounted(() => {
-	calcBg();
-	globalEvents.on('themeChanged', calcBg);
-
 	watch(() => [props.tab, props.tabs], () => {
 		nextTick(() => {
 			const tabEl = props.tab ? tabRefs[props.tab] : undefined;
@@ -210,6 +207,9 @@ onMounted(() => {
 		});
 		ro.observe(el.parentElement as HTMLElement);
 	}
+
+  calcBg();
+  globalEvents.on('themeChanged', calcBg);
 });
 
 onUnmounted(() => {