diff --git a/templates/theme/index.less b/templates/theme/index.less
index d076b67b5..8d0a86859 100644
--- a/templates/theme/index.less
+++ b/templates/theme/index.less
@@ -1 +1,3 @@
-@import "./styles/base.less";
+@import "styles/syntax-variables.less";
+@import "styles/syntax.less";
+@import "styles/editor.less";
diff --git a/templates/theme/styles/base.less b/templates/theme/styles/base.less
deleted file mode 100644
index fcc09434e..000000000
--- a/templates/theme/styles/base.less
+++ /dev/null
@@ -1,301 +0,0 @@
-@import "syntax-variables";
-
-atom-text-editor {
-  background-color: @syntax-background-color;
-  color: @syntax-text-color;
-
-  .wrap-guide {
-    background-color: @syntax-wrap-guide-color;
-  }
-
-  .indent-guide {
-    color: @syntax-indent-guide-color;
-  }
-
-  .invisible-character {
-    color: @syntax-invisible-character-color;
-  }
-
-  .gutter {
-    background-color: @syntax-gutter-background-color;
-    color: @syntax-gutter-text-color;
-
-    .line-number {
-      &.cursor-line {
-        background-color: @syntax-gutter-background-color-selected;
-        color: @syntax-gutter-text-color-selected;
-      }
-
-      &.cursor-line-no-selection {
-        color: @syntax-gutter-text-color-selected;
-      }
-    }
-  }
-
-  .gutter .line-number.folded,
-  .gutter .line-number:after,
-  .fold-marker:after {
-    color: @light-gray;
-  }
-
-  .invisible {
-    color: @syntax-text-color;
-  }
-
-  .cursor {
-    color: @syntax-cursor-color;
-  }
-
-  .selection .region {
-    background-color: @syntax-selection-color;
-  }
-}
-
-
-// Syntax styles
-
-.syntax--comment {
-  color: @light-gray;
-}
-
-.syntax--keyword {
-  color: @purple;
-
-  &.syntax--control {
-    color: @purple;
-  }
-
-  &.syntax--operator {
-    color: @syntax-text-color;
-  }
-
-  &.syntax--other.syntax--special-method {
-    color: @blue;
-  }
-
-  &.syntax--other.syntax--unit {
-    color: @orange;
-  }
-}
-
-.syntax--storage {
-  color: @purple;
-}
-
-.syntax--constant {
-  color: @orange;
-
-  &.syntax--character.syntax--escape {
-    color: @cyan;
-  }
-
-  &.syntax--numeric {
-    color: @orange;
-  }
-
-  &.syntax--other.syntax--color {
-    color: @cyan;
-  }
-
-  &.syntax--other.syntax--symbol {
-    color: @green;
-  }
-}
-
-.syntax--variable {
-  color: @red;
-
-  &.syntax--interpolation {
-    color: darken(@red, 10%);
-  }
-
-  &.syntax--parameter.syntax--function {
-    color: @syntax-text-color;
-  }
-}
-
-.syntax--invalid.syntax--illegal {
-  background-color: @red;
-  color: @syntax-background-color;
-}
-
-.syntax--string {
-  color: @green;
-
-
-  &.syntax--regexp {
-    color: @cyan;
-
-    .syntax--source.syntax--ruby.syntax--embedded {
-      color: @orange;
-    }
-  }
-
-  &.syntax--other.syntax--link {
-    color: @red;
-  }
-}
-
-.syntax--punctuation {
-  &.syntax--definition {
-    &.syntax--comment {
-      color: @light-gray;
-    }
-
-    &.syntax--string,
-    &.syntax--variable,
-    &.syntax--parameters,
-    &.syntax--array {
-      color: @syntax-text-color;
-    }
-
-    &.syntax--heading,
-    &.syntax--identity {
-      color: @blue;
-    }
-
-    &.syntax--bold {
-      color: @light-orange;
-      font-weight: bold;
-    }
-
-    &.syntax--italic {
-      color: @purple;
-      font-style: italic;
-    }
-  }
-
-  &.syntax--section.syntax--embedded {
-    color: darken(@red, 10%);
-  }
-
-}
-
-.syntax--support {
-  &.syntax--class {
-    color: @light-orange;
-  }
-
-  &.syntax--function  {
-    color: @cyan;
-
-    &.syntax--any-method {
-      color: @blue;
-    }
-  }
-}
-
-.syntax--entity {
-  &.syntax--name.syntax--function {
-    color: @blue;
-  }
-  &.syntax--name.syntax--type {
-    color: @light-orange;
-    text-decoration: underline;
-  }
-
-  &.syntax--other.syntax--inherited-class {
-    color: @green;
-  }
-  &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class {
-    color: @light-orange;
-  }
-
-  &.syntax--name.syntax--section {
-    color: @blue;
-  }
-
-  &.syntax--name.syntax--tag {
-    color: @red;
-    text-decoration: underline;
-  }
-
-  &.syntax--other.syntax--attribute-name {
-    color: @orange;
-
-    &.syntax--id {
-      color: @blue;
-    }
-  }
-}
-
-.syntax--meta {
-  &.syntax--class {
-    color: @light-orange;
-  }
-
-  &.syntax--link {
-    color: @orange;
-  }
-
-  &.syntax--require {
-    color: @blue;
-  }
-
-  &.syntax--selector {
-    color: @purple;
-  }
-
-  &.syntax--separator {
-    background-color: @gray;
-    color: @syntax-text-color;
-  }
-}
-
-.syntax--none {
-  color: @syntax-text-color;
-}
-
-.syntax--markup {
-  &.syntax--bold {
-    color: @orange;
-    font-weight: bold;
-  }
-
-  &.syntax--changed {
-    color: @purple;
-  }
-
-  &.syntax--deleted {
-    color: @red;
-  }
-
-  &.syntax--italic {
-    color: @purple;
-    font-style: italic;
-  }
-
-  &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
-    color: @blue;
-  }
-
-  &.syntax--inserted {
-    color: @green;
-  }
-
-  &.syntax--list {
-    color: @red;
-  }
-
-  &.syntax--quote {
-    color: @orange;
-  }
-
-  &.syntax--raw.syntax--inline {
-    color: @green;
-  }
-}
-
-.syntax--source.syntax--gfm .syntax--markup {
-  -webkit-font-smoothing: auto;
-  &.syntax--heading {
-    color: @green;
-  }
-}
-
-
-// Mini editor
-
-atom-text-editor[mini] .scroll-view {
-  padding-left: 1px;
-}
diff --git a/templates/theme/styles/editor.less b/templates/theme/styles/editor.less
new file mode 100644
index 000000000..8cd35dea3
--- /dev/null
+++ b/templates/theme/styles/editor.less
@@ -0,0 +1,56 @@
+// This defines styling rules for the editor.
+
+atom-text-editor {
+  background-color: @syntax-background-color;
+  color: @syntax-text-color;
+
+  .wrap-guide {
+    background-color: @syntax-wrap-guide-color;
+  }
+
+  .indent-guide {
+    color: @syntax-indent-guide-color;
+  }
+
+  .invisible-character {
+    color: @syntax-invisible-character-color;
+  }
+
+  .gutter {
+    background-color: @syntax-gutter-background-color;
+    color: @syntax-gutter-text-color;
+
+    .line-number {
+      &.cursor-line {
+        background-color: @syntax-gutter-background-color-selected;
+        color: @syntax-gutter-text-color-selected;
+      }
+
+      &.cursor-line-no-selection {
+        color: @syntax-gutter-text-color-selected;
+      }
+    }
+  }
+
+  .gutter .line-number.folded,
+  .gutter .line-number:after,
+  .fold-marker:after {
+    color: @light-gray;
+  }
+
+  .invisible {
+    color: @syntax-text-color;
+  }
+
+  .cursor {
+    color: @syntax-cursor-color;
+  }
+
+  .selection .region {
+    background-color: @syntax-selection-color;
+  }
+}
+
+atom-text-editor[mini] .scroll-view {
+  padding-left: 1px;
+}
diff --git a/templates/theme/styles/syntax.less b/templates/theme/styles/syntax.less
new file mode 100644
index 000000000..25b08d476
--- /dev/null
+++ b/templates/theme/styles/syntax.less
@@ -0,0 +1,331 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/naming-conventions
+
+   In case of conflict betwen styling rules:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return import
+.syntax--keyword {
+  color: @purple;
+
+  // and or new del
+  &.syntax--operator {
+    color: @very-light-gray;
+  }
+
+  // = + && | <<
+  &.syntax--symbol {
+    color: @very-light-gray;
+  }
+}
+
+// global static extends
+.syntax--storage {
+  color: @purple;
+
+  // int char float
+  &.syntax--type {
+    color: @purple;
+    text-decoration: underline;
+  }
+
+  // let def class
+  &.syntax--declaration {
+    color: @purple;
+  }
+
+  // ?
+  &.syntax--symbol {
+    color: @very-light-gray;
+  }
+}
+
+// variable
+.syntax--entity {
+  color: @very-light-gray;
+
+  // function(parameter)
+  &.syntax--parameter {
+    color: @very-light-gray;
+  }
+
+  // self cls
+  &.syntax--support {
+    color: @red;
+  }
+
+  // this super iota
+  &.syntax--language {
+    color: @red;
+
+    // @
+    &.syntax--symbol {
+      color: @very-light-gray;
+    }
+  }
+
+  // function method
+  &.syntax--function {
+    color: @blue;
+
+    // len print
+    &.syntax--language {
+      color: @cyan;
+    }
+  }
+
+  // add
+  &.syntax--operator {
+    color: @blue;
+
+    // %>% <=>
+    &.syntax--symbol {
+      color: @very-light-gray;
+    }
+  }
+
+  // Class
+  &.syntax--type {
+    color: @light-orange;
+    text-decoration: underline;
+
+    // String List
+    &.syntax--language {
+      color: @light-orange;
+    }
+
+    // dict map float32
+    &.syntax--fundamental {
+      color: @purple;
+    }
+  }
+
+  // .class :pseudo-class
+  &.syntax--selector {
+    color: @light-orange;
+
+    // #id
+    &.syntax--id {
+      color: @blue;
+    }
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @red;
+    text-decoration: underline;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @orange;
+  }
+
+  // height position border
+  &.syntax--property {
+    color: @very-light-gray;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @very-light-gray;
+}
+
+// "string"
+.syntax--string {
+  color: @green;
+
+  // :immutable
+  &.syntax--immutable {
+    color: @green;
+  }
+
+  // ${variable:.2f}
+  &.syntax--interpolation {
+
+    // ${ }
+    &.syntax--punctuation {
+      color: @very-light-gray;
+    }
+  }
+
+  // .2f <30 -#10x
+  &.syntax--format {
+    color: darken(@green, 15%);
+
+    // :
+    &.syntax--punctuation {
+      color: @very-light-gray;
+    }
+  }
+
+  // %().2f {0:<30} %-#10x
+  &.syntax--placeholder {
+    color: darken(@green, 15%);
+
+    // % ( ) { } :
+    .syntax--punctuation {
+      color: darken(@green, 15%);
+    }
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @cyan;
+
+    // ^ $ \b | ? +
+    .syntax--keyword {
+      color: darken(@cyan, 15%);
+    }
+
+    // ( ) [^ ] (?= )
+    .syntax--punctuation {
+      color: darken(@cyan, 15%);
+    }
+  }
+}
+
+// literal
+.syntax--constant {
+  color: @orange;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @cyan;
+
+    // \" \u2661
+    &.syntax--escape {
+      color: @cyan;
+    }
+
+    // \n \r \t
+    &.syntax--whitespace {
+      color: @cyan;
+    }
+  }
+
+  // 4 1.3 0x29
+  &.syntax--numeric {
+    color: @orange;
+
+    // px % cm hz
+    &.syntax--unit {
+      color: @orange;
+    }
+  }
+
+  // #b294bb
+  &.syntax--color {
+    color: @cyan;
+  }
+
+  // true false nil
+  &.syntax--language {
+    color: @orange;
+
+    // ...
+    &.syntax--symbol {
+      color: @very-light-gray;
+    }
+  }
+}
+
+// text
+.syntax--text {
+  color: @very-light-gray;
+}
+
+// __formatted__
+.syntax--markup {
+  color: @red;
+
+  // # Heading
+  &.syntax--heading {
+    color: @blue;
+  }
+
+  // - item
+  &.syntax--list {
+    color: @red;
+  }
+
+  // > quote
+  &.syntax--quote {
+    color: @orange;
+  }
+
+  // **bold**
+  &.syntax--bold {
+    color: @orange;
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    color: @purple;
+    font-style: italic;
+  }
+
+  // __underline__
+  &.syntax--underline {
+    color: @orange;
+    text-decoration: underline;
+  }
+
+  // ~~strike~~
+  &.syntax--strike {
+    color: @red;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    color: @green;
+  }
+
+  // url.com (path) [reference]
+  &.syntax--link {
+    color: @orange;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @green;
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @red;
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @orange;
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @light-gray;
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    background-color: @red;
+    color: @syntax-background-color;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: @red;
+    text-decoration: underline;
+  }
+}