Improve discernability of task list checkmarks

squidfunk · squidfunk · commit dbaa60fea6cf · 2025-11-12T13:48:11.000+01:00
Signed-off-by: squidfunk &lt;martin.donath@squidfunk.com&gt;
diff --git a/dist/assets/stylesheets/modern/main.21338c02.min.css b/dist/assets/stylesheets/modern/main.21338c02.min.css
diff --git a/dist/base.html b/dist/base.html
@@ -47,7 +47,7 @@
     {% endblock %}
     {% block styles %}
       {% if config.theme.variant == "modern" %}
-        {% set href = 'assets/stylesheets/modern/main.71200a3a.min.css' | url %}
+        {% set href = 'assets/stylesheets/modern/main.21338c02.min.css' | url %}
       {% else %}
         {% set href = 'assets/stylesheets/classic/main.6eec86b3.min.css' | url %}
       {% endif %}
diff --git a/src/assets/stylesheets/modern/main/extensions/pymdownx/_tasklist.scss b/src/assets/stylesheets/modern/main/extensions/pymdownx/_tasklist.scss
@@ -29,7 +29,8 @@
 
 // Tasklist variables
 :root {
-  --md-tasklist-icon: svg-load("lucide/circle-check.svg");
+  --md-tasklist-icon: svg-load("lucide/circle.svg");
+  --md-tasklist-icon--checked: svg-load("lucide/circle-check-big.svg");
 }
 
 // ----------------------------------------------------------------------------
@@ -75,5 +76,6 @@
   // Tasklist indicator in checked state
   [type="checkbox"]:checked + .task-list-indicator::before {
     background-color: $clr-green-a400;
+    mask-image: var(--md-tasklist-icon--checked);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,8 @@`
`29`	`29`
`30`	`30`	`// Tasklist variables`
`31`	`31`	`:root {`
`32`		`- --md-tasklist-icon: svg-load("lucide/circle-check.svg");`
	`32`	`+ --md-tasklist-icon: svg-load("lucide/circle.svg");`
	`33`	`+ --md-tasklist-icon--checked: svg-load("lucide/circle-check-big.svg");`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`// ----------------------------------------------------------------------------`
`@@ -75,5 +76,6 @@`
`75`	`76`	`// Tasklist indicator in checked state`
`76`	`77`	`[type="checkbox"]:checked + .task-list-indicator::before {`
`77`	`78`	`background-color: $clr-green-a400;`
	`79`	`+ mask-image: var(--md-tasklist-icon--checked);`
`78`	`80`	`}`
`79`	`81`	`}`