diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
index 02ef976b177a..0006ec6f945d 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
@@ -514,8 +514,6 @@ function ThemeButton(props: { theme: ThemeWithName }): JSXElement {
 }
 
 function Picker(props: { color: ColorName }): JSXElement {
-  let colorInputRef: HTMLInputElement | undefined = undefined;
-
   const text = () => {
     if (props.color === "bg") return "background";
     if (props.color === "main") return "main";
@@ -583,13 +581,12 @@ function Picker(props: { color: ColorName }): JSXElement {
           updateThemeColor(props.color, value);
         }}
       />
-      <div class="grid">
+      <div class="relative">
         <input
-          ref={(el) => (colorInputRef = el)}
           type="color"
           value={getTheme()[props.color]}
           onInput={debouncedInput}
-          class="pointer-events-none col-[1/1] row-[1/1] m-0 h-full w-0 p-0 opacity-0"
+          class="peer pointer-events-auto absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
           // onChange={(e) => {
           //   const current = [...getConfig.customThemeColors];
           //   current[colorIndex()] = e.currentTarget.value;
@@ -601,9 +598,8 @@ function Picker(props: { color: ColorName }): JSXElement {
         />
         <Button
           class={cn(
-            `col-[1/1] row-[1/1]`,
             `bg-(--picker-${props.color}) text-(--picker-bg)`,
-            `hover:bg-(--picker-text)`,
+            `peer-hover:bg-(--picker-text)`,
             props.color === "bg" && "bg-(--picker-subAlt) text-(--picker-text)",
             props.color === "subAlt" && "text-(--picker-text)",
           )}
@@ -611,7 +607,6 @@ function Picker(props: { color: ColorName }): JSXElement {
             icon: "fa-palette",
             fixedWidth: true,
           }}
-          onClick={() => colorInputRef?.click()}
         />
       </div>
     </div>