My tasks theme and custom group by file's tag

[TamadoIchikai]

Overview

First of all, thanks for this amazing plugin, it has everything i need, from a detailed documentation to css custom. Therefore, i wanna share my workflow and theme, this workflow is inspired by #3332 and #1939 but with file's tag not task's tag, this allow me to organize both file's tasks and big project or MOCs tasks using tag.
For example i have 3 files locate in "Cards/" folder:
File A.md
File B.md
File C.md
Output:

Notice that:

• Below tasks code and css mainly written by gemini 2.5 pro and chatgpt 4o
• Current styling doesn't support nested tasks and list items (since i just discover show tree command today)
• If you use tag/subtag, group function will only get parent tag which is tag/
• if you have multiple tag in YAML property, tasks plugin will get the first tag, for example

tags:
  - testing
  - testing_2

Then tasks plugin will get tag testing and ignore testing_2

Code

Parent tag sort by highest -> lowest urgency score

not done
(scheduled tomorrow) OR ((no scheduled date) AND (due in 2 days))
folder includes Cards
group by function { \
  const key = "tasksInQuery"; \
  if (!query.searchCache[key]) query.searchCache[key] = []; \
  query.searchCache[key].push(task); \
  return null; \
}
group by function { \
    const cacheKey = "master-sort-order-cache"; \
    if (!query.searchCache[cacheKey]) { \
        const getFirstTag = (t) => { \
            const tags = t.file?.property("tags") ?? []; \
            const fullTags = Array.isArray(tags) ? tags : [tags]; \
            const validTags = fullTags.filter(tag => typeof tag === 'string' && tag.startsWith('#')).map(tag => tag.trim()); \
            return validTags.length > 0 ? validTags[0] : '#NoTag'; \
        }; \
        const getRootTag = (tag) => tag.split("/")[0]; \
        const getAvgUrgency = (e) => e.totalUrgency / (e.taskCount || 1); \
        const groupData = new Map(); \
        for (const t of query.searchCache["tasksInQuery"]) { \
            const rootTag = getRootTag(getFirstTag(t)); \
            if (!groupData.has(rootTag)) groupData.set(rootTag, { totalUrgency: 0, taskCount: 0, files: new Map() }); \
            const tagEntry = groupData.get(rootTag); \
            const filePath = t.path; \
            if (!tagEntry.files.has(filePath)) tagEntry.files.set(filePath, { totalUrgency: 0, taskCount: 0 }); \
            const fileEntry = tagEntry.files.get(filePath); \
            tagEntry.totalUrgency += t.urgency; \
            tagEntry.taskCount++; \
            fileEntry.totalUrgency += t.urgency; \
            fileEntry.taskCount++; \
        } \
        const sortedParentTags = [...groupData.keys()].sort((a, b) => getAvgUrgency(groupData.get(b)) - getAvgUrgency(groupData.get(a))); \
        const fileSortOrders = {}; \
        for (const [rootTag, data] of groupData.entries()) { \
            fileSortOrders[rootTag] = [...data.files.keys()].sort((a, b) => getAvgUrgency(data.files.get(b)) - getAvgUrgency(data.files.get(a))); \
        } \
        query.searchCache[cacheKey] = { sortedParentTags, fileSortOrders, helpers: { getFirstTag, getRootTag } }; \
    } \
    const cache = query.searchCache[cacheKey]; \
    const rootTag = cache.helpers.getRootTag(cache.helpers.getFirstTag(task)); \
    return `%%${cache.sortedParentTags.indexOf(rootTag)}%% ${rootTag}`; \
}
group by function { \
    const cache = query.searchCache["master-sort-order-cache"]; \
    const rootTag = cache.helpers.getRootTag(cache.helpers.getFirstTag(task)); \
    const sortedFiles = cache.fileSortOrders[rootTag] || []; \
    return `%%${sortedFiles.indexOf(task.path)}%% [[${task.filename}]]`; \
}

Parent tag sort by alphabetically

