fix: Add back custom checkbox (#307)

assets/scss/tailwind.scss

@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+input[type='checkbox'] {
+  appearance: none;
+  @apply border-2 rounded-md border-surface-onvariant dark:border-surface-ondarkvariant transition;
+}
+
+input[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-check' width='24' height='24' viewBox='0 0 24 24' stroke-width='3' stroke='white' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  @apply bg-current border-current;
+}

components/todoList/todoItem.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { nextTick, Ref, PropType } from 'vue'
 import { MenuIcon, TrashIcon, PencilIcon } from 'vue-tabler-icons'
+import { ButtonImportance } from '../base/types/button'
 import { TaskState, useTasklist, Task } from '~~/stores/tasklist'
 import { useSettings, ColorMethod } from '~~/stores/settings'
 import Button from '~~/components/base/uiButton.vue'
-import { ButtonImportance } from '../base/types/button'
 
 // declare refs
 const editbox: Ref<HTMLInputElement | null> = ref(null)
@@ -142,7 +142,7 @@ const handleEdit = (newValue: string) => {
           <TrashIcon size="18" />
         </Button>
       </transition>
-      <input v-model="checked" type="checkbox" class="w-6 h-6 mr-1 rounded text-themed dark:text-themed md:w-5 md:h-5">
+      <input v-model="checked" type="checkbox" class="w-6 h-6 mr-1 rounded accent-themed text-themed dark:text-themed md:w-5 md:h-5">
     </div>
   </div>
 </template>