fix: Light icons are not responsive to dark theme

app/components/Icon.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
 import { randomElement } from "@shared/random";
@@ -9,12 +10,22 @@ import EmojiIcon from "~/components/Icons/EmojiIcon";
 import useStores from "~/hooks/useStores";
 import Logger from "~/utils/Logger";
 
-type IconProps = {
+export type Props = {
+  /** The icon to render */
   value: string;
+  /** The color of the icon */
   color?: string;
+  /** The size of the icon */
   size?: number;
+  /** The initial to display if the icon is a letter icon */
   initial?: string;
+  /** Optional additional class name */
   className?: string;
+  /**
+   * Ensure the color does not change in response to theme and contrast. Should only be
+   * used in color picker UI.
+   */
+  forceColor?: boolean;
 };
 
 const Icon = ({
@@ -22,8 +33,9 @@ const Icon = ({
   color,
   size = 24,
   initial,
+  forceColor,
   className,
-}: IconProps) => {
+}: Props) => {
   const iconType = determineIconType(icon);
 
   if (!iconType) {
@@ -34,14 +46,15 @@ const Icon = ({
   }
 
   try {
-    if (iconType === IconType.Outline) {
+    if (iconType === IconType.SVG) {
       return (
-        <OutlineIcon
+        <SVGIcon
           value={icon}
           color={color}
           size={size}
           initial={initial}
           className={className}
+          forceColor={forceColor}
         />
       );
     }
@@ -56,38 +69,39 @@ const Icon = ({
   return null;
 };
 
-type OutlineIconProps = {
-  value: string;
-  color?: string;
-  size?: number;
-  initial?: string;
-  className?: string;
-};
+const SVGIcon = observer(
+  ({
+    value: icon,
+    color: inputColor,
+    initial,
+    size,
+    className,
+    forceColor,
+  }: Props) => {
+    const { ui } = useStores();
 
-const OutlineIcon = ({
-  value: icon,
-  color: inputColor,
-  initial,
-  size,
-  className,
-}: OutlineIconProps) => {
-  const { ui } = useStores();
+    let color = inputColor ?? randomElement(colorPalette);
 
-  let color = inputColor ?? randomElement(colorPalette);
+    // If the chosen icon color is very dark then we invert it in dark mode
+    if (!forceColor) {
+      if (ui.resolvedTheme === "dark" && color !== "currentColor") {
+        color = getLuminance(color) > 0.09 ? color : "currentColor";
+      }
 
-  // If the chosen icon color is very dark then we invert it in dark mode
-  // otherwise it will be impossible to see against the dark background.
-  if (!inputColor && ui.resolvedTheme === "dark" && color !== "currentColor") {
-    color = getLuminance(color) > 0.09 ? color : "currentColor";
+      // If the chosen icon color is very light then we invert it in light mode
+      if (ui.resolvedTheme === "light" && color !== "currentColor") {
+        color = getLuminance(color) < 0.9 ? color : "currentColor";
+      }
+    }
+
+    const Component = IconLibrary.getComponent(icon);
+
+    return (
+      <Component color={color} size={size} className={className}>
+        {initial}
+      </Component>
+    );
   }
-
-  const Component = IconLibrary.getComponent(icon);
-
-  return (
-    <Component color={color} size={size} className={className}>
-      {initial}
-    </Component>
-  );
-};
+);
 
 export default Icon;