Is it possible to change the status colour based on due, future, overdue state?

[chmac]

If I have a task which has a scheduled date tomorrow, can I change the status colour?

I'm thinking that I'd like future scheduled tasks to visually stand out less, and tasks that are overdue to stand out more. I can't see any option to do that, but wanted to ask in case I've missed it before I think about writing a PR.

[mohammadrezwankhan]

[chmac]

Thanks @mohammadrezwankhan, that was very helpful. Unfortunately there's no way to distinguish future scheduled from today scheduled tasks via the current CSS classes. At least not that I can see. Your snippet above deemphasises both future and today tasks.

Given this approach, what about a PR that just adds an extra CSS class if the task is scheduled today?

With a little digging and some :has() CSS classes, I'm able to style the entire row of tasks based on their past or not dates. But I can't find a way to distinguish tasks due today. Adding just that one class would solve the issue I believe.

[chmac]

I submitted a feature request #2223 and a PR #2224 to add --future and --today classes.

[chmac]

Also for anyone interested in the future, here's the CSS I'm using to target those classes. I've made the status ring fatter for overdue, and lighter for future tasks.

/* Tasks with due dates in the past */
.markdown-preview-section
  /* Exclude completed tasks */
  .task-card__main-row:has(
    > .task-card__content > .task-card__title:not(.completed)
  ):has(
    > .task-card__content
      > .task-card__metadata
      > .task-card__metadata-date--scheduled.task-card__metadata-date--past
  ) {
  > .task-card__status-dot {
    border-width: 3px;
  }
}

/* Tasks with due dates in the future (not today) */
.markdown-preview-section
  /* Exclude completed tasks */
  .task-card__main-row:has(
    > .task-card__content > .task-card__title:not(.completed)
  ):has(
    > .task-card__content
      > .task-card__metadata
      > .task-card__metadata-date--future
  ) {
  opacity: 0.7;
  > .task-card__status-dot {
    opacity: 0.8;
    border-width: 1px;
  }
}