not done
(scheduled tomorrow) OR ((no scheduled date) AND (due in 2 days))
folder includes Cards
group by function { \
  const key = "tasksInQuery"; \
  if (!query.searchCache[key]) query.searchCache[key] = []; \
  query.searchCache[key].push(task); \
  return null; \
}
group by function { \
    const cacheKey = "master-sort-order-cache"; \
    if (!query.searchCache[cacheKey]) { \
        const getFirstTag = (t) => { \
            const tags = t.file?.property("tags") ?? []; \
            const fullTags = Array.isArray(tags) ? tags : [tags]; \
            const validTags = fullTags.filter(tag => typeof tag === 'string' && tag.startsWith('#')).map(tag => tag.trim()); \
            return validTags.length > 0 ? validTags[0] : '#NoTag'; \
        }; \
        const getRootTag = (tag) => tag.split("/")[0]; \
        const getAvgUrgency = (e) => e.totalUrgency / (e.taskCount || 1); \
        const groupData = new Map(); \
        for (const t of query.searchCache["tasksInQuery"]) { \
            const rootTag = getRootTag(getFirstTag(t)); \
            if (!groupData.has(rootTag)) groupData.set(rootTag, new Map()); \
            const filesMap = groupData.get(rootTag); \
            const filePath = t.path; \
            if (!filesMap.has(filePath)) filesMap.set(filePath, { totalUrgency: 0, taskCount: 0 }); \
            const fileEntry = filesMap.get(filePath); \
            fileEntry.totalUrgency += t.urgency; \
            fileEntry.taskCount++; \
        } \
        const sortedParentTags = [...groupData.keys()].sort((a, b) => a.localeCompare(b)); \
        const fileSortOrders = {}; \
        for (const [rootTag, filesMap] of groupData.entries()) { \
            fileSortOrders[rootTag] = [...filesMap.keys()].sort((a, b) => getAvgUrgency(filesMap.get(b)) - getAvgUrgency(filesMap.get(a))); \
        } \
        query.searchCache[cacheKey] = { sortedParentTags, fileSortOrders, helpers: { getFirstTag, getRootTag } }; \
    } \
    const cache = query.searchCache[cacheKey]; \
    const rootTag = cache.helpers.getRootTag(cache.helpers.getFirstTag(task)); \
    return `%%${cache.sortedParentTags.indexOf(rootTag)}%% ${rootTag}`; \
}
group by function { \
    const cache = query.searchCache["master-sort-order-cache"]; \
    const rootTag = cache.helpers.getRootTag(cache.helpers.getFirstTag(task)); \
    const sortedFiles = cache.fileSortOrders[rootTag] || []; \
    return `%%${sortedFiles.indexOf(task.path)}%% [[${task.filename}]]`; \
}

Theme

Theme: Things
Addtional css:

• Monochrome icon: Github discussion 1965

things theme style setting:

{
  "typomagical-text@@ss-hide-external-link-icon": false,
  "typomagical-colour@@theme-variant": "obsidian-high-contrast",
  "typomagical-text@@link-font": "ss-links-spectral",
  "minimal-style@@trim-cols": false,
  "minimal-style@@max-col-width": "\"\"",
  "minimal-style@@h1-size": "2em",
  "minimal-style@@h1-l": true,
  "minimal-style@@h2-size": "1.5em",
  "minimal-style@@h1-variant": "normal",
  "minimal-style@@h1-style": "normal",
  "minimal-style@@h2-weight": 500,
  "minimal-style@@h3-weight": 400,
  "minimal-style@@h4-weight": 300,
  "minimal-style@@h5-weight": 300,
  "minimal-style@@h6-weight": 300,
  "minimal-style@@link-color@@dark": "#5479DF",
  "things-style@@h1-weight": 800,
  "things-style@@h1-size": "2em",
  "things-style@@h4-transform": "uppercase",
  "things-style@@strong-color": "#FFFFFF",
  "things-style@@em-color": "#B3B3B3",
  "things-style@@link-decoration": "None",
  "things-style@@tag-background-color-d": "#1D694B",
  "things-style@@h3-color": "#E86E2F",
  "things-style@@h5-color": "#D83030",
  "things-style@@h6-color": "#22BA20",
  "things-style@@h3-size": "1.3em",
  "things-style@@h4-size": "1.2em"
}

