WIP: Transfer foreground/background color into shadow DOM

Refs #4086

spec/text-editor-element-spec.coffee

@@ -57,6 +57,26 @@ describe "TextEditorElement", ->
         document.body.focus()
         expect(blurCalled).toBe true
 
+  describe "style transfer", ->
+    beforeEach ->
+      waitsForPromise -> atom.themes.activateThemes()
+
+    afterEach ->
+      atom.themes.deactivateThemes()
+
+    ffit "transfers the foreground and background colors into the shadow DOM", ->
+      runs ->
+        element = new TextEditorElement()
+        jasmineContent.appendChild(element)
+        initialBackgroundColor = getComputedStyle(element.shadowRoot.querySelector('.editor')).backgroundColor
+
+        atom.styles.addStyleSheet """
+          atom-text-editor { background: red; }
+        """
+
+        newBackgroundColor = getComputedStyle(element.shadowRoot.querySelector('.editor')).backgroundColor
+        expect(newBackgroundColor).not.toBe initialBackgroundColor
+
   describe "when the themes finish loading with the shadow DOM disabled (regressios)", ->
     [themeReloadCallback, initialThemeLoadComplete, element] = []
 

src/text-editor-element.coffee

@@ -14,7 +14,6 @@ class TextEditorElement extends HTMLElement
   focusOnAttach: false
 
   createdCallback: ->
-    @subscriptions =
     @initializeContent()
     @createSpacePenShim()
     @addEventListener 'focus', @focused.bind(this)
@@ -36,13 +35,18 @@ class TextEditorElement extends HTMLElement
 
       @shadowRoot.appendChild(@stylesElement)
       @shadowRoot.appendChild(@rootElement)
+
+      if atom.themes.isInitialLoadComplete()
+        @observeGlobalStyles()
+      else
+        loadSubscription = atom.themes.onDidReloadAll(@observeGlobalStyles.bind(this))
+
     else
       @stylesElement = document.head.querySelector('atom-styles')
       @rootElement = this
 
     @rootElement.classList.add('editor', 'editor-colors')
 
-
   createSpacePenShim: ->
     TextEditorView ?= require './text-editor-view'
     @__spacePenView = new TextEditorView(this)
@@ -53,6 +57,29 @@ class TextEditorElement extends HTMLElement
     @component.checkForVisibilityChange()
     @focus() if @focusOnAttach
 
+  observeGlobalStyles: ->
+    globalStyles = document.head.querySelector('atom-styles')
+    globalStyles.onDidAddStyleElement(@transferComputedStyles.bind(this))
+    @transferComputedStyles()
+
+  transferComputedStyles: ->
+    unless @hostOverrideStyleElement?
+      @hostOverrideStyleElement = document.createElement('style')
+      @shadowRoot.insertBefore(@hostOverrideStyleElement, @stylesElement.nextSibling)
+
+    {color, backgroundColor} = getComputedStyle(this)
+
+    @hostOverrideStyleElement.textContent = """
+      .editor-colors {
+        background-color: #{backgroundColor};
+        color: #{color};
+      }
+
+      .cursor {
+        border-color: #{color};
+      }
+    """
+
   setModel: (model) ->
     throw new Error("Model already assigned on TextEditorElement") if @model?
     return if model.isDestroyed()