diff --git a/components/Themes/index.js b/components/Themes/index.js
index 9de6f3c..3630cf0 100644
--- a/components/Themes/index.js
+++ b/components/Themes/index.js
@@ -142,11 +142,15 @@ class Themes extends React.PureComponent {
             :global(.cm-comment) {
               color: ${highlights.comment} !important;
             }
-            :global(.cm-variable),
-            :global(.cm-variable-2),
-            :global(.cm-variable-3) {
+            :global(.cm-variable) {
               color: ${highlights.variable} !important;
             }
+            :global(.cm-variable-2) {
+              color: ${highlights.variable2 || highlights.variable} !important;
+            }
+            :global(.cm-variable-3) {
+              color: ${highlights.variable3 || highlights.variable} !important;
+            }
             :global(.cm-number) {
               color: ${highlights.number} !important;
             }
diff --git a/lib/constants.js b/lib/constants.js
index 57c64eb..d67cfb9 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -152,7 +152,9 @@ export const THEMES = [
     highlights: {
       background: '#282a36',
       text: '#f8f8f2',
-      variable: '#fff',
+      variable: '#50fa7b',
+      variable2: 'white',
+      variable3: '#ffb86c',
       attribute: '#50fa7b',
       definition: '#50fa7b',
       keyword: '#ff79c6',