feat(app): add currentcolor picker option

src/components/ColorInput/ColorInput.css

@@ -6,16 +6,16 @@
   flex: 1;
   border: none;
   outline: none;
+  appearance: none;
   -webkit-appearance: none;
 }
 
 .color-picker span {
+  display: grid;
+  place-items: center;
   position: absolute;
   margin: 0;
-  top: 50%;
-  left: 50%;
-  -ms-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  inset: 0;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
@@ -46,4 +46,4 @@ input.color-input::-webkit-color-swatch {
 input.color-input:focus {
   outline: none;
   border: 2px solid white;
-}
+}

src/components/ColorInput/ColorInput.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
+import { EyedropperSample } from "@phosphor-icons/react";
 
 import { useThrottled } from "@/hooks";
 import { iconColorAtom, isDarkThemeSelector } from "@/state";
@@ -22,12 +23,21 @@ const ColorInput = (_: ColorInputProps) => {
     [setColor]
   );
 
+  const handleSetInheritedColor = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setColor("currentColor");
+  };
+
   const throttledColorChange = useThrottled(handleColorChange, 100, [
     handleColorChange,
   ]);
 
   return (
-    <div className="color-picker">
+    <div
+      className="color-picker"
+      title="Select a color, or right-click to use inherited color"
+      onContextMenu={handleSetInheritedColor}
+    >
       <input
         className="color-input"
         aria-label="Icon Color"
@@ -36,7 +46,13 @@ const ColorInput = (_: ColorInputProps) => {
         onChange={throttledColorChange}
         value={color}
       />
-      <span style={{ color: isDark ? "black" : "white" }}>{color}</span>
+      <span style={{ color: isDark ? "black" : "white" }}>
+        {color === "currentColor" ? (
+          <EyedropperSample size={28} weight="fill" />
+        ) : (
+          color
+        )}
+      </span>
     </div>
   );
 };