Task block css:

/* Strikethrough for Cancelled tasks:  * https://github.com/deathau/obsidian-snippets/blob/main/checkbox.css */
.HyperMD-task-line[data-task="-"],
.plugin-tasks-list-item[data-task="-"] {
    text-decoration: var(--checklist-done-decoration);
}

.task-management .markdown-preview-section {
    width: 100% !important;
    max-width: 100% !important;
}
/* -------------------------------------------------------------- */

ul li.plugin-tasks-list-item {
  grid-template-columns: 25px auto;
  display: grid;
  align-items: top;
}

span.task-description {
  grid-row: 1;
  grid-column: 1/10;
  font-size: medium;
  margin-left: -10px;
}

span.task-due, span.task-scheduled, span.task-start {
    display: inline-flex;
    align-items: center;
    padding: .2em .45em;
    border-radius: 20px;
    font-size: .8em;
    white-space: nowrap; /* Prevent breaking into new lines */
    margin-top: 1px;
}

span.task-due {
  grid-column: 2;
  grid-row: 2;
  font-size: small;
  color: rgb(141, 140, 140);
}

span.task-scheduled {
  grid-row: 2;
  grid-column: 1;
  font-size: small;
  color: rgb(141, 140, 140);
}

span.task-start {
  grid-row:2;
  font-size: small;
  color: rgb(141, 140, 140);
}

span.task-done {
  grid-row: 2;
  font-size: small;
  width: max-content;
}

.tasks-postpone {
    display: none;
}

span.task-extras {
  display: grid;
  grid-template-columns: 25px auto;
  grid-row: 3;
  grid-column: 2;
  align-content: top;
  font-size: small;
  color: gray;
  margin-left: -12px;
  margin-top: 4px;
}


.task-extras .tasks-edit {
  order: 1;
  color: gray;
}

.task-extras .tasks-backlink {
  order: 2;
}

span.task-recurring {
  grid-row: 2;
  grid-column: 4;
  font-size: small;
  width: max-content;
  color: gray;
}


li.task-list-item ul.has-list-bullet {
 grid-row: 3;
 grid-column: 1/10;
}

.task-list-item {
  margin-bottom: 0.6em !important;
  border-bottom: 1px dotted rgba(82, 81, 81, 0.423);
}

/* Reduce padding to make them fit neatly */
.contains-task-list .task-due, 
.contains-task-list .task-scheduled, 
.contains-task-list .task-start {
    padding: .15em .4em;
}

.tasks-list-text {
  margin-top: -4px;
  position: relative;
  display: inline-grid;
  width: fit-content;
  grid-column-gap: 10px;
}


/* Make sure nested bullets in Reading mode get the whole width of the grid */
li.task-list-item ul.has-list-bullet {
grid-row: 3;
grid-column: 1/10;
}

ul li.plugin-tasks-list-item .task-list-item-checkbox {
  margin: 2px 2px;
  border-radius: 50%;
}

.tasks-backlink a.internal-link {
    color: var(--list-marker-color);
}

.task-recurring {
    color: var(--list-marker-color);
}

.task-list-item[data-task-priority="highest"] input[type=checkbox] {
    box-shadow: 0px 0px 2px 2px var(--color-red);
    border-color: var(--color-red);
}


.task-list-item[data-task-priority="high"] input[type=checkbox] {
  box-shadow: 0px 0px 2px 2px var(--color-orange);
  border-color: var(--color-orange);
}

.task-list-item[data-task-priority="medium"] input[type=checkbox] {
    box-shadow: 0px 0px 2px 2px var(--color-blue);
    border-color: var(--color-blue);
}

.task-list-item[data-task-priority="normal"] input[type=checkbox] {
    box-shadow: 0px 0px 2px 2px var(--color-cyan);
    border-color: var(--color-cyan);
}

.task-list-item[data-task-priority="low"] input[type=checkbox] {
    box-shadow: 0px 0px 2px 2px var(--color-green);
    border-color: var(--color-green);
}

/* This part removes the regular priority emoticon */
span.task-priority {
  display: none;
}


