diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.module.css b/web/ui/mantine-ui/src/pages/AlertsPage.module.css
new file mode 100644
index 0000000000..723f1418d8
--- /dev/null
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.module.css
@@ -0,0 +1,3 @@
+.item {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
index 9605a3986b..00e6595fd4 100644
--- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
@@ -37,6 +37,7 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { KVSearch } from "@nexucis/kvsearch";
 import { inputIconStyle } from "../styles";
 import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
+import classes from "./AlertsPage.module.css";
 
 type AlertsPageData = {
   // How many rules are in each state across all groups.
@@ -272,20 +273,11 @@ export default function AlertsPage() {
             <CustomInfiniteScroll
               allItems={g.rules}
               child={({ items }) => (
-                <Accordion multiple variant="separated">
+                <Accordion multiple variant="separated" classNames={classes}>
                   {items.map((r, j) => {
                     return (
                       <Accordion.Item
                         mt={rem(5)}
-                        styles={{
-                          item: {
-                            // TODO: This transparency hack is an OK workaround to make the collapsed items
-                            // have a different background color than their surrounding group card in dark mode,
-                            // but it would be better to use CSS to override the light/dark colors for
-                            // collapsed/expanded accordion items.
-                            backgroundColor: "#c0c0c015",
-                          },
-                        }}
                         key={j}
                         value={j.toString()}
                         className={
diff --git a/web/ui/mantine-ui/src/pages/RulesPage.module.css b/web/ui/mantine-ui/src/pages/RulesPage.module.css
new file mode 100644
index 0000000000..723f1418d8
--- /dev/null
+++ b/web/ui/mantine-ui/src/pages/RulesPage.module.css
@@ -0,0 +1,3 @@
+.item {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index 29c8b5a89e..5f0bc7e5a8 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -42,6 +42,7 @@ import {
 import { useSettings } from "../state/settingsSlice";
 import { useEffect, useMemo } from "react";
 import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
+import classes from "./RulesPage.module.css";
 import { useDebouncedValue, useLocalStorage } from "@mantine/hooks";
 import { KVSearch } from "@nexucis/kvsearch";
 import { StateMultiSelect } from "../components/StateMultiSelect";
@@ -230,19 +231,10 @@ export default function RulesPage() {
             <CustomInfiniteScroll
               allItems={g.rules}
               child={({ items }) => (
-                <Accordion multiple variant="separated">
+                <Accordion multiple variant="separated" classNames={classes}>
                   {items.map((r, j) => (
                     <Accordion.Item
                       mt={rem(5)}
-                      styles={{
-                        item: {
-                          // TODO: This transparency hack is an OK workaround to make the collapsed items
-                          // have a different background color than their surrounding group card in dark mode,
-                          // but it would be better to use CSS to override the light/dark colors for
-                          // collapsed/expanded accordion items.
-                          backgroundColor: "#c0c0c015",
-                        },
-                      }}
                       key={j}
                       value={j.toString()}
                       style={{