state+components: reimplement 'isDark' as a selector

We now have a consolidated source of truth for whether the UI should us
dark mode to accomodate a light icon color. This is a recoil selector
that derives from iconColorAtom.

In addition, we renamed styleQueryAtom -> iconStyleAtom for consistency.

src/components/ColorInput/ColorInput.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { useRecoilState } from "recoil";
-import TinyColor from "tinycolor2";
+import { useRecoilState, useRecoilValue } from "recoil";
 
 import { iconColorAtom } from "../../state/atoms";
+import { isDarkThemeSelector } from "../../state/selectors";
 import useThrottled from "../../hooks/useThrottled";
 import "./ColorInput.css";
 
@@ -10,17 +10,19 @@ type ColorInputProps = {};
 
 const ColorInput: React.FC<ColorInputProps> = () => {
   const [color, setColor] = useRecoilState(iconColorAtom);
-  const isDark = TinyColor(color).isDark();
-  
+  const isDark = useRecoilValue(isDarkThemeSelector);
+
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const {
       target: { value: color },
     } = event;
     if (color[0] === "#") setColor(color);
   };
-  
-  const throttledColorChange = useThrottled(handleColorChange, 100, [handleColorChange])
-  
+
+  const throttledColorChange = useThrottled(handleColorChange, 100, [
+    handleColorChange,
+  ]);
+
   return (
     <div className="color-picker">
       <input
@@ -31,7 +33,7 @@ const ColorInput: React.FC<ColorInputProps> = () => {
         onChange={throttledColorChange}
         value={color}
       />
-      <span style={{ color: isDark ? "white" : "black" }}>{color}</span>
+      <span style={{ color: isDark ? "black" : "white" }}>{color}</span>
     </div>
   );
 };