/* Task heading design changes */
h5.tasks-group-heading {
    border-bottom: 1px dashed rgba(82, 81, 81, 0.692);
    font-size:1.3em;
    color: white;
    margin-bottom: 0.7em;
}
h5.tasks-group-heading:first-of-type{
    margin-top: 0px;
}
h5.tasks-group-heading:not(:first-of-type){
    margin-top: -10px;
}

h6.tasks-group-heading {
    font-weight: normal;
    font-size: 1.1em;
}

h6.tasks-group-heading {
    margin-top: -10px;
}

.contains-task-list + h6.tasks-group-heading {
    margin-top: -10px;
}

h4.tasks-group-heading p,
h5.tasks-group-heading p,
h6.tasks-group-heading p {
    margin-block: 1px;
}

.tasks-group-heading + ul.contains-task-list li.plugin-tasks-list-item:first-child {
    margin-top: -10px !important;
}


:root {
    --pill-1-outline: rgba(110, 69, 0, 0.357);
    --pill-1-color: rgba(54, 32, 0, 0.706);
    --pill-1-bg: rgba(176, 138, 0, 0.05);
    --pill-1-outline-dark: rgba(184, 168, 137, 0.27);
    --pill-1-color-dark: rgba(218, 199, 174, 0.776);
    --pill-1-bg-dark: rgba(255, 179, 0, 0.01);
    --pill-2-outline: rgba(204, 126, 0, 0.53);
    --pill-2-color: rgba(120, 50, 0, 0.81);
    --pill-2-bg: rgba(255, 171, 2, 0.07);
    --pill-2-outline-dark: rgba(222, 186, 44, 0.376);
    --pill-2-color-dark: rgb(233, 185, 63);;
    --pill-2-bg-dark: rgba(227, 149, 15, 0.050);  
    --pill-3-outline: rgba(255, 89, 0, 0.51);
    --pill-3-color: rgba(123, 33, 0, 0.773);
    --pill-3-bg: rgba(255, 97, 5, 0.043);
    --pill-3-outline-dark: rgba(201, 109, 43, 0.443);
    --pill-3-color-dark: rgb(241, 141, 75);
    --pill-3-bg-dark: rgba(255, 0, 0, 0.050);  
    --pill-4-outline: rgba(222, 37, 0, 0.365);
    --pill-4-color: rgba(190, 32, 0, 0.925);
    --pill-4-bg: rgba(255, 38, 5, 0.03);
    --pill-4-outline-dark: rgba(255, 60, 26, 0.48);
    --pill-4-color-dark: rgb(223, 98, 73);
    --pill-4-bg-dark: rgba(188, 79, 79, 0.050);  
    --pill-5-outline: rgba(217, 0, 4, 0.318);
    --pill-5-color: rgba(187, 0, 6, 0.835);
    --pill-5-bg: rgba(255, 5, 5, 0.03);
    --pill-5-outline-dark: rgba(255, 34, 56, 0.5);
    --pill-5-color-dark: rgb(255, 133, 137);
    --pill-5-bg-dark: rgba(254, 0, 25, 0.075);  
    --pill-6-outline: rgba(199, 0, 83, 0.32);
    --pill-6-color: rgba(196, 0, 79, 0.886);
    --pill-6-bg: rgba(255, 5, 130, 0.03) ;
    --pill-6-outline-dark: rgba(255, 38, 125, 0.486);
    --pill-6-color-dark: rgb(255, 133, 172);
    --pill-6-bg-dark: rgba(254, 0, 93, 0.075);  
  }


  /* ----------------- For task due --------------------- */
.contains-task-list .task-due {
    padding: .2em .45em;
    border-radius: 20px;
    font-size: .8em;
}

.contains-task-list .task-due[data-task-due="future-far"],
.contains-task-list .task-due[data-task-due="future-8d"],
.contains-task-list .task-due[data-task-due="future-7d"],
.contains-task-list .task-due[data-task-due="future-6d"],
.contains-task-list .task-due[data-task-due="future-5d"] {
    color: var(--pill-1-color);
    background-color: var(--pill-1-bg);
}

