diff --git a/web/components/la-editor/styles/partials/lists.css b/web/components/la-editor/styles/partials/lists.css
index 5daa99bf..dfc6f19e 100644
--- a/web/components/la-editor/styles/partials/lists.css
+++ b/web/components/la-editor/styles/partials/lists.css
@@ -68,8 +68,8 @@
 }
 
 .la-editor .ProseMirror .taskItem-checkbox:checked {
-	@apply border-primary bg-primary bg-no-repeat;
-	background-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E");
+	@apply border-primary bg-primary border bg-no-repeat;
+	background-image: var(--checkbox-bg-image);
 }
 
 .la-editor .ProseMirror .taskItem-content {
diff --git a/web/components/la-editor/styles/partials/vars.css b/web/components/la-editor/styles/partials/vars.css
index 02aeb608..9c11c9cc 100644
--- a/web/components/la-editor/styles/partials/vars.css
+++ b/web/components/la-editor/styles/partials/vars.css
@@ -1,5 +1,6 @@
 :root {
 	--la-font-size-regular: 0.9375rem;
+	--checkbox-bg-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E");
 
 	--la-code-background: rgba(8, 43, 120, 0.047);
 	--la-code-color: rgb(212, 212, 212);
@@ -22,6 +23,9 @@
 }
 
 .dark .ProseMirror {
+	--la-font-size-regular: 0.9375rem;
+	--checkbox-bg-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22lch%284.8%25%200.7%20272%29%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E");
+
 	--la-code-background: rgba(255, 255, 255, 0.075);
 	--la-code-color: rgb(44, 46, 51);
 	--la-secondary: rgb(89, 90, 92);