Use ColorManagement better when constructing Colors

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

playground/App.tsx

@@ -8,10 +8,12 @@ import "./index.css";
 extend(THREE);
 
 export const App: Component = () => {
-  // return "hallo";
+
+  const ambientColor = new THREE.Color() .setRGB( 0.4, 0.4, 0.4, THREE.LinearSRGBColorSpace );
+
   return (
     <Canvas camera={{ position: new Vector3(0, 0, 5) }}>
-      <T.AmbientLight color={[0.2, 0.2, 0.2]} />
+      <T.AmbientLight color={ambientColor} />
       <T.PointLight intensity={1.2} decay={1} position={[2, 2, 5]} rotation={[0, Math.PI / 3, 0]} />
       <Box />
     </Canvas>

playground/Box.tsx

@@ -1,5 +1,5 @@
 import { createSignal } from "solid-js";
-import { Mesh } from "three";
+import { Color, LinearSRGBColorSpace, Mesh } from "three";
 import { T, useFrame } from "../src";
 
 export function Box() {
@@ -8,6 +8,9 @@ export function Box() {
 
   useFrame(() => (mesh!.rotation.y += 0.01));
 
+  const green = new Color() .setStyle( "green", LinearSRGBColorSpace );
+  const red = new Color() .setStyle( "red", LinearSRGBColorSpace );
+
   return (
     <>
       <T.Mesh
@@ -16,7 +19,7 @@ export function Box() {
         onPointerLeave={e => setHovered(false)}
       >
         <T.BoxGeometry />
-        <T.MeshStandardMaterial color={hovered() ? "green" : "red"} />
+        <T.MeshStandardMaterial color={hovered() ? green : red } />
       </T.Mesh>
     </>
   );

src/canvas.tsx

@@ -77,7 +77,7 @@ export interface CanvasProps extends ComponentProps<"div"> {
  * @returns A div element containing the WebGL canvas configured to occupy the full available space.
  */
 export function Canvas(_props: CanvasProps) {
-  const [props, canvasProps] = splitProps(_props, ["fallback", "camera", "children", "ref"]);
+  const [props, canvasProps] = splitProps(_props, ["fallback", "camera", "children", "ref", "linear"]);
   let canvas: HTMLCanvasElement;
   let container: HTMLDivElement;
 

src/props.ts

@@ -10,13 +10,15 @@ import {
 import {
   BufferGeometry,
   Color,
+  LinearSRGBColorSpace,
   Fog,
   Layers,
   Material,
   Object3D,
   RGBAFormat,
   Texture,
   UnsignedByteType,
+  ColorManagement,
 } from "three";
 import { S3 } from "./";
 import { $S3C } from "./augment";
@@ -163,7 +165,7 @@ export const applyProp = <T>(source: S3.Instance<T>, type: string, value: any) =
   const canvasProps = useCanvasProps();
 
   try {
-    // Copy if properties match signatures
+    // Copy if properties match signatures.
     if (target?.copy && target?.constructor === value?.constructor) {
       target.copy(value);
     }
@@ -179,11 +181,12 @@ export const applyProp = <T>(source: S3.Instance<T>, type: string, value: any) =
     // Set literal types, ignore undefined
     // https://github.com/pmndrs/react-three-fiber/issues/274
     else if (target?.set && typeof value !== "object") {
-      const isColor = target instanceof Color;
       // Allow setting array scalars
-      if (!isColor && target.setScalar && typeof value === "number") target.setScalar(value);
+      if ( target.setScalar && typeof value === "number" ) target.setScalar(value);
       // Otherwise just set ...
-      else if (value !== undefined) target.set(value);
+      else if (value !== undefined) {
+        target.set(value);
+      }
     }
     // Else, just overwrite the value
     else {