Bump version to 2025.3.2-beta.19

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2025.3.2-beta.18",
+	"version": "2025.3.2-beta.19",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

packages/frontend-embed/src/components/EmMediaImage.vue

@@ -95,7 +95,7 @@ async function onclick(ev: MouseEvent) {
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--MI_THEME-fg);
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	font-size: 12px;
 	opacity: .5;
 	padding: 5px 8px;
@@ -153,7 +153,7 @@ html[data-color-scheme=light] .visible {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
 	border-radius: 6px;
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;

packages/frontend-embed/src/style.scss

@@ -278,7 +278,7 @@ rt {
 }
 
 ._acrylic {
-	background: var(--MI_THEME-acrylicPanel);
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend-shared/themes/_dark.json5

@@ -10,13 +10,10 @@
 
 	props: {
 		accent: '#86b300',
-		accentDarken: ':darken<10<@accent',
-		accentLighten: ':lighten<10<@accent',
 		accentedBg: ':alpha<0.15<@accent',
 		love: '#dd2e44',
 		focus: ':alpha<0.3<@accent',
 		bg: '#000',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#dadada',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -31,7 +28,6 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',

packages/frontend-shared/themes/_light.json5

@@ -10,13 +10,10 @@
 
 	props: {
 		accent: '#86b300',
-		accentDarken: ':darken<10<@accent',
-		accentLighten: ':lighten<10<@accent',
 		accentedBg: ':alpha<0.15<@accent',
 		love: '#dd2e44',
 		focus: ':alpha<0.3<@accent',
 		bg: '#fff',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#5f5f5f',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -31,7 +28,6 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',

packages/frontend-shared/themes/d-astro.json5

@@ -25,7 +25,6 @@
 		mention: '#ffd152',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '#fb5d38',
 		messageBg: '@bg',
@@ -37,10 +36,7 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
-		accentLighten: ':lighten<10<@accent',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<-20<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',

packages/frontend-shared/themes/d-u0.json5

@@ -31,7 +31,6 @@
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
 		messageBg: '@bg',
@@ -48,10 +47,7 @@
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
-		accentLighten: ':lighten<10<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',

packages/frontend-shared/themes/l-u0.json5

@@ -32,7 +32,6 @@
 		success: '#86b300',
 		buttonBg: '#0000000d',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
 		messageBg: '@bg',
@@ -49,10 +48,7 @@
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
-		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: '#0000001a',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':lighten<3<@fg',

packages/frontend-shared/themes/l-vivid.json5

@@ -28,7 +28,6 @@
 		mention: '@accent',
 		modalBg: 'rgba(0, 0, 0, 0.3)',
 		success: '#86b300',
-		acrylicBg: ':alpha<0.5<@bg',
 		indicator: '@accent',
 		mentionMe: '@mention',
 		messageBg: '@bg',
@@ -40,10 +39,7 @@
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
-		accentLighten: ':lighten<10<@accent',
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':darken<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',

packages/frontend/src/components/MkAutocomplete.vue

@@ -420,7 +420,7 @@ onBeforeUnmount(() => {
 	}
 
 	&:active {
-		background: var(--MI_THEME-accentDarken);
+		background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		color: #fff !important;
 	}
 }

packages/frontend/src/components/MkChannelFollowButton.vue

@@ -103,13 +103,13 @@ async function onClick() {
 		background: var(--MI_THEME-accent);
 
 		&:hover {
-			background: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
-			border-color: var(--MI_THEME-accentLighten);
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 
 		&:active {
-			background: var(--MI_THEME-accentDarken);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
-			border-color: var(--MI_THEME-accentDarken);
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 	}
 

packages/frontend/src/components/MkDrive.file.vue

@@ -151,11 +151,11 @@ function onDragend() {
 		background: var(--MI_THEME-accent);
 
 		&:hover {
-			background: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 
 		&:active {
-			background: var(--MI_THEME-accentDarken);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 
 		> .label {

packages/frontend/src/components/MkFolder.vue

@@ -239,7 +239,7 @@ onMounted(() => {
 	bottom: var(--MI-stickyBottom, 0px);
 	left: 0;
 	padding: 12px;
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 	background-size: auto auto;

packages/frontend/src/components/MkFollowButton.vue

@@ -211,13 +211,13 @@ onBeforeUnmount(() => {
 		background: var(--MI_THEME-accent);
 
 		&:hover {
-			background: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
-			border-color: var(--MI_THEME-accentLighten);
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 
 		&:active {
-			background: var(--MI_THEME-accentDarken);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
-			border-color: var(--MI_THEME-accentDarken);
+			border-color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
 		}
 	}
 

packages/frontend/src/components/MkMediaImage.vue

@@ -220,7 +220,7 @@ function showMenu(ev: MouseEvent) {
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--MI_THEME-fg);
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	font-size: 12px;
 	opacity: .5;
 	padding: 5px 8px;
@@ -294,7 +294,7 @@ html[data-color-scheme=light] .visible {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
 	border-radius: 6px;
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;

packages/frontend/src/components/MkMediaVideo.vue

@@ -553,7 +553,7 @@ onDeactivated(() => {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
 	border-radius: 6px;
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;
@@ -565,7 +565,7 @@ onDeactivated(() => {
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--MI_THEME-fg);
-	color: var(--MI_THEME-accentLighten);
+	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	font-size: 12px;
 	opacity: .5;
 	padding: 5px 8px;

packages/frontend/src/components/MkNotes.vue

@@ -23,10 +23,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			tag="div"
 		>
 			<template v-for="(note, i) in notes" :key="note.id">
-				<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
+				<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]">
-				<div v-if="note._shouldInsertAd_" :class="$style.ad">
+					<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
-					<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
+					<div :class="$style.ad">
+						<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
+					</div>
 				</div>
+				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true"/>
 			</template>
 		</component>
 	</template>

packages/frontend/src/components/MkRange.vue

@@ -287,7 +287,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 				border-radius: 999px;
 
 				&:hover {
-					background: var(--MI_THEME-accentLighten);
+					background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 				}
 			}
 		}

packages/frontend/src/components/MkRemoteEmojiEditDialog.vue

@@ -125,7 +125,7 @@ async function done() {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/components/MkRoleSelectDialog.vue

@@ -144,7 +144,7 @@ fetchRoles();
 }
 
 .roleItemArea {
-	background-color: var(--MI_THEME-acrylicBg);
+	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-radius: var(--MI-radius);
 	padding: 12px;
 	overflow-y: auto;

packages/frontend/src/components/MkSigninDialog.vue

@@ -84,7 +84,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
 	align-items: center;
 	font-weight: bold;
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	z-index: 1;
 }
 

packages/frontend/src/components/MkSystemWebhookEditor.vue

@@ -280,7 +280,7 @@ onMounted(async () => {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/components/MkThemePreview.vue

@@ -4,50 +4,44 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<svg
+<svg viewBox="0 0 200 150">
-	version="1.1"
-	viewBox="0 0 203.2 152.4"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
->
 	<g fill-rule="evenodd">
-		<rect width="203.2" height="152.4" :fill="themeVariables.bg" stroke-width=".26458" />
+		<rect width="200" height="150" :fill="themeVariables.bg"/>
-		<rect width="65.498" height="152.4" :fill="themeVariables.panel" stroke-width=".26458" />
+		<rect width="64" height="150" :fill="themeVariables.navBg"/>
-		<rect x="65.498" width="137.7" height="40.892" :fill="themeVariables.acrylicBg" stroke-width=".265" />
+		<rect x="64" width="136" height="41" fill="color(from var(--MI_THEME-bg) srgb r g b / 0.5)"/>
-		<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" />
+		<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.749" cy="83.054" r="21.132" :fill="themeVariables.accentedBg" stroke-dasharray="0.319256, 0.319256" stroke-width=".15963" style="paint-order:stroke fill markers" />
+	<circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
-	<circle cx="136.67" cy="106.76" r="23.876" :fill="themeVariables.fg" fill-opacity="0.5" stroke-dasharray="0.352425, 0.352425" stroke-width=".17621" style="paint-order:stroke fill markers" />
+	<circle cx="136" cy="106" r="23" :fill="themeVariables.fg" fill-opacity="0.5"/>
-	<g :fill="themeVariables.fg" fill-rule="evenodd" stroke-width=".26458">
+	<g :fill="themeVariables.fg" fill-rule="evenodd">
-		<rect x="171.27" y="87.815" width="48.576" height="6.8747" ry="3.4373"/>
+		<rect x="171" y="88" width="48" height="6" ry="3"/>
-		<rect x="171.27" y="105.09" width="48.576" height="6.875" ry="3.4375"/>
+		<rect x="171" y="108" width="48" height="6" ry="3"/>
-		<rect x="171.27" y="121.28" width="48.576" height="6.875" ry="3.4375"/>
+		<rect x="171" y="128" width="48" height="6" ry="3"/>
-		<rect x="171.27" y="137.47" width="48.576" height="6.875" ry="3.4375"/>
 	</g>
-	<path d="m65.498 40.892h137.7" :stroke="themeVariables.divider" stroke-width="0.75" />
+	<path d="m65.498 40.892h137.7" :stroke="themeVariables.divider" stroke-width="0.75"/>
 	<g transform="matrix(.60823 0 0 .60823 25.45 75.755)" fill="none" :stroke="themeVariables.accent" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-		<path d="m0 0h24v24h-24z" fill="none" stroke="none" />
+		<path d="m0 0h24v24h-24z" fill="none" stroke="none"/>
-		<path d="m5 12h-2l9-9 9 9h-2" />
+		<path d="m5 12h-2l9-9 9 9h-2"/>
-		<path d="m5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" />
+		<path d="m5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/>
-		<path d="m9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6" />
+		<path d="m9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6"/>
 	</g>
 	<g transform="matrix(.61621 0 0 .61621 25.354 117.92)" fill="none" :stroke="themeVariables.fg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-		<path d="m0 0h24v24h-24z" fill="none" stroke="none" />
+		<path d="m0 0h24v24h-24z" fill="none" stroke="none"/>
-		<path d="m10 5a2 2 0 1 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6" />
+		<path d="m10 5a2 2 0 1 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"/>
-		<path d="m9 17v1a3 3 0 0 0 6 0v-1" />
+		<path d="m9 17v1a3 3 0 0 0 6 0v-1"/>
 	</g>
-	<image x="20.948" y="18.388" width="23.602" height="23.602" image-rendering="optimizeSpeed" preserveAspectRatio="xMidYMid meet" v-bind="{ 'xlink:href': instance.iconUrl || '/favicon.ico' }" />
+	<circle cx="32" cy="32" r="16" :fill="themeVariables.accent"/>
 </svg>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { instance } from '@/instance.js';
-import { compile } from '@/theme.js';
-import type { Theme } from '@/theme.js';
-import { deepClone } from '@/utility/clone.js';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
+import type { Theme } from '@/theme.js';
+import { instance } from '@/instance.js';
+import { compile } from '@/theme.js';
+import { deepClone } from '@/utility/clone.js';
 
 const props = defineProps<{
 	theme: Theme;
@@ -55,20 +49,20 @@ const props = defineProps<{
 
 const themeVariables = ref<{
 	bg: string;
-	acrylicBg: string;
 	panel: string;
 	fg: string;
 	divider: string;
 	accent: string;
 	accentedBg: string;
+	navBg: string;
 }>({
 	bg: 'var(--MI_THEME-bg)',
-	acrylicBg: 'var(--MI_THEME-acrylicBg)',
 	panel: 'var(--MI_THEME-panel)',
 	fg: 'var(--MI_THEME-fg)',
 	divider: 'var(--MI_THEME-divider)',
 	accent: 'var(--MI_THEME-accent)',
 	accentedBg: 'var(--MI_THEME-accentedBg)',
+	navBg: 'var(--MI_THEME-navBg)',
 });
 
 watch(() => props.theme, (theme) => {
@@ -76,7 +70,7 @@ watch(() => props.theme, (theme) => {
 
 	const _theme = deepClone(theme);
 
-	if (_theme?.base != null) {
+	if (_theme.base != null) {
 		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
 		if (base) _theme.props = Object.assign({}, base.props, _theme.props);
 	}
@@ -85,12 +79,12 @@ watch(() => props.theme, (theme) => {
 
 	themeVariables.value = {
 		bg: compiled.bg ?? 'var(--MI_THEME-bg)',
-		acrylicBg: compiled.acrylicBg ?? 'var(--MI_THEME-acrylicBg)',
 		panel: compiled.panel ?? 'var(--MI_THEME-panel)',
 		fg: compiled.fg ?? 'var(--MI_THEME-fg)',
 		divider: compiled.divider ?? 'var(--MI_THEME-divider)',
 		accent: compiled.accent ?? 'var(--MI_THEME-accent)',
 		accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
+		navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)',
 	};
 }, { immediate: true });
 </script>

packages/frontend/src/components/grid/MkDataCell.vue

@@ -345,7 +345,7 @@ $cellHeight: 28px;
 	border: solid 0.5px transparent;
 
 	&.selected {
-		border: solid 0.5px var(--MI_THEME-accentLighten);
+		border: solid 0.5px hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 	}
 
 	&.ranged {

packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue

@@ -296,7 +296,7 @@ onMounted(async () => {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/pages/avatar-decoration-edit-dialog.vue

@@ -213,7 +213,7 @@ async function del() {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/pages/channel.vue

@@ -273,7 +273,7 @@ definePage(() => ({
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 

packages/frontend/src/pages/emoji-edit-dialog.vue

@@ -245,7 +245,7 @@ async function del() {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--MI_THEME-divider);
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/pages/flash/flash-edit.vue

@@ -467,7 +467,7 @@ definePage(() => ({
 <style lang="scss" module>
 .footer {
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid .5px var(--MI_THEME-divider);
 }
 </style>

packages/frontend/src/pages/reversi/game.setting.vue

@@ -292,7 +292,7 @@ onUnmounted(() => {
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 </style>

packages/frontend/src/pages/tag.vue

@@ -77,7 +77,7 @@ definePage(() => ({
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background: var(--MI_THEME-acrylicBg);
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
 	border-top: solid 0.5px var(--MI_THEME-divider);
 	display: flex;
 }

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -151,7 +151,7 @@ misskeyApiGet('federation/instances', {
 	left: 0;
 	right: 0;
 	margin: auto;
-	background: var(--MI_THEME-acrylicPanel);
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 	border-radius: 999px;

packages/frontend/src/style.scss

@@ -398,7 +398,7 @@ rt {
 }
 
 ._acrylic {
-	background: var(--MI_THEME-acrylicPanel);
+	background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
 }

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -159,7 +159,7 @@ function more() {
 
 	&:hover, &.active {
 		&::before {
-			background: var(--MI_THEME-accentLighten);
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 		}
 	}
 }

packages/frontend/src/ui/_common_/navbar.vue

@@ -382,7 +382,7 @@ function menuEdit() {
 
 		&:hover, &.active {
 			&::before {
-				background: var(--MI_THEME-accentLighten);
+				background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 			}
 		}
 	}
@@ -612,7 +612,7 @@ function menuEdit() {
 
 		&:hover, &.active {
 			&::before {
-				background: var(--MI_THEME-accentLighten);
+				background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
 			}
 		}
 	}

packages/frontend/src/ui/deck.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						v-for="id in ids"
 						:ref="id"
 						:key="id"
-						:class="$style.column"
+						:class="[$style.column, { '_shadow': withWallpaper }]"
 						:column="columns.find(c => c.id === id)!"
 						:isStacked="ids.length > 1"
 						@headerWheel="onWheel"
@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.sideMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button>
 				</div>
 				<div :class="$style.sideMenuBottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings-2"></i></button>
 				</div>
 			</div>
 		</div>
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.bottomMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button>
 			</div>
 			<div :class="$style.bottomMenuRight">
-				<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.bottomMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings"></i></button>
+				<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.bottomMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings-2"></i></button>
 			</div>
 		</div>
 

packages/frontend/src/ui/deck/column.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
+	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready, [$style.withWallpaper]: withWallpaper }]"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
@@ -48,11 +48,14 @@ import type { MenuItem } from '@/types/menu.js';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
+import { miLocalStorage } from '@/local-storage.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
 provide('forceSpacerMin', true);
 
+const withWallpaper = miLocalStorage.getItem('wallpaper') != null;
+
 const props = withDefaults(defineProps<{
 	column: Column;
 	isStacked?: boolean;
@@ -352,9 +355,7 @@ function onDrop(ev) {
 	}
 
 	&.naked {
-		background: var(--MI_THEME-acrylicBg) !important;
+		background: color(from var(--MI_THEME-bg) srgb r g b / 0.5) !important;
-		-webkit-backdrop-filter: var(--MI-blur, blur(10px));
-		backdrop-filter: var(--MI-blur, blur(10px));
 
 		> .header {
 			background: transparent;
@@ -372,6 +373,22 @@ function onDrop(ev) {
 		}
 	}
 
+	&.withWallpaper {
+		&.naked {
+			background: color(from var(--MI_THEME-bg) srgb r g b / 0.75) !important;
+			-webkit-backdrop-filter: var(--MI-blur, blur(10px));
+			backdrop-filter: var(--MI-blur, blur(10px));
+
+			> .header {
+				color: light-dark(#000000bf, #ffffffbf);
+			}
+		}
+
+		.tabShape {
+			display: none;
+		}
+	}
+
 	&.paged {
 		background: var(--MI_THEME-bg) !important;
 

packages/misskey-js/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "misskey-js",
-	"version": "2025.3.2-beta.18",
+	"version": "2025.3.2-beta.19",
 	"description": "Misskey SDK for JavaScript",
 	"license": "MIT",
 	"main": "./built/index.js",