Implement simple dark mode
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

This commit is contained in:
2022-03-01 20:47:55 +00:00
parent c899c21256
commit a53c3d23a4
6 changed files with 12 additions and 12 deletions

View File

@ -2,7 +2,7 @@
</script>
<template>
<div class="flex flex-row items-center bg-gray-300 rounded-lg">
<div class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
<slot></slot>
</div>
</template>

View File

@ -46,12 +46,12 @@ function getStatusSymbol() {
<template>
<tr v-if="dateChanged()" class="table-row md:hidden">
<td class="bg-gray-200 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
<td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
</tr>
<tr
v-if="!edit"
class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
:class="[index % 6 < 3 ? 'md:bg-gray-300' : 'md:bg-gray-100']"
:class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
>
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td class="hidden md:block">{{ formatDate(TX.Date) }}</td>