feat: add configuration for task-bar text color

README.md

@@ -137,6 +137,7 @@ npm start
 |                |          | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |
 |                |          | - **progressColor**: String. Specifies the taskbar progress fill color locally.                       |
 |                |          | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select.    |
+|                |          | - **textColor**: String. Specifies the taskbar text fill color locally.                               |
 | isDisabled     | bool     | Disables all action for current task.                                                                 |
 | fontSize       | string   | Specifies the taskbar font size locally.                                                              |
 | project        | string   | Task project name                                                                                     |

src/components/task-item/task-item.tsx

@@ -80,6 +80,11 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
     }
   };
 
+  const getTextColor = (): string => {
+    if (task.styles.textColor) return task.styles.textColor;
+    else return isTextInside ? "#FFF" : "#555";
+  };
+
   return (
     <g
       onKeyDown={e => {
@@ -116,6 +121,7 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
             ? style.barLabel
             : style.barLabel && style.barLabelOutside
         }
+        fill={getTextColor()}
         ref={textRef}
       >
         {task.name}

src/components/task-item/task-list.module.css

@@ -1,5 +1,4 @@
 .barLabel {
-  fill: #fff;
   text-anchor: middle;
   font-weight: lighter;
   dominant-baseline: central;
@@ -12,12 +11,5 @@
 }
 
 .barLabelOutside {
-  fill: #555;
   text-anchor: start;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
 }

src/types/bar-task.ts

@@ -17,6 +17,7 @@ export interface BarTask extends Task {
     backgroundSelectedColor: string;
     progressColor: string;
     progressSelectedColor: string;
+    textColor?: string;
   };
 }
 

src/types/public-types.ts

@@ -24,6 +24,7 @@ export interface Task {
     backgroundSelectedColor?: string;
     progressColor?: string;
     progressSelectedColor?: string;
+    textColor?: string;
   };
   isDisabled?: boolean;
   project?: string;