feat: color the task color button when the task has a color set

src/views/tasks/TaskDetailView.vue

@@ -379,6 +379,8 @@
 							variant="secondary"
 							icon="fill-drip"
 							v-shortcut="'c'"
+							:class="{'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color)}"
+							:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
 						>
 							{{ $t('task.detail.actions.color') }}
 						</x-button>
@@ -429,7 +431,7 @@ import {defineComponent} from 'vue'
 import cloneDeep from 'lodash.clonedeep'
 
 import TaskService from '../../services/task'
-import TaskModel from '@/models/task'
+import TaskModel, {TASK_DEFAULT_COLOR} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
 
 import { PRIORITIES as priorites } from '@/constants/priorities'
@@ -461,6 +463,7 @@ import { setTitle } from '@/helpers/setTitle'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
 import type { IList } from '@/modelTypes/IList'
+import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 function scrollIntoView(el) {
 	if (!el) {
@@ -527,6 +530,8 @@ export default defineComponent({
 			showDeleteModal: false,
 			// Used to avoid flashing of empty elements if the task content is not yet loaded.
 			visible: false,
+			
+			TASK_DEFAULT_COLOR,
 
 			activeFields: {
 				assignees: false,
@@ -594,6 +599,11 @@ export default defineComponent({
 		shouldShowClosePopup() {
 			return this.$route.name.includes('kanban')
 		},
+		color() {
+			return this.task.getHexColor
+				? this.task.getHexColor()
+				: TASK_DEFAULT_COLOR
+		},
 	},
 	methods: {
 		getNamespaceTitle,
@@ -745,6 +755,8 @@ export default defineComponent({
 			this.task = await this.taskService.update(this.task)
 			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 		},
+		
+		colorIsDark,
 	},
 })
 </script>
@@ -932,7 +944,11 @@ $flash-background-duration: 750ms;
     .button {
       width: 100%;
       margin-bottom: .5rem;
-      justify-content: left;
+      justify-content: left; 
+
+      &.has-light-text {
+		color: var(--white);
+      }
     }
   }