diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee
index 6b4ec612..cec0d629 100644
--- a/lib/minimap-element.coffee
+++ b/lib/minimap-element.coffee
@@ -40,7 +40,12 @@ class MinimapElement extends HTMLElement
     @subscriptions = new CompositeDisposable
     @initializeContent()
 
-    @subscriptions.add atom.themes.onDidChangeActiveThemes =>
+    # Uses of `atom.styles.onDidAddStyleElement` instead of
+    # `atom.themes.onDidChangeActiveThemes`.
+    # Why?
+    # Currently, The styleElement will be removed first,
+    # and then re-add. So the `change` event has not be triggered.
+    @subscriptions.add atom.styles.onDidAddStyleElement =>
       @invalidateCache()
       @requestForcedUpdate()
 
diff --git a/spec/minimap-element-spec.coffee b/spec/minimap-element-spec.coffee
index 603b5551..8e8655e5 100644
--- a/spec/minimap-element-spec.coffee
+++ b/spec/minimap-element-spec.coffee
@@ -448,13 +448,15 @@ describe 'MinimapElement', ->
     #    ##    ## ##     ## ##   ### ##        ##  ##    ##
     #     ######   #######  ##    ## ##       ####  ######
 
-    describe 'when the atom themes are changed', ->
+    describe 'when the atom styles are changed', ->
       beforeEach ->
         nextAnimationFrame()
         spyOn(minimapElement, 'requestForcedUpdate').andCallThrough()
         spyOn(minimapElement, 'invalidateCache').andCallThrough()
 
-        atom.themes.emitter.emit 'did-change-active-themes'
+        styleNode = document.createElement('style')
+        styleNode.textContent = 'body{ color: #233; }'
+        atom.styles.emitter.emit 'did-add-style-element', styleNode
 
         waitsFor -> minimapElement.frameRequested