Add ProfileColorProperty for the background node, see phetsims/center…

…-and-variability#6
phetsims · Feb 2, 2022 · 12c45b4 · 12c45b4
1 parent 53f14ea
commit 12c45b4
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/js/common/view/BackgroundNode.ts b/js/common/view/BackgroundNode.ts
@@ -9,25 +9,32 @@
  */
 
 import centerAndSpread from '../../centerAndSpread.js';
-import { LinearGradient, Rectangle } from '../../../../scenery/js/imports.js';
+import { Color, LinearGradient, Rectangle } from '../../../../scenery/js/imports.js';
 import Property from '../../../../axon/js/Property.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
+import CASColors from '../CASColors.js';
 
 // TODO: Do we still want a separate node for Sky and Ground?
 class BackgroundNode extends Rectangle {
   constructor( bottomY: number, visibleBoundsProperty: Property<Bounds2> ) {
     super( visibleBoundsProperty.value.centerX, visibleBoundsProperty.value.top, visibleBoundsProperty.value.centerX, bottomY );
 
-    visibleBoundsProperty.link( visibleBounds => {
+    Property.multilink( [
+      CASColors.skyGradientTopColorProperty,
+      CASColors.skyGradientMiddleColorProperty,
+      CASColors.skyGradientBottomColorProperty,
+      CASColors.groundColorProperty,
+      visibleBoundsProperty
+    ], ( skyGradientTopColor: Color, skyGradientMiddleColor: Color, skyGradientBottomColor: Color, groundColor: Color, visibleBounds: Bounds2 ) => {
       const gradient = new LinearGradient( visibleBounds.centerX, visibleBounds.top, visibleBounds.centerX, bottomY );
 
       // sky gradient, sampled from a screenshot
-      gradient.addColorStop( 0.0, '#2e4f8a' );
-      gradient.addColorStop( 0.5, '#5c98d3' );
-      gradient.addColorStop( 1.0, '#c9d9ef' );
+      gradient.addColorStop( 0.0, CASColors.skyGradientTopColorProperty.value );
+      gradient.addColorStop( 0.5, CASColors.skyGradientMiddleColorProperty.value );
+      gradient.addColorStop( 1.0, CASColors.skyGradientBottomColorProperty.value );
 
       // The ground
-      gradient.addColorStop( 1.0, '#468a41' );
+      gradient.addColorStop( 1.0, CASColors.groundColorProperty.value );
 
       this.setRect( visibleBounds.left, visibleBounds.top, visibleBounds.width, visibleBounds.height );
       this.fill = gradient;