diff --git a/example/index.html b/example/index.html
index 86e1a03..1dfc91b 100755
--- a/example/index.html
+++ b/example/index.html
@@ -15,7 +15,7 @@
       </a-assets>
 
       <a-sky src="#lake"></a-sky>
-      <a-entity text-texture="text: Texture Based Text with accented characters (á, ã, â...); scale: 1.0" position="0 0 -10"> </a-entity>
+      <a-entity text-texture="text: Texture Based Text with accented characters (á, ã, â...); scale: 1.0; fillStyle: White" position="0 0 -10"> </a-entity>
     </a-scene>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
index 9220b18..87dfd87 100755
--- a/src/index.js
+++ b/src/index.js
@@ -46,7 +46,7 @@ AFRAME.registerComponent("text-texture", {
       type: "number"
     },
     fillStyle: {
-      default: "#fffff",
+      default: "#fef9ff",
       type: "color"
     },
     lineWidth: {
@@ -56,7 +56,7 @@ AFRAME.registerComponent("text-texture", {
       type: "number"
     },
     strokeStyle: {
-      default: "#fffff",
+      default: "#fef9ff",
       type: "color"
     },
     opacity: {
@@ -96,6 +96,7 @@ AFRAME.registerComponent("text-texture", {
     this.geometry = new THREE.PlaneGeometry(1, 1, 1);
     this.mesh = new THREE.Mesh(this.geometry, this.material);
     this.el.setObject3D("mesh", this.mesh);
+    this.textTexture.fillStyle = this.data.fillStyle;
   },
   play: function() {},
   update: function(oldData) {