diff --git a/.changeset/techdocs-sharp-knives-unite.md b/.changeset/techdocs-sharp-knives-unite.md
new file mode 100644
index 0000000000..aa3625b883
--- /dev/null
+++ b/.changeset/techdocs-sharp-knives-unite.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Use a better checkbox rendering in a task list.
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 4e12ac18d1..c0b0c99b59 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -214,6 +214,16 @@ export const useTechDocsReaderDom = (): Element | null => {
.md-typeset .admonition, .md-typeset details {
font-size: 1rem;
}
+
+ /* style the checkmarks of the task list */
+ .md-typeset .task-list-control .task-list-indicator::before {
+ background-color: ${theme.palette.action.disabledBackground};
+ }
+ .md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator:before {
+ background-color: ${theme.palette.success.main};
+ }
+ /**/
+
@media screen and (max-width: 76.1875em) {
.md-nav {
background-color: ${theme.palette.background.default};
@@ -293,8 +303,8 @@ export const useTechDocsReaderDom = (): Element | null => {
--md-details-icon: url('data:image/svg+xml;charset=utf-8,');
}
:host {
- --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,');
- --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,');
+ --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,');
}
`,
}),
@@ -305,9 +315,11 @@ export const useTechDocsReaderDom = (): Element | null => {
namespace,
scmIntegrationsApi,
techdocsStorageApi,
+ theme.palette.action.disabledBackground,
theme.palette.background.default,
theme.palette.background.paper,
theme.palette.primary.main,
+ theme.palette.success.main,
theme.palette.text.primary,
theme.typography.fontFamily,
],