Farben der Habits wälbarmachen

static/css/style.css

@@ -89,7 +89,7 @@ h1 {
 }
 
 .habit-actions button.completed-today {
-    color: #4CAF50;
+    color: var(--habit-color, #4CAF50);
 }
 
 .habit-actions button.not-completed-today {
@@ -97,11 +97,12 @@ h1 {
 }
 
 .habit-actions button.completed-today:hover {
-    color: #45a049;
+    color: var(--habit-color, #45a049);
+    filter: brightness(0.9);
 }
 
 .habit-actions button.not-completed-today:hover {
-    color: #4CAF50;
+    color: var(--habit-color, #4CAF50);
 }
 
 .date-grid {
@@ -133,7 +134,7 @@ h1 {
 }
 
 .date-square.completed {
-    background-color: #4CAF50;
+    background-color: var(--habit-color, #4CAF50);
 }
 
 /* Modal Styles */
@@ -188,7 +189,7 @@ h1 {
 
 #modalHabitName {
     text-align: center;
-    color: #4CAF50;
+    color: var(--current-habit-color, #4CAF50);
     margin-bottom: 20px;
 }
 
@@ -200,8 +201,8 @@ h1 {
 }
 
 .month-navigation button {
-    background-color: #4CAF50;
-    color: white;
+    background-color: var(--current-habit-color, #4CAF50);
+    color: var(--current-habit-text-color, white);
     border: none;
     border-radius: 5px;
     padding: 8px 12px;
@@ -210,7 +211,9 @@ h1 {
 }
 
 .month-navigation button:hover {
-    background-color: #45a049;
+    background-color: var(--current-habit-color, #45a049);
+    color: var(--current-habit-text-color, white);
+    filter: brightness(0.9);
 }
 
 #currentMonthYear {
@@ -226,7 +229,7 @@ h1 {
     margin-bottom: 10px;
     text-align: center;
     font-weight: bold;
-    color: #4CAF50;
+    color: var(--current-habit-color, #4CAF50);
 }
 
 .weekdays-header div {
@@ -251,7 +254,8 @@ h1 {
 }
 
 .date-cell.completed {
-    background-color: #4CAF50;
+    background-color: var(--current-habit-color, #4CAF50);
+    color: var(--current-habit-text-color, white);
 }
 
 .date-cell.today {
@@ -304,12 +308,14 @@ h1 {
 }
 
 #modalCompleteTodayBtn {
-    background-color: #4CAF50;
-    color: white;
+    background-color: var(--current-habit-color, #4CAF50);
+    color: var(--current-habit-text-color, white);
 }
 
 #modalCompleteTodayBtn:hover {
-    background-color: #45a049;
+    background-color: var(--current-habit-color, #45a049);
+    color: var(--current-habit-text-color, white);
+    filter: brightness(0.9);
 }
 
 #modalEditBtn {
@@ -328,4 +334,26 @@ h1 {
 
 #modalDeleteBtn:hover {
     background-color: #c82333;
+}
+
+.color-picker-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    gap: 10px;
+}
+
+.color-picker-section label {
+    color: #e0e0e0;
+    font-weight: bold;
+}
+
+#habitColorPicker {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    background: none;
 }