🎨 (Table) Add contrast color for table

src/components/AccountTransactionList.vue

@@ -63,7 +63,13 @@
           </tr>
         </tbody>
         <tfoot v-if="foot">
-          <tr class="is-selected">
+          <tr
+            class="is-selected"
+            :style="{
+              'background-color': account.color,
+              color: findContrastColor(account.color)
+            }"
+          >
             <td colspan="2" class="total">total</td>
             <td class="numeric">
               {{ total | moneypad(account.mainCurrency) }}
@@ -79,6 +85,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import IAccount from '@/models/IAccount'
 import ITransaction from '@/models/ITransaction'
+import { findContrastColor } from '@/utils'
 
 @Component
 export default class AccountTransactionList extends Vue {
@@ -93,6 +100,7 @@ export default class AccountTransactionList extends Vue {
   @Prop({ type: Boolean, default: false })
   public foot!: boolean
   public filteredBy: string = ''
+  public findContrastColor = findContrastColor
 
   public get total(): number {
     return this.transactions.reduce(
@@ -136,11 +144,6 @@ export default class AccountTransactionList extends Vue {
   overflow-x: auto;
 }
 
-table tr.is-selected {
-  background-color: var(--primary-color);
-  color: var(--primary-font-color);
-}
-
 .multiline {
   line-height: 15px;
 }