Add dark mode adaptations

This commit is contained in:
the1812 2025-07-15 09:19:37 +08:00
parent 94fdf85395
commit 6879a1a5a2
7 changed files with 137 additions and 120 deletions

View File

@ -102,6 +102,7 @@
"tagid", "tagid",
"Tampermonkey", "Tampermonkey",
"Touhou", "Touhou",
"trendings",
"truetype", "truetype",
"uname", "uname",
"usercard", "usercard",

View File

@ -239,8 +239,8 @@ onBeforeUnmount(() => {
background-color: #fff; background-color: #fff;
body.dark & { body.dark & {
background-color: #444; color: var(--be-text-title-color, #eee);
color: #eee; background-color: var(--be-card-background-color, #444);
} }
&-header { &-header {
@ -327,7 +327,7 @@ onBeforeUnmount(() => {
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
border: 1px solid #8884; border: 1px solid var(--be-avatar-border-color, #8884);
} }
&-info { &-info {

View File

@ -276,8 +276,8 @@ body.disable-feeds-filter {
} }
} }
body.dark & { body.dark & {
color: #eee; color: var(--be-text-title-color, #eee);
background-color: #444; background-color: var(--be-card-background-color, #444);
} }
.feeds-filter-header { .feeds-filter-header {
cursor: pointer; cursor: pointer;

View File

@ -9,59 +9,56 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'
import { getComponentSettings } from '@/core/settings' import { getComponentSettings } from '@/core/settings'
import { VIcon } from '@/ui' import { VIcon } from '@/ui'
import { FeedsFilterOptions } from './options' import { FeedsFilterOptions } from './options'
const { options } = getComponentSettings<FeedsFilterOptions>('feedsFilter') interface Props {
export default Vue.extend({ name: string
components: {
VIcon,
},
props: {
name: {
type: String,
required: true,
},
type: { type: {
type: Object, id: number
required: true, name: string
},
},
data() {
const optionKey = this.type.id >= 0 ? 'types' : 'specialTypes'
const disabled = options[optionKey].includes(this.type.id)
return {
disabled,
optionKey,
} }
}, }
watch: {
disabled(newValue: boolean) { const props = defineProps<Props>()
this.setFilter(newValue)
}, const { options } = getComponentSettings<FeedsFilterOptions>('feedsFilter')
},
created() { const optionKey = computed(() => (props.type.id >= 0 ? 'types' : 'specialTypes'))
this.setFilter(this.disabled, false)
}, const disabled = ref(options[optionKey.value].includes(props.type.id))
methods: {
setFilter(disabled: boolean, updateSettings = true) { const setFilter = (isDisabled: boolean, updateSettings = true) => {
document.body.classList[disabled ? 'add' : 'remove'](`feeds-filter-block-${this.name}`) if (isDisabled) {
document.body.classList.add(`feeds-filter-block-${props.name}`)
} else {
document.body.classList.remove(`feeds-filter-block-${props.name}`)
}
if (!updateSettings) { if (!updateSettings) {
return return
} }
const optionKey = this.optionKey as 'types' | 'specialTypes'
if (disabled) { const key = optionKey.value as 'types' | 'specialTypes'
options[optionKey].push(this.type.id) if (isDisabled) {
options[key].push(props.type.id)
} else { } else {
const index = options[optionKey].indexOf(this.type.id) const index = options[key].indexOf(props.type.id)
if (index !== -1) { if (index !== -1) {
options[optionKey].splice(index, 1) options[key].splice(index, 1)
} }
} }
}, }
},
watch(disabled, (newValue: boolean) => {
setFilter(newValue)
})
onMounted(() => {
setFilter(disabled.value, false)
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
@ -77,7 +74,7 @@ export default Vue.extend({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border: 1px solid #8884; border: 1px solid var(--be-card-border-color, #8884);
.name { .name {
font-size: 12px; font-size: 12px;
@ -86,7 +83,7 @@ export default Vue.extend({
color: var(--theme-color) !important; color: var(--theme-color) !important;
} }
&:hover { &:hover {
background-color: #8882; background-color: var(--be-hover-highlight-background-color, #8882);
} }
input { input {
display: none; display: none;

View File

@ -19,8 +19,8 @@
color: black; color: black;
} }
body.dark & { body.dark & {
background-color: #444; color: var(--be-text-title-color, #eee);
color: #eee; background-color: var(--be-card-background-color, #444);
&:hover { &:hover {
color: var(--theme-color); color: var(--theme-color);
} }

View File

@ -3,7 +3,7 @@
--Ga0: #0d0d0e; --Ga0: #0d0d0e;
--Ga0_s: #1e2022; --Ga0_s: #1e2022;
--Ga0_t: #1e2022; --Ga0_t: #1e2022;
--Ga1: #000000; --Ga1: #000;
--Ga1_s: #232527; --Ga1_s: #232527;
--Ga1_t: #232527; --Ga1_t: #232527;
--Ga1_e: #232527; --Ga1_e: #232527;
@ -29,9 +29,9 @@
--Ga12: #1f2022; --Ga12: #1f2022;
--Wh0: #17181a; --Wh0: #17181a;
--Wh0_t: #17181a; --Wh0_t: #17181a;
--Ba0: #000000; --Ba0: #000;
--Ba0_s: #ffffff; --Ba0_s: #fff;
--Ba0_t: #000000; --Ba0_t: #000;
--Pi0: #26161c; --Pi0: #26161c;
--Pi1: #2f1a22; --Pi1: #2f1a22;
--Pi2: #472030; --Pi2: #472030;
@ -187,6 +187,34 @@
--Si8: #c8ced6; --Si8: #c8ced6;
--Si9: #dce0e5; --Si9: #dce0e5;
--Si10: #f0f2f4; --Si10: #f0f2f4;
--Pi5_rgb: 212, 78, 125;
--Pi1_rgb: 47, 26, 34;
--Lb5_rgb: 0, 135, 189;
--Lb1_rgb: 11, 32, 42;
--Re5_rgb: 209, 64, 62;
--Re1_rgb: 46, 22, 23;
--Gr5_rgb: 31, 162, 81;
--Gr1_rgb: 17, 39, 27;
--Or5_rgb: 214, 96, 17;
--Or1_rgb: 48, 27, 16;
--Ye5_rgb: 219, 135, 0;
--Ye1_rgb: 52, 36, 16;
--Wh0_rgb: 23, 24, 26;
--Ga0_rgb: 13, 13, 14;
--Ga1_rgb: 0, 0, 0;
--Ga11_rgb: 36, 38, 40;
--Ga12_rgb: 31, 32, 34;
--Wh0_u_rgb: 255, 255, 255;
--Ga10_rgb: 231, 233, 235;
--Ga7_rgb: 162, 167, 174;
--Ga5_rgb: 117, 122, 129;
--Ga3_rgb: 70, 73, 77;
--Lb6_rgb: 44, 156, 200;
--Ye6_rgb: 225, 156, 44;
--Ga1_s_rgb: 35, 37, 39;
--Ga2_rgb: 47, 49, 52;
--Ga0_s_rgb: 30, 32, 34;
--Ba0_rgb: 0, 0, 0;
} }
html:root { html:root {
--brand_blue: var(--theme-color); --brand_blue: var(--theme-color);

View File

@ -29,66 +29,60 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'
import { VIcon, ProgressRing } from '@/ui' import { VIcon, ProgressRing } from '@/ui'
import type { Toast } from '.' import type { Toast } from '.'
export default Vue.extend({ interface Props {
components: { card: Toast
VIcon, }
ProgressRing,
}, const props = defineProps<Props>()
props: {
card: { const progressMax = ref(0)
type: Object, const remainingTime = ref(0)
required: true,
}, const durationTick = () => {
}, const { closeTime } = props.card
data() {
return {
progressMax: 0,
remainingTime: 0,
}
},
created() {
this.readDuration()
},
methods: {
durationTick() {
const { closeTime } = this.card as Toast
if (!closeTime) { if (!closeTime) {
return return
} }
this.remainingTime = closeTime - Number(new Date()) remainingTime.value = closeTime - Number(new Date())
if (this.remainingTime > 0) { if (remainingTime.value > 0) {
requestAnimationFrame(() => this.durationTick()) requestAnimationFrame(() => durationTick())
} }
}, }
readDuration() {
const { duration, closeTime } = this.card as Toast const readDuration = () => {
const { duration, closeTime } = props.card
if (duration) { if (duration) {
this.progressMax = closeTime - Number(new Date()) progressMax.value = closeTime - Number(new Date())
this.remainingTime = this.progressMax remainingTime.value = progressMax.value
requestAnimationFrame(() => this.durationTick()) requestAnimationFrame(() => durationTick())
} }
}, }
stopTimer() {
;(this.card as Toast).clearDuration() const stopTimer = () => {
this.progressMax = 0 props.card.clearDuration()
this.remainingTime = 0 progressMax.value = 0
}, remainingTime.value = 0
startTimer() { }
;(this.card as Toast).setDuration()
this.readDuration() const startTimer = () => {
}, props.card.setDuration()
}, readDuration()
}
onMounted(() => {
readDuration()
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
@import 'common'; @import 'common';
.toast-card { .toast-card {
background: #fff; background: var(--be-card-background-color, #fff);
min-width: var(--card-min-width); min-width: var(--card-min-width);
max-width: 60vw; max-width: 60vw;
min-height: 87px; min-height: 87px;
@ -119,14 +113,11 @@ export default Vue.extend({
} }
&-title { &-title {
font-size: 18px; font-size: 18px;
color: #444; color: var(--be-text-title-color, #444);
opacity: 0.5; opacity: 0.5;
margin: 12px; margin: 12px;
@include semi-bold(); @include semi-bold();
flex: 1 1 auto; flex: 1 1 auto;
body.dark & {
color: #999;
}
} }
&-close { &-close {
height: 24px; height: 24px;
@ -166,7 +157,7 @@ export default Vue.extend({
} }
} }
&-message { &-message {
color: #000; color: var(--be-text-content-color, #000);
font-size: 14px; font-size: 14px;
margin: 0 16px 12px 12px; margin: 0 16px 12px 12px;
white-space: pre-wrap; white-space: pre-wrap;
@ -196,19 +187,19 @@ export default Vue.extend({
display: inline-block; display: inline-block;
padding: 2px 4px; padding: 2px 4px;
margin: 2px; margin: 2px;
background-color: #8882; background-color: var(--be-tag-background-color, #8882);
color: var(--be-text-content-color, #000);
text-decoration: none; text-decoration: none;
color: #000;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
border-radius: 6px; border-radius: 6px;
} }
.link { .link {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #8883; background-color: var(--be-tag-hover-background-color, #8883);
} }
&:active { &:active {
background-color: #8884; background-color: var(--be-tag-active-background-color, #8884);
} }
} }
.download-link, .download-link,