enhance(frontend): 「モーダルにぼかし効果を使用」オプションが非活性になっている場合、画像をタップして表示するときに表示される背景を暗く調整

CHANGELOG_CHERRYPICK.md

@@ -36,6 +36,7 @@
 - about-misskey 페이지에서 클라이언트 버전을 누르면 변경 사항을 볼 수 있음
 - 새로운 신고가 있는 경우, 네비게이션 바의 제어판 아이콘과 제어판 페이지의 신고 섹션에 점을 표시
 - Enhance: 제어판 - 신고 페이지의 버튼 가독성 향상
+- Enhance: 「모달에 흐림 효과 사용」옵션이 비활성화된 경우, 이미지를 탭하여 표시할 때 표시되는 배경을 어둡게 조정
 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: 움직임이 있는 MFM 설정을 사용하지 않아도 `$[rainbow ]`문자를 볼 수 있음 (misskey-dev/misskey#11361)
 - Fix: 모바일에서 헤더의 디자인을 변경하면 흐림 효과가 강제됨

packages/frontend/src/components/MkMediaList.vue

@@ -169,7 +169,7 @@ onMounted(() => {
 				return item;
 			}),
 		gallery: gallery.value,
-		mainClass: 'pswp',
+		mainClass: defaultStore.state.useBlurEffectForModal ? 'pswp' : 'pswpX2',
 		children: '.image',
 		thumbSelector: '.image',
 		loop: false,
@@ -348,6 +348,11 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 	--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
 	--pswp-bg: var(--modalBg) !important;
 }
+
+:global(.pswpX2) {
+  --pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
+  --pswp-bg: var(--modalBgX2) !important;
+}
 </style>
 
 <style lang="scss">

packages/frontend/src/pages/settings/general.vue

@@ -366,6 +366,7 @@ watch(useSystemFont, () => {
 watch([
 	lang,
 	useBlurEffect,
+  useBlurEffectForModal,
 	// fontSize,
 	useBoldFont,
 	useSystemFont,

packages/frontend/src/themes/_dark.json5

@@ -47,6 +47,7 @@
 		renoteHover: ':lighten<5<@renote',
 		nameHover: ':darken<5<@fg',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
+		modalBgX2: 'rgba(0, 0, 0, 0.9)',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 		dateLabelFg: '@fg',

packages/frontend/src/themes/_light.json5

@@ -47,6 +47,7 @@
 		renoteHover: ':lighten<5<@renote',
 		nameHover: ':lighten<5<@fg',
 		modalBg: 'rgba(0, 0, 0, 0.3)',
+		modalBgX2: 'rgba(0, 0, 0, 0.9)',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
 		dateLabelFg: '@fg',