diff --git a/html/pixels.tsx b/html/pixels.tsx
index f7d4b16..588c605 100644
--- a/html/pixels.tsx
+++ b/html/pixels.tsx
@@ -2,16 +2,18 @@ import { ComponentChildren, JSX } from "preact";
 import { Main, render_and_copy } from "./common.tsx";
 
 // don't want to do randomly on since it's not unique anyway
-const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
+const Pixel = () => (
     <details
         class="toggle"
         style="position: relative; margin: 0; cursor: pointer;"
     >
         <summary
-            style={`list-style: none; margin: 0; display: block; width: 100%; height: 100%; background-color: ${color_a};`}
+            style="list-style: none; margin: 0; display: block; width: 100%; height: 100%;"
+            class="off"
         ></summary>
         <div
-            style={`margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none; background-color: ${color_b};`}
+            style="margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;"
+            class="on"
         ></div>
     </details>
 );
@@ -24,13 +26,7 @@ const Pixels = ({
     n: number;
     color_a: string;
     color_b: string;
-}) => (
-    <>
-        {...new Array(n)
-            .fill(null)
-            .map(() => <Pixel color_a={color_a} color_b={color_b} />)}
-    </>
-);
+}) => <>{...new Array(n).fill(null).map(Pixel)}</>;
 
 render_and_copy(
     <Main>