From 17e7340933887fb4044bdee4798ed87c873f1dad Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:59:05 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=86=E3=83=BC?=
 =?UTF-8?q?=E3=83=9E=E3=81=A7=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=98=E3=83=83?=
 =?UTF-8?q?=E3=83=80=E3=83=BC=E3=81=AE=E8=89=B2=E3=82=92=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend-shared/themes/_dark.json5           |  2 ++
 packages/frontend-shared/themes/_light.json5          |  2 ++
 packages/frontend/src/components/MkThemePreview.vue   |  5 ++++-
 .../frontend/src/components/global/MkPageHeader.vue   | 11 +++++++++--
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 924be27455..8ebaf20b64 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -33,6 +33,8 @@
 		navFg: '@fg',
 		navActive: '@accent',
 		navIndicator: '@indicator',
+		pageHeaderBg: '@bg',
+		pageHeaderFg: '@fg',
 		link: '#44a4c1',
 		hashtag: '#ff9156',
 		mention: '@accent',
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index e3c62ff543..63ad95ff84 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -33,6 +33,8 @@
 		navFg: '@fg',
 		navActive: '@accent',
 		navIndicator: '@indicator',
+		pageHeaderBg: '@bg',
+		pageHeaderFg: '@fg',
 		link: '#44a4c1',
 		hashtag: '#ff9156',
 		mention: '@accent',
diff --git a/packages/frontend/src/components/MkThemePreview.vue b/packages/frontend/src/components/MkThemePreview.vue
index 013ab9d6a4..cc4254a2f6 100644
--- a/packages/frontend/src/components/MkThemePreview.vue
+++ b/packages/frontend/src/components/MkThemePreview.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<g fill-rule="evenodd">
 		<rect width="200" height="150" :fill="themeVariables.bg"/>
 		<rect width="64" height="150" :fill="themeVariables.navBg"/>
-		<rect x="64" width="136" height="41" :fill="themeVariables.bg"/>
+		<rect x="64" width="136" height="41" :fill="themeVariables.pageHeaderBg"/>
 		<path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel"/>
 	</g>
 	<circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
@@ -62,6 +62,7 @@ const themeVariables = ref<{
 	accent: string;
 	accentedBg: string;
 	navBg: string;
+	pageHeaderBg: string;
 	success: string;
 	warn: string;
 	error: string;
@@ -76,6 +77,7 @@ const themeVariables = ref<{
 	accent: 'var(--MI_THEME-accent)',
 	accentedBg: 'var(--MI_THEME-accentedBg)',
 	navBg: 'var(--MI_THEME-navBg)',
+	pageHeaderBg: 'var(--MI_THEME-pageHeaderBg)',
 	success: 'var(--MI_THEME-success)',
 	warn: 'var(--MI_THEME-warn)',
 	error: 'var(--MI_THEME-error)',
@@ -104,6 +106,7 @@ watch(() => props.theme, (theme) => {
 		accent: compiled.accent ?? 'var(--MI_THEME-accent)',
 		accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
 		navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)',
+		pageHeaderBg: compiled.pageHeaderBg ?? 'var(--MI_THEME-pageHeaderBg)',
 		success: compiled.success ?? 'var(--MI_THEME-success)',
 		warn: compiled.warn ?? 'var(--MI_THEME-warn)',
 		error: compiled.error ?? 'var(--MI_THEME-error)',
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 93f46a866a..dc0b52b141 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -124,11 +124,18 @@ onUnmounted(() => {
 
 <style lang="scss" module>
 .root {
-	background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
+	background: color(from var(--MI_THEME-pageHeaderBg) srgb r g b / 0.75);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	border-bottom: solid 0.5px var(--MI_THEME-divider);
+	border-bottom: solid 0.5px transparent;
 	width: 100%;
+	color: var(--MI_THEME-pageHeaderFg);
+}
+
+@container style(--MI_THEME-pageHeaderBg: var(--MI_THEME-bg)) {
+	.root {
+		border-bottom: solid 0.5px var(--MI_THEME-divider);
+	}
 }
 
 .upper,