diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-09-24 21:02:22 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-09-24 21:02:22 +0900 |
| commit | 1679a40c7660b54c5437988d307aa3a14060d7f7 (patch) | |
| tree | 2ab0bd9e61bd91996fbaa973e4f440918232e8a1 /packages/frontend-embed/src/components | |
| parent | fix(frontend-embed): #14613 で抜け落ちた処理を戻す (#14623) (diff) | |
| download | misskey-1679a40c7660b54c5437988d307aa3a14060d7f7.tar.gz misskey-1679a40c7660b54c5437988d307aa3a14060d7f7.tar.bz2 misskey-1679a40c7660b54c5437988d307aa3a14060d7f7.zip | |
:art:
Diffstat (limited to 'packages/frontend-embed/src/components')
| -rw-r--r-- | packages/frontend-embed/src/components/EmMediaImage.vue | 14 |
1 files changed, 11 insertions, 3 deletions
diff --git a/packages/frontend-embed/src/components/EmMediaImage.vue b/packages/frontend-embed/src/components/EmMediaImage.vue index fe1aa5a877..470352469b 100644 --- a/packages/frontend-embed/src/components/EmMediaImage.vue +++ b/packages/frontend-embed/src/components/EmMediaImage.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="[hide ? $style.hidden : $style.visible]" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick"> +<div :class="[hide ? $style.hidden : $style.visible]" @click="onclick"> <a :title="image.name" :class="$style.imageContainer" @@ -58,7 +58,6 @@ const props = withDefaults(defineProps<{ }); const hide = ref(props.image.isSensitive); -const darkMode = ref<boolean>(false); // TODO const url = computed(() => (props.raw) ? props.image.url @@ -117,10 +116,19 @@ async function onclick(ev: MouseEvent) { position: relative; //box-shadow: 0 0 0 1px var(--divider) inset; background: var(--bg); - background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%); background-size: 16px 16px; } +html[data-color-scheme=dark] .visible { + --c: rgb(255 255 255 / 2%); + background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%); +} + +html[data-color-scheme=light] .visible { + --c: rgb(0 0 0 / 2%); + background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%); +} + .imageContainer { display: block; overflow: hidden; |