     _template.split(///\{\{\s*#{key}\s*\}\}///)
       .join data[key]
   , template.toString()
+
+createColorsStyleSheet = (parent, termID, colors) ->
+  termHTMLID = "term3-term-#{termID}"
+  title = "#{termHTMLID}-colors"
+  ss = document.querySelector("style[title=\"#{title}\"]")
+  if ss != null
+    ssEl.parentElement.removeChild(ssEl)
+  styles = "\##{termHTMLID} { color: red; }"
+  stylePrefix = "\##{termHTMLID} "
+  styles = []
+  addStyle = (s) -> styles.push(stylePrefix + s)
+
+  i = 0
+  for c in colors.slice(0, 16)
+    addStyle(".xterm-color-#{i} { color: #{c}; }")
+    addStyle(".xterm-bg-color-#{i} { background-color: #{c}; }")
+    i += 1
+  addStyle(".terminal { background: #{colors[16]}; color: #{colors[17]}}")
+  addStyle(".xterm-viewport { background: #{colors[16]}; color: #{colors[17]}}")
+
+  ssEl = document.createElement('style')
+  ssEl.title = title
+  ssEl.innerHTML = styles.join("\n")
+  parent.appendChild(ssEl)
 
 class TermView extends View
   constructor: (@opts={})->

    term.on "focus", =>
      @emitter.emit "focus"

    term.open this.get(0)
    term.fit()
    { cols, rows } = @getDimensions


    {cols, rows, cwd, shell, shellArguments, shellOverride, runCommand, colors, cursorBlink, scrollback} = @opts
    args = shellArguments.split(/\s+/g).filter (arg) -> arg

    parent = this.get(0)

    createColorsStyleSheet(parent, this.id, colors)

    @term = term = new Terminal {
      colors, cursorBlink, scrollback
    }
