Three js - shaders on scroll

Question

I'm trying to integrate the 3d object found on this codrops demo: https://tympanus.net/Tutorials/ShadersOnScroll/. I'm trying to get the same effect but I would like the object to stay the same color even on a white background, this is my demo on codepen, the problem is that by applying the white background on the second section the object is no longer visible but not I can understand what it is due to, also I would like to be able to change its color to a green one as well. From code I see that this is where the material is applied to the object:

this.geometry = new THREE.IcosahedronGeometry(1, 64)

this.material = new THREE.ShaderMaterial({
  wireframe: true,
  blending: THREE.AdditiveBlending,
  transparent: false,
  vertexShader,
  fragmentShader,
  uniforms: {
    uFrequency: { value: this.settings.uFrequency.start },
    uAmplitude: { value: this.settings.uAmplitude.start },
    uDensity: { value: this.settings.uDensity.start },
    uStrength: { value: this.settings.uStrength.start },
    uDeepPurple: { value: this.settings.uDeepPurple.start },
    uOpacity: { value: this.settings.uOpacity.start }
  }
})

this.mesh = new THREE.Mesh(this.geometry, this.material)

but I don't understand how the color is set. Could anyone help me?

This is my demo on codepen with the white second section: https://codepen.io/tero-moi/pen/XWyQNWR