From 93214862b11407808577fe49970d2978c621cc3c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 31 Mar 2025 13:18:50 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/frontend-shared/themes/_dark.json5 | 1 -
packages/frontend-shared/themes/_light.json5 | 1 -
packages/frontend-shared/themes/d-astro.json5 | 1 -
packages/frontend-shared/themes/d-u0.json5 | 1 -
packages/frontend-shared/themes/l-u0.json5 | 1 -
packages/frontend-shared/themes/l-vivid.json5 | 1 -
packages/frontend/src/components/MkFolder.vue | 2 +-
.../components/MkRemoteEmojiEditDialog.vue | 2 +-
.../src/components/MkRoleSelectDialog.vue | 2 +-
.../src/components/MkSigninDialog.vue | 2 +-
.../src/components/MkSystemWebhookEditor.vue | 2 +-
.../src/components/MkThemePreview.vue | 62 +++++++++----------
.../notification-recipient.editor.vue | 2 +-
.../pages/avatar-decoration-edit-dialog.vue | 2 +-
packages/frontend/src/pages/channel.vue | 2 +-
.../frontend/src/pages/emoji-edit-dialog.vue | 2 +-
.../frontend/src/pages/flash/flash-edit.vue | 2 +-
.../src/pages/reversi/game.setting.vue | 2 +-
packages/frontend/src/pages/tag.vue | 2 +-
19 files changed, 40 insertions(+), 52 deletions(-)
diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 90507dd007..6a67cd0f23 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -14,7 +14,6 @@
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',
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index 0129e7bf83..4b7582457a 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -14,7 +14,6 @@
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',
diff --git a/packages/frontend-shared/themes/d-astro.json5 b/packages/frontend-shared/themes/d-astro.json5
index 6196753b2a..371a98ba27 100644
--- a/packages/frontend-shared/themes/d-astro.json5
+++ b/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',
diff --git a/packages/frontend-shared/themes/d-u0.json5 b/packages/frontend-shared/themes/d-u0.json5
index 6e1f33ce0f..57b97c5d75 100644
--- a/packages/frontend-shared/themes/d-u0.json5
+++ b/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',
diff --git a/packages/frontend-shared/themes/l-u0.json5 b/packages/frontend-shared/themes/l-u0.json5
index 687b389217..dd37ca2781 100644
--- a/packages/frontend-shared/themes/l-u0.json5
+++ b/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',
diff --git a/packages/frontend-shared/themes/l-vivid.json5 b/packages/frontend-shared/themes/l-vivid.json5
index f5589a5499..b3c0343e27 100644
--- a/packages/frontend-shared/themes/l-vivid.json5
+++ b/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',
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index afa09e3125..b039685e78 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/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;
diff --git a/packages/frontend/src/components/MkRemoteEmojiEditDialog.vue b/packages/frontend/src/components/MkRemoteEmojiEditDialog.vue
index 873b276b3d..dc9bacf481 100644
--- a/packages/frontend/src/components/MkRemoteEmojiEditDialog.vue
+++ b/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));
}
diff --git a/packages/frontend/src/components/MkRoleSelectDialog.vue b/packages/frontend/src/components/MkRoleSelectDialog.vue
index 5f77dc6734..fd56e4902c 100644
--- a/packages/frontend/src/components/MkRoleSelectDialog.vue
+++ b/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;
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index f122da7468..60c99880cd 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/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;
}
diff --git a/packages/frontend/src/components/MkSystemWebhookEditor.vue b/packages/frontend/src/components/MkSystemWebhookEditor.vue
index f819f82923..a3828ed1c5 100644
--- a/packages/frontend/src/components/MkSystemWebhookEditor.vue
+++ b/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));
}
diff --git a/packages/frontend/src/components/MkThemePreview.vue b/packages/frontend/src/components/MkThemePreview.vue
index 5b180b3680..c4d71d5ef4 100644
--- a/packages/frontend/src/components/MkThemePreview.vue
+++ b/packages/frontend/src/components/MkThemePreview.vue
@@ -4,50 +4,44 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<svg
- 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"
->
+<svg viewBox="0 0 200 150">
<g fill-rule="evenodd">
- <rect width="203.2" height="152.4" :fill="themeVariables.bg" stroke-width=".26458" />
- <rect width="65.498" height="152.4" :fill="themeVariables.panel" stroke-width=".26458" />
- <rect x="65.498" width="137.7" height="40.892" :fill="themeVariables.acrylicBg" stroke-width=".265" />
- <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" />
+ <rect width="200" height="150" :fill="themeVariables.bg"/>
+ <rect width="64" height="150" :fill="themeVariables.navBg"/>
+ <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"/>
</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="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" />
- <g :fill="themeVariables.fg" fill-rule="evenodd" stroke-width=".26458">
- <rect x="171.27" y="87.815" width="48.576" height="6.8747" ry="3.4373"/>
- <rect x="171.27" y="105.09" width="48.576" height="6.875" ry="3.4375"/>
- <rect x="171.27" y="121.28" width="48.576" height="6.875" ry="3.4375"/>
- <rect x="171.27" y="137.47" width="48.576" height="6.875" ry="3.4375"/>
+ <circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
+ <circle cx="136" cy="106" r="23" :fill="themeVariables.fg" fill-opacity="0.5"/>
+ <g :fill="themeVariables.fg" fill-rule="evenodd">
+ <rect x="171" y="88" width="48" height="6" ry="3"/>
+ <rect x="171" y="108" width="48" height="6" ry="3"/>
+ <rect x="171" y="128" width="48" height="6" ry="3"/>
</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="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="m9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6" />
+ <path d="m0 0h24v24h-24z" fill="none" stroke="none"/>
+ <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="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="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="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="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>
diff --git a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
index a56a24ff7d..10925fa4ab 100644
--- a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
+++ b/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));
}
diff --git a/packages/frontend/src/pages/avatar-decoration-edit-dialog.vue b/packages/frontend/src/pages/avatar-decoration-edit-dialog.vue
index 12fd867407..5a5e305f80 100644
--- a/packages/frontend/src/pages/avatar-decoration-edit-dialog.vue
+++ b/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));
}
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 5a29f942bd..a62e035198 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/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);
}
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 581198c89d..d0d8970309 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/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));
}
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index c2f66c0e4d..825a3be7c1 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/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>
diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue
index d2720a79fc..957b1cfc3d 100644
--- a/packages/frontend/src/pages/reversi/game.setting.vue
+++ b/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>
diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue
index a613fa7adf..4afef6f4d7 100644
--- a/packages/frontend/src/pages/tag.vue
+++ b/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;
}