Make type colors themeable

src/renderer/colors.scss

@@ -70,6 +70,15 @@
     --header-bg: var(--bg-800);
     --chain-editor-bg: var(--bg-800);
     --node-selector-bg: var(--bg-800);
+
+    /* type colors */
+    --type-color-directory: #805ad5;
+    --type-color-image: #d69e2e;
+    --type-color-number: #3182ce;
+    --type-color-string: #10b52c;
+    --type-color-torch: #dd6b20;
+    --type-color-onnx: #63b3ed;
+    --type-color-ncnn: #ed64a6;
 }
 
 :root[data-theme='light'] {
@@ -124,6 +133,15 @@
     --header-bg: var(--bg-800);
     --chain-editor-bg: var(--bg-800);
     --node-selector-bg: var(--bg-800);
+
+    /* type colors */
+    --type-color-directory: #805ad5;
+    --type-color-image: #d69e2e;
+    --type-color-number: #3182ce;
+    --type-color-string: #10b52c;
+    --type-color-torch: #dd6b20;
+    --type-color-onnx: #63b3ed;
+    --type-color-ncnn: #ed64a6;
 }
 
 // Default theme (copied from Chakra UI)
@@ -316,4 +334,13 @@
             900: #151515,
         )
     );
+
+    /* type colors */
+    --type-color-directory: #db7f85;
+    --type-color-image: #67b6f4;
+    --type-color-number: #f9d600;
+    --type-color-string: #72e4b9;
+    --type-color-torch: #fbae2e;
+    --type-color-onnx: #ac9fdc;
+    --type-color-ncnn: #ae5354;
 }

src/renderer/components/CustomEdge/CustomEdge.tsx

@@ -82,7 +82,7 @@ export const CustomEdge = memo(
             (c) => c.effectivelyDisabledNodes
         );
         const { paused, getNodeStatus } = useContext(ExecutionContext);
-        const { animateChain } = useSettings();
+        const { animateChain, theme } = useSettings();
 
         const sourceStatus = getNodeStatus(source);
         const targetStatus = getNodeStatus(target);
@@ -179,7 +179,11 @@ export const CustomEdge = memo(
             c.typeState.functions.get(source)?.outputs.get(outputId)
         );
 
-        const [accentColor] = getTypeAccentColors(type || definitionType);
+        const [accentColor] = useMemo(
+            () => getTypeAccentColors(type || definitionType),
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            [type, definitionType, theme]
+        );
         const currentColor = selected ? shadeColor(accentColor, -40) : accentColor;
 
         const buttonSize = 32;

src/renderer/components/NodeDocumentation/NodeDocs.tsx

@@ -14,7 +14,7 @@ import {
     VStack,
     useMediaQuery,
 } from '@chakra-ui/react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useContext } from 'use-context-selector';
 import { Condition, Input, NodeSchema, Output, TextInput } from '../../../common/common-types';
 import { isTautology } from '../../../common/nodes/condition';
@@ -25,6 +25,7 @@ import { prettyPrintType } from '../../../common/types/pretty';
 import { withoutError, withoutNull } from '../../../common/types/util';
 import { capitalize, isAutoInput } from '../../../common/util';
 import { BackendContext } from '../../contexts/BackendContext';
+import { useSettings } from '../../contexts/SettingsContext';
 import { getCategoryAccentColor, getTypeAccentColors } from '../../helpers/accentColors';
 import { IconFactory } from '../CustomIcons';
 import { Markdown } from '../Markdown';
