Use Twilight theme stylesheet based on TextMateTheme

benchmark/benchmark-helper.coffee

@@ -6,11 +6,13 @@ Point = require 'point'
 RootView = require 'root-view'
 Project = require 'project'
 TextMateBundle = require 'text-mate-bundle'
+TextMateTheme = require 'text-mate-theme'
 
 require 'window'
 
 requireStylesheet "jasmine.css"
 TextMateBundle.loadAll()
+TextMateTheme.loadAll()
 
 RootView.prototype.loadUserConfiguration = ->
 

spec/app/text-mate-theme-spec.coffee

@@ -5,9 +5,25 @@ TextMateTheme = require 'text-mate-theme'
 describe "TextMateTheme", ->
   theme = null
   beforeEach ->
-    twilightPlist = fs.read(require.resolve('Twilight.tmTheme'))
-    plist.parseString twilightPlist, (err, data) ->
-      theme = new TextMateTheme(data[0])
+    theme = TextMateTheme.getTheme('Twilight')
+
+  describe "@getNames()", ->
+    it "returns an array of available theme names", ->
+      names = TextMateTheme.getNames()
+      expect(names).toContain("Twilight")
+      expect(names).toContain("Blackboard")
+
+  describe "@activate(name)", ->
+    it "activates a theme by name", ->
+      spyOn theme, 'activate'
+      TextMateTheme.activate('Twilight')
+      expect(theme.activate).toHaveBeenCalled()
+
+  describe ".activate()", ->
+    it "applies the theme's stylesheet to the current window", ->
+      spyOn window, 'applyStylesheet'
+      theme.activate()
+      expect(window.applyStylesheet).toHaveBeenCalledWith(theme.name, theme.getStylesheet())
 
   describe ".getRulesets()", ->
     rulesets = null
@@ -35,7 +51,7 @@ describe "TextMateTheme", ->
     it "returns an array of objects representing the theme's scope selectors", ->
       expect(rulesets[11]).toEqual
         comment: "Invalid – Deprecated"
-        selector: "invalid--deprecated"
+        selector: ".invalid-deprecated"
         properties:
           'color': "#D2A8A1"
           'font-style': 'italic'
@@ -43,7 +59,7 @@ describe "TextMateTheme", ->
 
       expect(rulesets[12]).toEqual
         comment: "Invalid – Illegal"
-        selector: "invalid--illegal"
+        selector: ".invalid-illegal"
         properties:
           'color': "#F8F8F8"
           'background-color': 'rgba(86, 45, 86, 191)'

spec/spec-helper.coffee

@@ -8,12 +8,14 @@ Directory = require 'directory'
 File = require 'file'
 RootView = require 'root-view'
 TextMateBundle = require 'text-mate-bundle'
+TextMateTheme = require 'text-mate-theme'
 fs = require 'fs'
 require 'window'
 $native.showDevTools()
 
 requireStylesheet "jasmine.css"
 TextMateBundle.loadAll()
+TextMateTheme.loadAll()
 
 defaultTitle = document.title
 pathsWithSubscriptions = null

src/app/editor.coffee

@@ -7,6 +7,7 @@ EditSession = require 'edit-session'
 CursorView = require 'cursor-view'
 SelectionView = require 'selection-view'
 Native = require 'native'
+TextMateTheme = require 'text-mate-theme'
 fs = require 'fs'
 
 $ = require 'jquery'
@@ -54,7 +55,7 @@ class Editor extends View
 
   initialize: ({editSession, @mini} = {}) ->
     requireStylesheet 'editor.css'
-    requireStylesheet 'theme/twilight.css'
+    TextMateTheme.activate('Twilight')
 
     @id = Editor.idCounter++
     @lineCache = []

src/app/text-mate-theme.coffee

@@ -1,13 +1,56 @@
 _ = require 'underscore'
+fs = require 'fs'
+plist = require 'plist'
 
 module.exports =
 class TextMateTheme