.contains-task-list .task-due[data-task-due="future-4d"],
.contains-task-list .task-due[data-task-due="future-3d"] {
    color: var(--pill-2-color);
    background-color: var(--pill-2-bg);
}

.contains-task-list .task-due[data-task-due="future-2d"],
.contains-task-list .task-due[data-task-due="future-1d"] {
    box-shadow: var(--pill-3-outline) 0px 0px 0px 1px inset; 
    color: var(--pill-3-color);
    background-color: var(--pill-3-bg);
}

.contains-task-list .task-due[data-task-due="today"] {
    box-shadow: var(--pill-4-outline) 0px 0px 0px 1px inset;
    color: var(--pill-4-color);
    background-color: var(--pill-4-bg);
}

.contains-task-list .task-due[data-task-due="past-1d"],
.contains-task-list .task-due[data-task-due="past-2d"],
.contains-task-list .task-due[data-task-due="past-3d"] {
    box-shadow: var(--pill-5-outline) 0px 0px 0px 1px inset;
    color: var(--pill-5-color);
    background-color: var(--pill-5-bg);
}

.contains-task-list .task-due[data-task-due="past-4d"],
.contains-task-list .task-due[data-task-due="past-5d"],
.contains-task-list .task-due[data-task-due="past-6d"],
.contains-task-list .task-due[data-task-due="past-7d"],
.contains-task-list .task-due[data-task-due="past-far"] {
    box-shadow: var(--pill-6-outline) 0px 0px 0px 1px inset;
    color: var(--pill-6-color);
    background-color: var(--pill-6-bg);
}

