[data-theme="light"] {
  --bg-main: #eaeaeb;
  --bg-column: #cfcece;
  --bg-task-edit: rgba(111, 111, 111, 0.4);
  --bg-task-view: rgba(111, 111, 111, 0.4);
  --bg-input: #ffffff;
  --bg-button: #cfcece;
  --fg-main: #000000;
  --fg-input: #000000;
  --fg-button: #3d3d3d;
  --fg-text-read: #3d3d3d;
  --delete-task: darkred;
  --save-task: green;
  --archive-task: darkblue;
  --svg-filter: invert(0%) sepia(0%) saturate(7465%) hue-rotate(338deg) brightness(91%) contrast(109%); /* Applies a black filter where applied */
}

[data-theme="dark"] {
  --bg-main: #3d3c3c;
  --bg-column: #6f6f6f;
  --bg-task-edit: rgba(111, 111, 111, 0.4);
  --bg-task-view: rgba(111, 111, 111, 0.4);
  --bg-input: #000000;
  --bg-button: #6f6f6f;
  --fg-main: #ffffff;
  --fg-input: #ffffff;
  --fg-button: #d3d3d3;
  --fg-text-read: #c4c4c4;
  --delete-task: maroon;
  --save-task: darkgreen;
  --archive-task: purple;
  --svg-filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(224deg) brightness(108%) contrast(101%); /* Applies a white filter where applied */
}

.svg-filter {
  filter: var(--svg-filter);
}