Makes the palette ignore dark reader converting

    transition: scale 0.25s;

    cursor: pointer;

    .pallete-color-surface {

      position: absolute;

      z-index: 0;

      inset: 0;

      width: 100%;

      height: 100%;

      border-radius: 2px;

      pointer-events: none;

    }

    &:hover {

      scale: 1.075;

    }

  type PointerEvent,

  useEffect,

  useMemo,

  useRef,

  useState,

} from "react";

import { createPortal } from "react-dom";

  TEMPLATE_STYLE_ROWS,

} from "../../lib/template";

const PaletteColorSurface = ({ hex }: { hex: string }) => {

  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {

    const context = canvasRef.current?.getContext("2d");

    if (!context) return;

    context.fillStyle = `#${hex}`;

    context.fillRect(0, 0, 1, 1);

  }, [hex]);

  return (

    <canvas

      ref={canvasRef}

      aria-hidden="true"

      className="pallete-color-surface"

      data-darkreader-ignore

      height={1}

      width={1}

    />

  );

};

const getPaletteSymbolBackgroundPosition = (index: number) => {

  const column = index % TEMPLATE_STYLE_COLUMNS;

  const row = Math.floor(index / TEMPLATE_STYLE_COLUMNS) % TEMPLATE_STYLE_ROWS;

                ]

                  .filter((a) => a)

                  .join(" ")}

                style={{

                  backgroundColor: "#" + color.hex,

                }}

                onClick={() => {

                  handleSelectPrimaryColor(color.id);

                }}

                  handleSelectSecondaryColor(color.id);

                }}

              >

                <PaletteColorSurface hex={color.hex} />

                {settings.get["palette.colors"] && (

                  <span aria-hidden="true" className="pallete-color-number">

                    {index}