.theme-dark .contains-task-list .task-due[data-task-due="future-far"],
.theme-dark .contains-task-list .task-due[data-task-due="future-7d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-6d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-5d"] {
    box-shadow: var(--pill-1-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-1-color-dark);
    background-color: var(--pill-1-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="future-4d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-3d"] {
    box-shadow: var(--pill-2-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-2-color-dark);
    background-color: var(--pill-2-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="future-2d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-1d"] 
{
    box-shadow: var(--pill-3-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-3-color-dark);
    background-color: var(--pill-3-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="today"] {
    box-shadow: var(--pill-4-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-4-color-dark);
    background-color: var(--pill-4-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="past-1d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-2d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-3d"] {
    box-shadow: var(--pill-5-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-5-color-dark);
    background-color: var(--pill-5-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="past-4d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-5d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-6d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-7d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-far"] {
    box-shadow: var(--pill-6-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-6-color-dark);
    background-color: var(--pill-6-bg-dark);
}

.contains-task-list .task-due span {
    display:none;
}

.contains-task-list .task-list-item[data-task-done] .task-due {
    display: none;
}

.contains-task-list .task-due[data-task-due="future-far"] span { display: inline; }
.contains-task-list .task-due[data-task-due="future-7d"]::after { content: "due in a week" }
.contains-task-list .task-due[data-task-due="future-6d"]::after { content: "due in 6 days" }
.contains-task-list .task-due[data-task-due="future-5d"]::after { content: "due in 5 days" }
.contains-task-list .task-due[data-task-due="future-4d"]::after { content: "due in 4 days" }
.contains-task-list .task-due[data-task-due="future-3d"]::after { content: "due in 3 days" }
.contains-task-list .task-due[data-task-due="future-2d"]::after { content: "due in 2 days" }
.contains-task-list .task-due[data-task-due="future-1d"]::after { content: "due tomorrow" }
.contains-task-list .task-due[data-task-due="today"]::after { content: "due today" }
.contains-task-list .task-due[data-task-due="past-1d"]::after { content: "due yesterday" }
.contains-task-list .task-due[data-task-due="past-2d"]::after { content: "due 2 days ago" }
.contains-task-list .task-due[data-task-due="past-3d"]::after { content: "due 3 days ago" }
.contains-task-list .task-due[data-task-due="past-4d"]::after { content: "due 4 days ago" }
.contains-task-list .task-due[data-task-due="past-5d"]::after { content: "due 5 days ago" }
.contains-task-list .task-due[data-task-due="past-6d"]::after { content: "due 6 days ago" }
.contains-task-list .task-due[data-task-due="past-7d"]::after { content: "due 7 days ago" }
.contains-task-list .task-due[data-task-due="past-far"]::after { content: "way overdue" }


/* --------------- For task scheduled ------------------ */
.contains-task-list .task-scheduled {
    padding: .2em .45em;
    border-radius: 20px;
    font-size: .8em;
    margin-left: -10px;
}



.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-far"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-7d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-6d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-5d"]
{
    box-shadow: var(--pill-1-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-1-color-dark);
    background-color: var(--pill-1-bg-dark);
}

.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-4d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-3d"]
{
    box-shadow: var(--pill-1-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-1-color-dark);
    background-color: var(--pill-1-bg-dark);
}

.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-2d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="future-1d"]
{
    box-shadow: var(--pill-1-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-1-color-dark);
    background-color: var(--pill-1-bg-dark);
}

.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="today"]{
    box-shadow: var(--pill-1-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-1-color-dark);
    background-color: var(--pill-1-bg-dark);
}

.contains-task-list .task-scheduled[data-task-scheduled="past-1d"],
.contains-task-list .task-scheduled[data-task-scheduled="past-2d"],
.contains-task-list .task-scheduled[data-task-scheduled="past-3d"] {
    box-shadow: var(--pill-5-outline) 0px 0px 0px 1px inset;
    color: var(--pill-5-color);
    background-color: var(--pill-5-bg);
}

.contains-task-list .task-scheduled[data-task-scheduled="past-4d"],
.contains-task-list .task-scheduled[data-task-scheduled="past-5d"],
.contains-task-list .task-scheduled[data-task-scheduled="past-6d"],
.contains-task-list .task-scheduled[data-task-scheduled="past-7d"],
.contains-task-list .task-scheduled[data-task-scheduled="past-far"] {
    box-shadow: var(--pill-6-outline) 0px 0px 0px 1px inset;
    color: var(--pill-6-color);
    background-color: var(--pill-6-bg);
}

.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-1d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-2d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-3d"] {
    box-shadow: var(--pill-5-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-5-color-dark);
    background-color: var(--pill-5-bg-dark);
}

.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-4d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-5d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-6d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-7d"],
.theme-dark .contains-task-list .task-scheduled[data-task-scheduled="past-far"] {
    box-shadow: var(--pill-6-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-6-color-dark);
    background-color: var(--pill-6-bg-dark);
}

.contains-task-list .task-scheduled span {
    display:none;
}

.contains-task-list .task-list-item[data-task-done] .task-scheduled {
    display: none;
}

.contains-task-list .task-scheduled[data-task-scheduled="future-far"] span { display: inline; }
.contains-task-list .task-scheduled[data-task-scheduled="future-7d"]::after { content: "scheduled in a week" }
.contains-task-list .task-scheduled[data-task-scheduled="future-6d"]::after { content: "scheduled in 6 days" }
.contains-task-list .task-scheduled[data-task-scheduled="future-5d"]::after { content: "scheduled in 5 days" }
.contains-task-list .task-scheduled[data-task-scheduled="future-4d"]::after { content: "scheduled in 4 days" }
.contains-task-list .task-scheduled[data-task-scheduled="future-3d"]::after { content: "scheduled in 3 days" }
.contains-task-list .task-scheduled[data-task-scheduled="future-2d"]::after { content: "scheduled in 2 days" }
.contains-task-list .task-scheduled[data-task-scheduled="future-1d"]::after { content: "scheduled tomorrow" }
.contains-task-list .task-scheduled[data-task-scheduled="today"]::after { content: "scheduled today" }
.contains-task-list .task-scheduled[data-task-scheduled="past-1d"]::after { content: "scheduled yesterday" }
.contains-task-list .task-scheduled[data-task-scheduled="past-2d"]::after { content: "scheduled 2 days ago" }
.contains-task-list .task-scheduled[data-task-scheduled="past-3d"]::after { content: "scheduled 3 days ago" }
.contains-task-list .task-scheduled[data-task-scheduled="past-far"]::after { content: "scheduled a long time ago" }