From 32c2bc1c44ea998504ee496901caa8dc8c14eb6c Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 2 Aug 2023 17:07:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=A2=E3=83=90=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=81=A7=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=82=92=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=81=A8=E3=80=81=E3=81=BC=E3=81=8B=E3=81=97?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=81=8C=E5=BC=B7=E5=88=B6=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                        |  1 +
 .../src/components/global/CPPageHeader.vue     | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 2f27160330..828e15702a 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/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)
diff --git a/packages/frontend/src/components/global/CPPageHeader.vue b/packages/frontend/src/components/global/CPPageHeader.vue
index 679c3abb65..dc6ff6a3f0 100644
--- a/packages/frontend/src/components/global/CPPageHeader.vue
+++ b/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(() => {