💄 优化浅色模式下的样式

This commit is contained in:
目棃
2024-01-21 13:57:30 +08:00
parent 03170814ad
commit 297474af9c

View File

@@ -1,9 +1,7 @@
<template>
<div class="tsl-box">
<img src="/src/assets/icons/arrow-right.svg" alt="right" />
<slot>
{{ props.title }}
</slot>
<img src="../../assets/icons/arrow-right.svg" alt="right" />
<slot>{{ props.title }}</slot>
</div>
</template>
<script lang="ts" setup>
@@ -24,15 +22,20 @@ const props = defineProps<{
gap: 5px;
}
.tsl-box img {
.tsl-box :first-child {
width: 20px;
height: 20px;
padding: 2px;
border-radius: 5px;
filter: invert(22%) sepia(7%) saturate(1241%) hue-rotate(182deg) brightness(95%) contrast(99%);
}
.dark .tsl-box {
background: #2c313a;
color: #faf7e8;
}
.dark .tsl-box :first-child {
filter: none;
}
</style>