diff --git a/.changeset/cute-mammals-hear.md b/.changeset/cute-mammals-hear.md
new file mode 100644
index 0000000000..2229c909dd
--- /dev/null
+++ b/.changeset/cute-mammals-hear.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fix Checkbox styles on dark theme in Canon.
diff --git a/packages/canon/css/checkbox.css b/packages/canon/css/checkbox.css
index a63bdcd745..f8a2cc32d5 100644
--- a/packages/canon/css/checkbox.css
+++ b/packages/canon/css/checkbox.css
@@ -3,23 +3,27 @@
   height: 1rem;
   box-shadow: inset 0 0 0 1px var(--canon-border);
   cursor: pointer;
+  background-color: var(--canon-bg-surface-1);
   border: none;
   border-radius: 2px;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: all .2s ease-in-out;
+  padding: 0;
+  transition: background-color .2s ease-in-out;
   display: flex;
+}
 
-  &:focus-visible {
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-    transition: none;
-  }
+.canon-CheckboxRoot:focus-visible {
+  outline: 2px solid var(--canon-ring);
+  outline-offset: 2px;
+  transition: none;
+}
 
-  &[data-checked] {
-    background-color: var(--canon-bg-solid);
-    color: var(--canon-fg-solid);
-  }
+.canon-CheckboxRoot[data-checked] {
+  background-color: var(--canon-bg-solid);
+  box-shadow: none;
+  color: var(--canon-fg-solid);
 }
 
 .canon-CheckboxLabel {
@@ -34,14 +38,14 @@
   display: flex;
 
   &:hover {
-    & .canon-CheckboxRoot {
+    & .canon-CheckboxRoot:not([data-checked]) {
       box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
 }
 
 .canon-CheckboxIndicator {
-  color: var(--canon-fg-accent);
+  color: var(--canon-fg-solid);
   justify-content: center;
   align-items: center;
   display: flex;
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 3a8787ddca..1c8a379f17 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -131,23 +131,27 @@
   height: 1rem;
   box-shadow: inset 0 0 0 1px var(--canon-border);
   cursor: pointer;
+  background-color: var(--canon-bg-surface-1);
   border: none;
   border-radius: 2px;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: all .2s ease-in-out;
+  padding: 0;
+  transition: background-color .2s ease-in-out;
   display: flex;
+}
 
-  &:focus-visible {
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-    transition: none;
-  }
+.canon-CheckboxRoot:focus-visible {
+  outline: 2px solid var(--canon-ring);
+  outline-offset: 2px;
+  transition: none;
+}
 
-  &[data-checked] {
-    background-color: var(--canon-bg-solid);
-    color: var(--canon-fg-solid);
-  }
+.canon-CheckboxRoot[data-checked] {
+  background-color: var(--canon-bg-solid);
+  box-shadow: none;
+  color: var(--canon-fg-solid);
 }
 
 .canon-CheckboxLabel {
@@ -162,14 +166,14 @@
   display: flex;
 
   &:hover {
-    & .canon-CheckboxRoot {
+    & .canon-CheckboxRoot:not([data-checked]) {
       box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
 }
 
 .canon-CheckboxIndicator {
-  color: var(--canon-fg-accent);
+  color: var(--canon-fg-solid);
   justify-content: center;
   align-items: center;
   display: flex;
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 1c431ad54c..8ac4f91125 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9355,23 +9355,27 @@
   height: 1rem;
   box-shadow: inset 0 0 0 1px var(--canon-border);
   cursor: pointer;
+  background-color: var(--canon-bg-surface-1);
   border: none;
   border-radius: 2px;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: all .2s ease-in-out;
+  padding: 0;
+  transition: background-color .2s ease-in-out;
   display: flex;
+}
 
-  &:focus-visible {
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-    transition: none;
-  }
+.canon-CheckboxRoot:focus-visible {
+  outline: 2px solid var(--canon-ring);
+  outline-offset: 2px;
+  transition: none;
+}
 
-  &[data-checked] {
-    background-color: var(--canon-bg-solid);
-    color: var(--canon-fg-solid);
-  }
+.canon-CheckboxRoot[data-checked] {
+  background-color: var(--canon-bg-solid);
+  box-shadow: none;
+  color: var(--canon-fg-solid);
 }
 
 .canon-CheckboxLabel {
@@ -9386,14 +9390,14 @@
   display: flex;
 
   &:hover {
-    & .canon-CheckboxRoot {
+    & .canon-CheckboxRoot:not([data-checked]) {
       box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
 }
 
 .canon-CheckboxIndicator {
-  color: var(--canon-fg-accent);
+  color: var(--canon-fg-solid);
   justify-content: center;
   align-items: center;
   display: flex;
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index 467e9c57b7..8468980bf2 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -8,18 +8,22 @@
   box-shadow: inset 0 0 0 1px var(--canon-border);
   cursor: pointer;
   border-radius: 2px;
-  transition: all 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
+  background-color: var(--canon-bg-surface-1);
+  padding: 0;
+  flex-shrink: 0;
+}
 
-  &:focus-visible {
-    transition: none;
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-  }
+.canon-CheckboxRoot:focus-visible {
+  transition: none;
+  outline: 2px solid var(--canon-ring);
+  outline-offset: 2px;
+}
 
-  &[data-checked] {
-    background-color: var(--canon-bg-solid);
-    color: var(--canon-fg-solid);
-  }
+.canon-CheckboxRoot[data-checked] {
+  background-color: var(--canon-bg-solid);
+  box-shadow: none;
+  color: var(--canon-fg-solid);
 }
 
 .canon-CheckboxLabel {
@@ -34,7 +38,7 @@
   user-select: none;
 
   &:hover {
-    & .canon-CheckboxRoot {
+    & .canon-CheckboxRoot:not([data-checked]) {
       box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
@@ -44,5 +48,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--canon-fg-accent);
+  color: var(--canon-fg-solid);
 }