├── .gitignore ├── LICENSE.md ├── README.md ├── index.less ├── package.json └── styles ├── base.less ├── colors.less ├── languages ├── babel.less ├── css.less ├── gfm.less ├── html.less ├── javascript.less ├── json.less ├── php.less ├── python.less └── ruby.less └── syntax-variables.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | snippets/ 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 Silvestre Herrera 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](http://i.imgur.com/f58FC9u.png) 2 | --- 3 | 4 | A syntax theme for [Atom Material UI](https://github.com/silvestreh/atom-material-ui). Inspired by Mattia Astorino's [SublimeText theme](https://github.com/equinusocio/material-theme). 5 | 6 | ![screenshot](http://i.imgur.com/3YQeDps.png) 7 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "styles/base"; 2 | 3 | // Languages 4 | @import (less) "styles/languages/babel"; 5 | @import (less) "styles/languages/css"; 6 | @import (less) "styles/languages/gfm"; 7 | @import (less) "styles/languages/html"; 8 | @import (less) "styles/languages/javascript"; 9 | @import (less) "styles/languages/json"; 10 | @import (less) "styles/languages/php"; 11 | @import (less) "styles/languages/python"; 12 | @import (less) "styles/languages/ruby"; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-material-syntax", 3 | "theme": "syntax", 4 | "version": "1.0.8", 5 | "description": "A dark syntax theme for Atom that uses Google's Material Design color palette", 6 | "keywords": [ 7 | "syntax", 8 | "theme", 9 | "material", 10 | "material design" 11 | ], 12 | "repository": "https://github.com/silvestreh/atom-material-syntax", 13 | "license": "MIT", 14 | "engines": { 15 | "atom": ">=1.13.0 <2.0.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/base.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | atom-text-editor { 4 | background-color: @syntax-background-color; 5 | color: @syntax-text-color; 6 | 7 | .wrap-guide { 8 | background-color: @syntax-indent-guide-color; 9 | } 10 | 11 | .indent-guide { 12 | color: @syntax-indent-guide-color; 13 | } 14 | 15 | .invisible-character { 16 | color: @syntax-invisible-character-color; 17 | } 18 | 19 | .cursor-line { 20 | background-color: fade(darken(@syntax-background-color, 20%), 20%); 21 | } 22 | 23 | .gutter { 24 | background-color: @syntax-gutter-background-color; 25 | color: @syntax-gutter-text-color; 26 | 27 | .line-number { 28 | &.cursor-line { 29 | background-color: darken(@syntax-background-color, 2.5%); 30 | color: @syntax-gutter-text-color-selected; 31 | } 32 | 33 | &.cursor-line-no-selection { 34 | color: @syntax-gutter-text-color-selected; 35 | } 36 | } 37 | } 38 | 39 | .fold-marker:after, 40 | .gutter .line-number.folded, 41 | .gutter .line-number:after { 42 | color: @light-gray; 43 | } 44 | 45 | .invisible { 46 | color: @syntax-text-color; 47 | } 48 | 49 | .cursor { 50 | color: @syntax-cursor-color; 51 | border-width: 2px; 52 | } 53 | 54 | .selection .region { 55 | background-color: @syntax-selection-color; 56 | } 57 | } 58 | 59 | atom-text-editor .search-results .syntax--marker .region { 60 | background-color: transparent; 61 | border: 1px solid @syntax-result-marker-color; 62 | } 63 | 64 | atom-text-editor .search-results .syntax--marker.current-result .region { 65 | border: 1px solid @syntax-result-marker-color-selected; 66 | } 67 | 68 | // Syntax styles 69 | .syntax--comment { 70 | color: @syntax-comment-color; 71 | } 72 | 73 | .syntax--keyword { 74 | color: @purple; 75 | 76 | &.syntax--control { 77 | color: @purple; 78 | 79 | &.syntax--elements { 80 | color: @light-gray; 81 | } 82 | } 83 | 84 | &.syntax--operator { 85 | color: @cyan; 86 | } 87 | 88 | &.syntax--other.syntax--special-method { 89 | color: @blue; 90 | } 91 | 92 | &.syntax--other.syntax--unit { 93 | color: @orange; 94 | } 95 | } 96 | 97 | .syntax--storage { 98 | color: @purple; 99 | } 100 | 101 | .syntax--constant { 102 | color: @red; 103 | 104 | &.syntax--character.syntax--escape { 105 | color: @cyan; 106 | } 107 | 108 | &.syntax--numeric { 109 | color: @strong-orange; 110 | } 111 | 112 | &.syntax--other.syntax--color { 113 | color: @cyan; 114 | } 115 | 116 | &.syntax--other.syntax--symbol { 117 | color: @green; 118 | } 119 | 120 | &.syntax--language.syntax--null { 121 | color: @pink; 122 | } 123 | } 124 | 125 | .syntax--variable { 126 | color: @very-light-gray; 127 | 128 | &.syntax--interpolation { 129 | color: darken(@red, 10%); 130 | } 131 | 132 | &.syntax--parameter.syntax--function { 133 | color: @strong-orange; 134 | } 135 | 136 | &.syntax--language { 137 | color: @pink; 138 | } 139 | 140 | &.syntax--variable { 141 | &.syntax--object { 142 | color: @orange; 143 | } 144 | } 145 | } 146 | 147 | .syntax--invalid.syntax--illegal { 148 | background-color: @red; 149 | color: @syntax-background-color; 150 | } 151 | 152 | .syntax--string { 153 | color: @green; 154 | 155 | &.syntax--regexp { 156 | color: @cyan; 157 | 158 | .syntax--source.syntax--ruby.syntax--embedded { 159 | color: @orange; 160 | } 161 | } 162 | 163 | &.syntax--other.syntax--link { 164 | color: @red; 165 | } 166 | } 167 | 168 | .syntax--punctuation { 169 | &.syntax--definition { 170 | &.syntax--comment { 171 | color: @syntax-comment-color; 172 | } 173 | 174 | &.syntax--array, 175 | &.syntax--parameters, 176 | &.syntax--string, 177 | &.syntax--variable { 178 | color: @syntax-text-color; 179 | 180 | &.syntax--begin, &.syntax--end { 181 | color: @cyan; 182 | } 183 | } 184 | 185 | &.syntax--heading, 186 | &.syntax--identity { 187 | color: @blue; 188 | } 189 | 190 | &.syntax--bold { 191 | color: @light-orange; 192 | font-weight: bold; 193 | } 194 | 195 | &.syntax--italic { 196 | color: @purple; 197 | font-style: italic; 198 | } 199 | 200 | &.syntax--entity { 201 | color: @cyan; 202 | } 203 | } 204 | 205 | &.syntax--section { 206 | &.syntax--array { 207 | color: @cyan; 208 | } 209 | 210 | &.syntax--embedded { 211 | color: @cyan; 212 | } 213 | } 214 | 215 | &.syntax--separator { 216 | &.syntax--key-value { 217 | color: @cyan; 218 | } 219 | } 220 | 221 | &.syntax--terminator { 222 | color: @cyan; 223 | } 224 | } 225 | 226 | .syntax--support { 227 | &.syntax--class { 228 | color: @orange; 229 | } 230 | 231 | &.syntax--function { 232 | color: @blue; 233 | 234 | &.syntax--any-method { 235 | color: @blue; 236 | } 237 | } 238 | 239 | &.syntax--type { 240 | color: @orange; 241 | } 242 | 243 | &.syntax--variable { 244 | &.syntax--dom { 245 | color: @orange; 246 | } 247 | } 248 | } 249 | 250 | .syntax--entity { 251 | &.syntax--name { 252 | &.syntax--function { 253 | color: @blue; 254 | } 255 | 256 | &.syntax--type { 257 | color: @very-light-gray; 258 | } 259 | } 260 | 261 | &.syntax--other { 262 | &.syntax--inherited-class { 263 | color: @green; 264 | } 265 | 266 | &.syntax--attribute-name { 267 | &.syntax--pseudo-element { 268 | color: @purple; 269 | } 270 | 271 | &.syntax--attribute { 272 | color: @purple; 273 | } 274 | } 275 | } 276 | 277 | &.syntax--name.syntax--class, 278 | &.syntax--name.syntax--type.syntax--class { 279 | color: @orange; 280 | } 281 | 282 | &.syntax--name.syntax--section { 283 | color: @blue; 284 | } 285 | 286 | &.syntax--name.syntax--tag { 287 | color: @red; 288 | } 289 | 290 | &.syntax--other.syntax--attribute-name { 291 | color: @orange; 292 | } 293 | } 294 | 295 | .syntax--meta { 296 | &.syntax--class { 297 | color: @light-orange; 298 | } 299 | 300 | &.syntax--delimiter { 301 | &.syntax--period { 302 | color: @cyan; 303 | } 304 | } 305 | 306 | &.syntax--link { 307 | color: @orange; 308 | } 309 | 310 | &.syntax--require { 311 | color: @blue; 312 | } 313 | 314 | &.syntax--selector { 315 | color: @purple; 316 | } 317 | 318 | &.syntax--separator { 319 | background-color: @gray; 320 | color: @syntax-text-color; 321 | } 322 | 323 | &.syntax--brace { 324 | &.syntax--round, &.syntax--square { 325 | color: @cyan; 326 | } 327 | } 328 | } 329 | 330 | .syntax--none { 331 | color: @syntax-text-color; 332 | } 333 | 334 | .syntax--markup { 335 | &.syntax--bold { 336 | color: @orange; 337 | font-weight: bold; 338 | } 339 | 340 | &.syntax--changed { 341 | color: @purple; 342 | } 343 | 344 | &.syntax--deleted { 345 | color: @red; 346 | } 347 | 348 | &.syntax--italic { 349 | color: @purple; 350 | font-style: italic; 351 | } 352 | 353 | &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading { 354 | color: @blue; 355 | } 356 | 357 | &.syntax--inserted { 358 | color: @green; 359 | } 360 | 361 | &.syntax--list { 362 | color: @red; 363 | } 364 | 365 | &.syntax--quote { 366 | color: @orange; 367 | } 368 | 369 | &.syntax--raw.syntax--inline { 370 | color: @green; 371 | } 372 | } 373 | 374 | .syntax--source.syntax--gfm .syntax--markup { 375 | -webkit-font-smoothing: auto; 376 | 377 | &.syntax--heading { 378 | color: @green; 379 | } 380 | } 381 | 382 | // Mini editor 383 | atom-text-editor[mini] .scroll-view { 384 | padding-left: 1px; 385 | } 386 | 387 | // Bracket Matcher 388 | atom-text-editor { 389 | .highlight .region.bracket-matcher { 390 | z-index: inherit; 391 | } 392 | } 393 | 394 | .bracket-matcher .region { 395 | border-bottom: 1px solid @syntax-cursor-color; 396 | box-sizing: border-box; 397 | background-color: fade(@syntax-text-color, 10%); 398 | box-shadow: inset 0 -1px 0 @syntax-cursor-color; 399 | } 400 | 401 | // Misspelled word 402 | atom-text-editor .spell-check-misspelling .region { 403 | z-index: auto; 404 | } 405 | -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | // These colors are specific to the theme. Do not use in a package! 2 | 3 | @very-light-gray: #EEFFFF; 4 | @light-gray: #B2CCD6; 5 | @gray: #373b41; 6 | @dark-gray: #282a2e; 7 | @very-dark-gray: #263238; 8 | 9 | @green: #C3E88D; 10 | @teal: #009688; 11 | @light-teal: #73d1c8; 12 | @cyan: #89DDF3; 13 | @blue: #82AAFF; 14 | @indigo: #7986CB; 15 | @purple: #C792EA; 16 | @pink: #FF5370; 17 | @red: #F07178; 18 | @strong-orange: #F78C6A; 19 | @orange: #FFCB6B; 20 | @light-orange: #FFE082; 21 | -------------------------------------------------------------------------------- /styles/languages/babel.less: -------------------------------------------------------------------------------- 1 | .syntax--jsx { 2 | &.syntax--component { 3 | color: @red; 4 | } 5 | } 6 | 7 | atom-text-editor { 8 | // Over-nesting to override `language-babel` default styles. 9 | .syntax--source.syntax--js.syntax--jsx { 10 | .syntax--jsx { 11 | .syntax--entity.syntax--other.syntax--attribute-name { 12 | font-style: normal; 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /styles/languages/css.less: -------------------------------------------------------------------------------- 1 | .syntax--css { 2 | .syntax--support { 3 | &.syntax--constant { 4 | color: @cyan; 5 | } 6 | 7 | &.syntax--property-name { 8 | color: @light-teal; 9 | } 10 | } 11 | 12 | .syntax--keyword { 13 | &.syntax--unit { 14 | color: @strong-orange; 15 | } 16 | } 17 | 18 | .syntax--constant { 19 | &.syntax--numeric { 20 | color: @light-orange; 21 | } 22 | 23 | &.syntax--color { 24 | color: @light-orange; 25 | 26 | .syntax--punctuation { 27 | color: currentColor; 28 | } 29 | } 30 | } 31 | 32 | .syntax--entity { 33 | &.syntax--tag { 34 | color: @light-gray; 35 | } 36 | 37 | &.syntax--id { 38 | color: @purple; 39 | } 40 | } 41 | 42 | .syntax--punctuation { 43 | &.syntax--delimiter { 44 | color: @cyan; 45 | 46 | + .syntax--constant.syntax--numeric:not(.syntax--color) { 47 | color: @strong-orange; 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /styles/languages/gfm.less: -------------------------------------------------------------------------------- 1 | [data-grammar*="gfm"] { 2 | .syntax--markup.syntax--underline.syntax--link { 3 | color: lighten(@pink, 10%); 4 | 5 | span.syntax--punctuation { 6 | color: @pink; 7 | } 8 | } 9 | .syntax--markup.syntax--strike { 10 | position: relative; 11 | color: fade(@syntax-text-color, 50%); 12 | 13 | &::after { 14 | content: ""; 15 | position: absolute; 16 | top: calc(50% + 4px); 17 | left: 0; 18 | right: 0; 19 | height: 1px; 20 | background-color: fade(@syntax-text-color, 50%); 21 | } 22 | } 23 | .syntax--table .syntax--border { 24 | color: fade(@syntax-text-color, 50%); 25 | } 26 | .syntax--markup.syntax--heading { 27 | color: @blue; 28 | } 29 | .syntax--punctuation.syntax--definition.syntax--begin, 30 | .syntax--punctuation.syntax--definition.syntax--end { 31 | color: @blue; 32 | } 33 | .syntax--punctuation.syntax--definition.syntax--begin + span:not(.syntax--function.syntax--parameter) { 34 | color: lighten(@blue, 5%); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/languages/html.less: -------------------------------------------------------------------------------- 1 | .syntax--html, .syntax--jsx { 2 | .syntax--meta { 3 | &.syntax--tag { 4 | &.syntax--doctype { 5 | color: @purple; 6 | } 7 | } 8 | } 9 | 10 | .syntax--punctuation { 11 | &.syntax--tag { 12 | color: @cyan; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/languages/javascript.less: -------------------------------------------------------------------------------- 1 | .syntax--js { 2 | &.syntax--constant { 3 | color: @very-light-gray; 4 | } 5 | 6 | &.syntax--support { 7 | &.syntax--variable { 8 | &.syntax--property { 9 | color: @very-light-gray; 10 | } 11 | &.syntax--property.syntax--dom { 12 | color: @blue; 13 | } 14 | } 15 | } 16 | 17 | &.syntax--entity { 18 | &.syntax--name { 19 | &.syntax--type { 20 | color: @orange; 21 | } 22 | } 23 | } 24 | 25 | &.syntax--variable { 26 | &.syntax--property { 27 | color: @blue; 28 | } 29 | &.syntax--other.syntax--object { 30 | color: @very-light-gray; 31 | } 32 | &.syntax--other.syntax--object.syntax--property { 33 | color: @blue; 34 | } 35 | } 36 | 37 | &.syntax--string.syntax--quoted.syntax--template { 38 | .syntax--other.syntax--object.syntax--property { 39 | color: @green; 40 | } 41 | } 42 | 43 | &.syntax--constant { 44 | &.syntax--numeric { 45 | color: @strong-orange; 46 | } 47 | 48 | &.syntax--boolean { 49 | color: @red; 50 | } 51 | } 52 | 53 | &.syntax--punctuation.syntax--begin, 54 | &.syntax--punctuation.syntax--end, 55 | &.syntax--delimiter.syntax--object.syntax--comma, 56 | &.syntax--brace.syntax--curly { 57 | color: @cyan; 58 | 59 | .syntax--comment & { 60 | color: @syntax-comment-color; 61 | } 62 | } 63 | 64 | &.syntax--export .syntax--variable.syntax--default { 65 | color: @purple; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /styles/languages/json.less: -------------------------------------------------------------------------------- 1 | .syntax--json { 2 | .syntax--meta.syntax--structure.syntax--dictionary.syntax--json { 3 | & > .syntax--string.syntax--quoted.syntax--json { 4 | & > .syntax--punctuation.syntax--string { 5 | color: @purple; 6 | } 7 | color: @purple; 8 | } 9 | } 10 | 11 | .syntax--meta.syntax--structure.syntax--dictionary.syntax--json, .syntax--meta.syntax--structure.syntax--array.syntax--json { 12 | & > .syntax--value.syntax--json > .syntax--string.syntax--quoted.syntax--json, 13 | & > .syntax--value.syntax--json > .syntax--string.syntax--quoted.syntax--json > .syntax--punctuation { 14 | color: @green; 15 | 16 | &.syntax--punctuation { 17 | &.syntax--begin, &.syntax--end { 18 | color: @cyan; 19 | } 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /styles/languages/php.less: -------------------------------------------------------------------------------- 1 | .syntax--php { 2 | &.syntax--keyword { 3 | &.syntax--operator { 4 | &.syntax--assignment { 5 | color: @purple; 6 | } 7 | } 8 | } 9 | 10 | &.syntax--meta { 11 | &.syntax--object { 12 | color: @blue; 13 | } 14 | 15 | &.syntax--arguments { 16 | color: @purple; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /styles/languages/python.less: -------------------------------------------------------------------------------- 1 | .syntax--python { 2 | .syntax--meta { 3 | &.syntax--function-call { 4 | color: @blue; 5 | 6 | .syntax--punctuation { 7 | color: @cyan; 8 | } 9 | 10 | .syntax--arguments { 11 | color: @indigo; 12 | 13 | &.syntax--punctuation { 14 | color: @cyan; 15 | } 16 | } 17 | } 18 | } 19 | 20 | .syntax--variable { 21 | &.syntax--self { 22 | color: @pink; 23 | } 24 | } 25 | 26 | .syntax--meta { 27 | .syntax--punctuation { 28 | &.syntax--inheritance, &.syntax--section { 29 | color: @cyan; 30 | } 31 | } 32 | } 33 | 34 | .syntax--variable { 35 | &.syntax--parameter { 36 | color: @cyan; 37 | } 38 | } 39 | 40 | .syntax--keyword { 41 | &.syntax--operator { 42 | color: @purple; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /styles/languages/ruby.less: -------------------------------------------------------------------------------- 1 | .syntax--ruby { 2 | .syntax--punctuation { 3 | &.syntax--separator { 4 | color: @cyan; 5 | } 6 | } 7 | 8 | .syntax--variable { 9 | &.syntax--block { 10 | color: @red; 11 | } 12 | 13 | &.syntax--instance { 14 | color: @red; 15 | 16 | .syntax--punctuation { 17 | color: currentColor; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/syntax-variables.less: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | // This defines all syntax variables that syntax themes must implement when they 4 | // include a syntax-variables.less file. 5 | 6 | // General colors 7 | @syntax-text-color: @very-light-gray; 8 | @syntax-cursor-color: @teal; 9 | @syntax-selection-color: lighten(@syntax-background-color, 10%); 10 | @syntax-background-color: @very-dark-gray; 11 | @syntax-comment-color: lighten(@very-dark-gray, 20%); 12 | 13 | // Guide colors 14 | @syntax-wrap-guide-color: @dark-gray; 15 | @syntax-indent-guide-color: lighten(@syntax-background-color, 2.5%); 16 | @syntax-invisible-character-color: @gray; 17 | 18 | // For find and replace markers 19 | @syntax-result-marker-color: @light-gray; 20 | @syntax-result-marker-color-selected: white; 21 | 22 | // Gutter colors 23 | @syntax-gutter-text-color: fade(@syntax-text-color, 20%); 24 | @syntax-gutter-text-color-selected: @syntax-gutter-text-color; 25 | @syntax-gutter-background-color: @syntax-background-color; 26 | @syntax-gutter-background-color-selected: darken(@syntax-background-color, 5%); 27 | 28 | // For git diff info. i.e. in the gutter 29 | @syntax-color-renamed: @blue; 30 | @syntax-color-added: @green; 31 | @syntax-color-modified: @orange; 32 | @syntax-color-removed: @red; 33 | --------------------------------------------------------------------------------