@@ -101,6 +102,8 @@ interface OutputItemProps extends InputOutputItemProps {
 
 const InputOutputItem = memo(
     ({ type, kind, item, condition, schema }: InputItemProps | OutputItemProps) => {
+        const { theme } = useSettings();
+
         const isOptional = 'optional' in item && item.optional;
         if (isOptional) {
             // eslint-disable-next-line no-param-reassign
@@ -112,7 +115,8 @@ const InputOutputItem = memo(
                 ? schema.iteratorInputs.some((i) => i.inputs.includes(item.id))
                 : schema.iteratorOutputs.some((i) => i.outputs.includes(item.id));
 
-        const handleColors = getTypeAccentColors(type);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const handleColors = useMemo(() => getTypeAccentColors(type), [type, theme]);
 
         const isFileInput = item.kind === 'file';
         const supportedFileTypes = isFileInput ? item.filetypes : [];

src/renderer/components/inputs/InputContainer.tsx

@@ -9,6 +9,7 @@ import { assertNever, stringifyTargetHandle } from '../../../common/util';
 import { VALID, invalid } from '../../../common/Validity';
 import { GlobalVolatileContext } from '../../contexts/GlobalNodeState';
 import { InputContext } from '../../contexts/InputContext';
+import { useSettings } from '../../contexts/SettingsContext';
 import { getTypeAccentColors } from '../../helpers/accentColors';
 import { useSourceTypeColor } from '../../hooks/useSourceTypeColor';
 import { Handle } from '../Handle';
@@ -33,6 +34,7 @@ export const InputHandle = memo(
         isConnected,
     }: React.PropsWithChildren<InputHandleProps>) => {
         const { isValidConnection, useConnectingFrom } = useContext(GlobalVolatileContext);
+        const { theme } = useSettings();
         const [connectingFrom] = useConnectingFrom;
 
         const targetHandle = stringifyTargetHandle({ nodeId: id, inputId });
@@ -64,7 +66,11 @@ export const InputHandle = memo(
             });
         }, [connectingFrom, id, targetHandle, isValidConnection]);
 
-        const handleColors = getTypeAccentColors(connectableType);
+        const handleColors = useMemo(
+            () => getTypeAccentColors(connectableType),
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            [connectableType, theme]
+        );
 
         const sourceTypeColor = useSourceTypeColor(targetHandle);
 

src/renderer/components/inputs/elements/StyledSlider.tsx

@@ -10,6 +10,7 @@ import {
     useColorModeValue,
 } from '@chakra-ui/react';
 import { MouseEventHandler, memo, useMemo, useState } from 'react';
+import { useSettings } from '../../../contexts/SettingsContext';
 import { getTypeAccentColors } from '../../../helpers/accentColors';
 
 export interface Scale {
@@ -142,8 +143,10 @@ export const StyledSlider = memo(
         onContextMenu,
     }: StyledSliderProps) => {
         const [showTooltip, setShowTooltip] = useState(false);
+        const { theme } = useSettings();
 
-        const [typeAccentColor] = useMemo(() => getTypeAccentColors(NumberType.instance), []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const [typeAccentColor] = useMemo(() => getTypeAccentColors(NumberType.instance), [theme]);
 
         let customBackground;
         if (style.type === 'gradient') {

src/renderer/components/node/BreakPoint.tsx

@@ -7,6 +7,7 @@ import { useContext, useContextSelector } from 'use-context-selector';
 import { EdgeData, NodeData, OutputId } from '../../../common/common-types';
 import { BackendContext } from '../../contexts/BackendContext';
 import { GlobalContext, GlobalVolatileContext } from '../../contexts/GlobalNodeState';
+import { useSettings } from '../../contexts/SettingsContext';
 import { getTypeAccentColors } from '../../helpers/accentColors';
 import { UseContextMenu, useContextMenu } from '../../hooks/useContextMenu';
 
@@ -51,6 +52,7 @@ const BreakPointInner = memo(({ id }: NodeProps) => {
     const { edgeChanges } = useContext(GlobalVolatileContext);
     const { removeNodesById, removeEdgeBreakpoint } = useContext(GlobalContext);
     const { functionDefinitions } = useContext(BackendContext);
+    const { theme } = useSettings();
 
     const menu = useBreakPointMenu(id);
 
@@ -98,7 +100,8 @@ const BreakPointInner = memo(({ id }: NodeProps) => {
 
     const [accentColor] = useMemo(
         () => getTypeAccentColors(type || definitionType),
-        [type, definitionType]
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [type, definitionType, theme]
     );
 
     return (

src/renderer/components/outputs/OutputContainer.tsx

@@ -7,6 +7,7 @@ import { Output, OutputId } from '../../../common/common-types';
 import { stringifySourceHandle } from '../../../common/util';
 import { VALID, invalid } from '../../../common/Validity';
 import { GlobalVolatileContext } from '../../contexts/GlobalNodeState';
+import { useSettings } from '../../contexts/SettingsContext';
 import { getTypeAccentColors } from '../../helpers/accentColors';
 import { Handle } from '../Handle';
 import { TypeTags } from '../TypeTag';
@@ -22,6 +23,7 @@ export interface OutputHandleProps {
 
 export const OutputHandle = memo(
     ({ id, outputId, isIterated, definitionType, type, isConnected }: OutputHandleProps) => {
+        const { theme } = useSettings();
         const { isValidConnection, useConnectingFrom } = useContext(GlobalVolatileContext);
         const [connectingFrom] = useConnectingFrom;
 
@@ -53,7 +55,11 @@ export const OutputHandle = memo(
             });
         }, [connectingFrom, id, sourceHandle, isValidConnection]);
 
-        const handleColors = getTypeAccentColors(type || definitionType);
+        const handleColors = useMemo(
+            () => getTypeAccentColors(type || definitionType),
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            [type, definitionType, theme]
+        );
 
         return (
             <Center

src/renderer/helpers/accentColors.ts

@@ -9,22 +9,39 @@ import {
 import { CategoryMap } from '../../common/CategoryMap';
 import { CategoryId } from '../../common/common-types';
 import { getChainnerScope } from '../../common/types/chainner-scope';
-import { lazy } from '../../common/util';
 
 export const defaultColor = '#718096';
 
-const colorList = lazy(() => {
+const getComputedColor = (color: string) =>
+    getComputedStyle(document.documentElement).getPropertyValue(color);
+
+const colorList = () => {
     const scope = getChainnerScope();
     return [
-        { type: evaluate(new NamedExpression('Directory'), scope), color: '#805AD5' },
-        { type: evaluate(new NamedExpression('Image'), scope), color: '#D69E2E' },
-        { type: NumberType.instance, color: '#3182CE' },
-        { type: StringType.instance, color: '#10b52c' },
-        { type: evaluate(new NamedExpression('PyTorchModel'), scope), color: '#DD6B20' },
-        { type: evaluate(new NamedExpression('OnnxModel'), scope), color: '#63B3ED' },
-        { type: evaluate(new NamedExpression('NcnnNetwork'), scope), color: '#ED64A6' },
+        {
+            type: evaluate(new NamedExpression('Directory'), scope),
+            color: getComputedColor('--type-color-directory'),
+        },
+        {
+            type: evaluate(new NamedExpression('Image'), scope),
+            color: getComputedColor('--type-color-image'),
+        },
+        { type: NumberType.instance, color: getComputedColor('--type-color-number') },
+        { type: StringType.instance, color: getComputedColor('--type-color-string') },
+        {
+            type: evaluate(new NamedExpression('PyTorchModel'), scope),
+            color: getComputedColor('--type-color-torch'),
+        },
+        {
+            type: evaluate(new NamedExpression('OnnxModel'), scope),
+            color: getComputedColor('--type-color-onnx'),
+        },
+        {
+            type: evaluate(new NamedExpression('NcnnNetwork'), scope),
+            color: getComputedColor('--type-color-ncnn'),
+        },
     ];
-});
+};
 
 const defaultColorList = [defaultColor] as const;