+  @themesByName: {}
+
+  @loadAll: ->
+    for themePath in fs.list(require.resolve("themes"))
+      @registerTheme(TextMateTheme.load(themePath))
+
+  @load: (path) ->
+    plistString = fs.read(require.resolve(path))
+    theme = null
+    plist.parseString plistString, (err, data) ->
+      throw new Error("Error loading theme at '#{path}': #{err}") if err
+      theme = new TextMateTheme(data[0])
+    theme
+
+  @registerTheme: (theme) ->
+    @themesByName[theme.name] = theme
+
+  @getNames: ->
+    _.keys(@themesByName)
+
+  @getTheme: (name) ->
+    @themesByName[name]
+
+  @activate: (name) ->
+    if theme = @getTheme(name)
+      theme.activate()
+    else
+      throw new Error("No theme with name '#{name}'")
+
   constructor: ({@name, settings}) ->
     @rulesets = []
     globalSettings = settings[0]
     @buildGlobalSettingsRulesets(settings[0])
     @buildScopeSelectorRulesets(settings[1..])
 
+  activate: ->
+    applyStylesheet(@name, @getStylesheet())
+
+  getStylesheet: ->
+    lines = []
+    for {selector, properties} in @getRulesets()
+      lines.push("#{selector} {")
+      for name, value of properties
+        lines.push "  #{name}: #{value};"
+      lines.push("}\n")
+    lines.join("\n")
+
   getRulesets: -> @rulesets
 
   buildGlobalSettingsRulesets: ({settings}) ->
@@ -38,7 +81,8 @@ class TextMateTheme
         properties: @translateScopeSelectorSettings(settings)
 
   translateScopeSelector: (textmateScopeSelector) ->
-    textmateScopeSelector.replace('.', '--')
+    scopes = textmateScopeSelector.replace(/\./g, '-').split(/\s+/).map (scope) -> '.' + scope
+    scopes.join(' ')
 
   translateScopeSelectorSettings: ({ foreground, background, fontStyle }) ->
     properties = {}

src/app/window.coffee

@@ -3,6 +3,7 @@
 
 Native = require 'native'
 TextMateBundle = require 'text-mate-bundle'
+TextMateTheme = require 'text-mate-theme'
 fs = require 'fs'
 _ = require 'underscore'
 $ = require 'jquery'
@@ -25,6 +26,8 @@ windowAdditions =
 
   startup: (path) ->
     TextMateBundle.loadAll()
+    TextMateTheme.loadAll()
+
     @attachRootView(path)
     $(window).on 'close', => @close()
     $(window).on 'beforeunload', =>

static/theme/twilight.css

@@ -1,125 +0,0 @@
-.print_margin {
-  width: 1px;
-  background: #e8e8e8;
-}
-
-.editor {
-  background-color: #141414;
-}
-
-.text-layer {
-  cursor: text;
-  color: #F8F8F8;
-}
-
-/* .cursor { */
-/*   border-left: 2px solid #A7A7A7; */
-/* } */
-
-.cursor.overwrite {
-  border-left: 0px;
-  border-bottom: 1px solid #A7A7A7;
-}
-
-.marker-layer .selection {
-  background: rgba(221, 240, 255, 0.20);
-}
-
-.marker-layer .step {
-  background: rgb(198, 219, 174);
-}
-
-.marker-layer .bracket {
-  margin: -1px 0 0 -1px;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-}
-
-.marker-layer .active_line {
-  background: rgba(255, 255, 255, 0.031);
-}
-
-.marker-layer .selected_word {
-  border: 1px solid rgba(221, 240, 255, 0.20);
-}
-
-.invisible {
-  color: rgba(255, 255, 255, 0.25);
-}
-
-.keyword {
-  color:#CDA869;
-}
-
-.constant {
-  color:#CF6A4C;
-}
-
-.invalid.illegal {
-  color:#F8F8F8;
-background-color:rgba(86, 45, 86, 0.75);
-}
-
-.invalid.deprecated {
-  text-decoration:underline;
-  font-style:italic;
-  color:#D2A8A1;
-}
-
-.support {
-  color:#9B859D;
-}
-
-.fold {
-  background-color: #333;
-}
-
-.fold.selected {
-  background-color: #1C2917;
-  color: #969696;
-}
-
-.support.function {
-  color:#DAD085;
-}
-
-.string {
-  color:#8F9D6A;
-}
-
-.string.regexp {
-  color:#E9C062;
-}
-
-.comment {
-  font-style:italic;
-color:#5F5A60;
-}
-
-.variable {
-  color:#7587A6;
-}
-
-.xml_pe {
-  color:#494949;
-}
-
-.meta.tag {
-  color:#AC885B;
-}
-
-.entity.name.function {
-  color:#AC885B;
-}
-
-.markup.underline {
-    text-decoration:underline;
-}
-
-.markup.heading {
-  color:#CF6A4C;
-}
-
-.markup.list {
-  color:#F9EE98;
-}
-