chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: dark mode different color

Browse source
This commit is contained in:
Methapon2001 2024-04-11 09:43:09 +07:00
parent 80b4129057
commit f618766d54
1 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/StatCardComponent.vue
View file

@ -6,6 +6,7 @@ const props = defineProps<{
amount: number; amount: number;
label: string; label: string;
}[]; }[];
dark?: boolean;
}>(); }>();
const color = ['pink', 'purple']; const color = ['pink', 'purple'];
@ -15,7 +16,7 @@ const color = ['pink', 'purple'];
<div <div
class="row" class="row"
style="gap: var(--size-4)" style="gap: var(--size-4)"
:class="{ 'justify-between': $q.screen.lt.md }" :class="{ 'justify-between': $q.screen.lt.md, dark }"
> >
<AppBox <AppBox
v-for="(v, i) in props.branch" v-for="(v, i) in props.branch"
@ -38,7 +39,7 @@ const color = ['pink', 'purple'];
<div class="column justify-around stat-card-content"> <div class="column justify-around stat-card-content">
<div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div> <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
<div class="text-weight-bold">{{ v.label }}</div> <div class="text-weight-bold">{{ $t(v.label) }}</div>
</div> </div>
</AppBox> </AppBox>
</div> </div>
@ -77,4 +78,8 @@ svg {
.color-pink { .color-pink {
--_color-stat-card: var(--pink-6); --_color-stat-card: var(--pink-6);
} }
.dark .color-purple {
--_color-stat-card: var(--purple-8);
}
</style> </style>