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",
"Tampermonkey",
"Touhou",
"trendings",
"truetype",
"uname",
"usercard",

View File

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

View File

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

View File

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

View File

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

View File

@ -3,7 +3,7 @@
--Ga0: #0d0d0e;
--Ga0_s: #1e2022;
--Ga0_t: #1e2022;
--Ga1: #000000;
--Ga1: #000;
--Ga1_s: #232527;
--Ga1_t: #232527;
--Ga1_e: #232527;
@ -29,9 +29,9 @@
--Ga12: #1f2022;
--Wh0: #17181a;
--Wh0_t: #17181a;
--Ba0: #000000;
--Ba0_s: #ffffff;
--Ba0_t: #000000;
--Ba0: #000;
--Ba0_s: #fff;
--Ba0_t: #000;
--Pi0: #26161c;
--Pi1: #2f1a22;
--Pi2: #472030;
@ -187,6 +187,34 @@
--Si8: #c8ced6;
--Si9: #dce0e5;
--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 {
--brand_blue: var(--theme-color);

View File

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