diff --git a/packages/fiber/src/core/utils.ts b/packages/fiber/src/core/utils.ts
index d0e2eebf86..1bc45b1f06 100644
--- a/packages/fiber/src/core/utils.ts
+++ b/packages/fiber/src/core/utils.ts
@@ -10,7 +10,7 @@ import { Dpr, Renderer, RootState, Size } from './store'
*/
export const hasColorSpace = <
T extends Renderer | THREE.Texture | object,
- P = T extends Renderer ? { outputColorSpace: string } : { colorSpace: string },
+ P = T extends Renderer ? { outputColorSpace: string | null } : { colorSpace: string | null },
>(
object: T,
): object is T & P => 'colorSpace' in object || 'outputColorSpace' in object
diff --git a/packages/fiber/tests/core/renderer.test.tsx b/packages/fiber/tests/core/renderer.test.tsx
index a13e049b8a..bbd33435f5 100644
--- a/packages/fiber/tests/core/renderer.test.tsx
+++ b/packages/fiber/tests/core/renderer.test.tsx
@@ -740,7 +740,7 @@ describe('renderer', () => {
})
it('should respect color management preferences via gl', async () => {
- const texture = new THREE.Texture() as THREE.Texture & { colorSpace?: string }
+ const texture = new THREE.Texture() as THREE.Texture & { colorSpace?: string | null }
let key = 0
function Test() {
return
@@ -749,7 +749,7 @@ describe('renderer', () => {
const LinearEncoding = 3000
const sRGBEncoding = 3001
- let gl: THREE.WebGLRenderer & { outputColorSpace?: string } = null!
+ let gl: THREE.WebGLRenderer & { outputColorSpace?: string | null } = null!
await act(async () => (gl = root.render().getState().gl))
expect(gl.outputEncoding).toBe(sRGBEncoding)
expect(gl.toneMapping).toBe(THREE.ACESFilmicToneMapping)
@@ -764,8 +764,8 @@ describe('renderer', () => {
const SRGBColorSpace = 'srgb'
const LinearSRGBColorSpace = 'srgb-linear'
- gl.outputColorSpace ??= ''
- texture.colorSpace ??= ''
+ gl.outputColorSpace ??= null
+ texture.colorSpace ??= null
await act(async () => root.configure({ linear: true }).render())
expect(gl.outputColorSpace).toBe(LinearSRGBColorSpace)