├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── index.less ├── package.json ├── screenshots ├── html.png ├── js.png ├── json.png └── logo.png └── styles ├── colors.less ├── common.less ├── editor.less ├── index.less ├── languages ├── bash.less ├── coffee.less ├── cpp.less ├── csharp.less ├── css.less ├── dots.less ├── glsl.less ├── html.less ├── java.less ├── jsx.less ├── less.less ├── markup.less ├── regexp.less ├── ruby.less ├── sass.less ├── typescript.less └── uno.less └── syntax-variables.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | 5 | *.png 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 2.3.0 2 | * Fully refactor internal code for better structure 3 | * Improve CSS/LESS/SASS styles 4 | 5 | ## 2.2.0 6 | * Improve JavaScript/JSX styles 7 | 8 | ## 2.1.1 9 | * Improve CSS/LESS/SASS styles 10 | 11 | ## 2.1.0 12 | * Update Typescript syntax highlight 13 | 14 | ## 2.0.0 15 | * Compatible with Atom >= 1.13.0 16 | * Improve jsx syntax 17 | 18 | ## 1.5.1 19 | * Add Java syntax highlight 20 | 21 | ## 1.4.0 22 | * Slightly change color theme 23 | * fix some issues in css 24 | 25 | 26 | ## 1.3.3 27 | * Change color for function of .less files 28 | * Fix variable of modules 29 | * Fix inheritance class 30 | 31 | ## 1.3.1 32 | * Fix Ruby interpolated strings 33 | 34 | ## 1.2.1 35 | * Improve coffee syntax 36 | 37 | ## 1.2.0 38 | * Add Fuse's Uno/UX syntax 39 | 40 | ## 1.1.0 41 | * Add Objective-C/Objective-C++ syntax 42 | 43 | ## 1.0.2 44 | * Fix domination green color in some moments 45 | 46 | ## 1.0.0 47 | * Improved color scheme and background color 48 | * Add ruby syntax 49 | * Add C#/Mono syntax 50 | * Improved python syntax 51 | 52 | ## 0.7.0 53 | * Shift background to tinted color 54 | 55 | ## 0.6.2 56 | * Fix some highlights in JavaScript ES6 57 | 58 | ## 0.6.0 59 | * Improved syntax on JavaScript ES6 60 | 61 | ## 0.5.0 62 | * Improved color scheme 63 | 64 | ## 0.4.0 65 | * Improved color scheme 66 | 67 | ## 0.3.0 68 | * New syntaxes 69 | 70 | ## 0.2.5 71 | * Improved GLSL style of highlight 72 | * Improved CoffeeScript highlight 73 | 74 | ## 0.2.4 75 | * Improved Less/CSS style of highlight 76 | 77 | ## 0.2.2 78 | * Fix screenshots remote pathes 79 | 80 | ## 0.2.1 81 | * Add screenshots to readme.md 82 | 83 | ## 0.2.0 - Second Release 84 | * Improved color scheme 85 | 86 | ## 0.1.0 - First Release 87 | * Born 88 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 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 | Dark Fusion Syntax 2 | ================== 3 | 4 | Flat and color balanced dark syntax theme for maximum readability for Atom Editor 5 | 6 | ### How to install syntax theme 7 | ```bash 8 | apm install atom-dark-fusion-syntax 9 | ``` 10 | 11 | 12 | #### Battletested 13 | 14 | - JavaScript 15 | - Babel ES6 JavaScript 16 | - CoffeeScript 17 | - TypeScript 18 | - Java 19 | - Python 20 | - Ruby **(Thanks to joseramonc)** 21 | - Objective-C 22 | - CSharp/Mono 23 | - Uno/UX 24 | - [React/JSX](https://atom.io/packages/react) 25 | - HTML 26 | - CSS / SASS / SCSS / Less **(Improved!)** 27 | - JSON / CSON 28 | - [GLSL](https://atom.io/packages/language-glsl) 29 | - [Dot Files](https://atom.io/packages/language-dots) 30 | - Others 31 | 32 | 33 | --- 34 | #### JavaScript syntax (with Nucleus Dark UI) 35 | 36 | ![javascript screenshot](https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/master/screenshots/js.png) 37 | 38 | #### HTML syntax 39 | 40 | ![html screenshot](https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/master/screenshots/html.png) 41 | 42 | #### JSON syntax 43 | 44 | ![json screenshot](https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/master/screenshots/json.png) 45 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "./styles/index.less"; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-dark-fusion-syntax", 3 | "theme": "syntax", 4 | "version": "2.2.1", 5 | "description": "Flat and color balanced dark theme for maximum readability", 6 | "keywords": [ 7 | "fusion", 8 | "dark", 9 | "syntax", 10 | "theme", 11 | "teal", 12 | "orange", 13 | "balanced" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/maxgraey/atom-dark-fusion-syntax.git" 18 | }, 19 | "license": "MIT", 20 | "engines": { 21 | "atom": ">=1.13.0 <2.0.0" 22 | }, 23 | "readmeFilename": "README.md", 24 | "readme": "Dark Fusion Syntax\n==================\n\nFlat and color balanced dark syntax theme for maximum readability for Atom Editor\n\n### How to install syntax theme\n>```\n> apm install atom-dark-fusion-syntax\n>```\n\n\n---\nBattletested\n------------\n\n- JavaScript\n- Babel ES6 JavaScript **(New!)**\n- CoffeeScript\n- TypeScript **(New!)**\n- [React/JSX](https://atom.io/packages/react)\n- HTML\n- CSS / Less\n- JSON / CSON\n- [GLSL](https://atom.io/packages/language-glsl)\n- [Dot Files](https://atom.io/packages/language-dots)\n- Others\n\n\n---\n#### JavaScript syntax (with Nucleus Dark UI)\n\n![javascript screenshot](https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/master/screenshots/js.png)\n\n#### HTML syntax\n\n![html screenshot](https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/master/screenshots/html.png)\n\n#### JSON syntax\n\n![json screenshot](https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/master/screenshots/json.png)\n", 25 | "bugs": { 26 | "url": "https://github.com/maxgraey/atom-dark-fusion-syntax/issues" 27 | }, 28 | "homepage": "https://github.com/maxgraey/atom-dark-fusion-syntax", 29 | "_id": "atom-dark-fusion-syntax@1.0.2", 30 | "_shasum": "6a1b890d3660a207ee4711c87cb472fe905a08ae", 31 | "_resolved": "file:../d-115102-8327-12j8gk4/package.tgz", 32 | "_from": "../d-115102-8327-12j8gk4/package.tgz", 33 | "_atomModuleCache": { 34 | "version": 1, 35 | "dependencies": [], 36 | "extensions": { 37 | ".json": [ 38 | "package.json" 39 | ] 40 | }, 41 | "folders": [] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /screenshots/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/4860908d1b0ee4744c85179757a9c66b93cc7975/screenshots/html.png -------------------------------------------------------------------------------- /screenshots/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/4860908d1b0ee4744c85179757a9c66b93cc7975/screenshots/js.png -------------------------------------------------------------------------------- /screenshots/json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/4860908d1b0ee4744c85179757a9c66b93cc7975/screenshots/json.png -------------------------------------------------------------------------------- /screenshots/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MaxGraey/atom-dark-fusion-syntax/4860908d1b0ee4744c85179757a9c66b93cc7975/screenshots/logo.png -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | // These colors are specific to the theme. Do not use in a package! 2 | 3 | @white: hsl(190, 8%, 88%); 4 | @very-light-gray: hsl(211, 20%, 78%); 5 | @gray: #3d424b; 6 | @dark-gray: hsl(220, 10%, 35%); 7 | // @very-dark-gray: hsl(222, 15%, 22%); 8 | @very-dark-gray: #2F3542; 9 | 10 | @light-gray: saturate(mix(@very-light-gray, @very-dark-gray, 55%), 0%); 11 | 12 | // @cyan: hsl(186, 52%, 54%); 13 | @cyan: #44C0C6; 14 | 15 | @blue: @cyan; 16 | @purple: @cyan; 17 | //@orange: hsl(15, 79%, 66%); 18 | @orange: #FC8458; 19 | @green: #cae359; 20 | @red: hsl(0, 50%, 55%); 21 | //@light-orange: hsl(36, 43%, 70%); 22 | @light-orange: #D1BC92; 23 | -------------------------------------------------------------------------------- /styles/common.less: -------------------------------------------------------------------------------- 1 | .syntax--comment { 2 | color: @light-gray; 3 | } 4 | 5 | .syntax--entity { 6 | &.syntax--name.syntax--type { 7 | color: @light-orange; 8 | } 9 | 10 | &.syntax--other.syntax--inherited-class { 11 | color: @orange; 12 | } 13 | 14 | &.syntax--name { 15 | &.syntax--accessor { 16 | color: @white; 17 | } 18 | } 19 | } 20 | 21 | .syntax--keyword { 22 | color: @purple; 23 | 24 | &.syntax--control { 25 | color: @purple; 26 | } 27 | 28 | &.syntax--operator { 29 | color: @light-orange; 30 | 31 | &.syntax--new { 32 | color: @blue; 33 | } 34 | } 35 | 36 | &.syntax--other.syntax--special-method { 37 | color: @blue; 38 | } 39 | 40 | &.syntax--other.syntax--unit { 41 | color: @orange; 42 | } 43 | } 44 | 45 | .syntax--storage { 46 | color: @purple; 47 | 48 | &.syntax--type { 49 | color: @blue; 50 | 51 | &.syntax--flowtype { 52 | color: @very-light-gray; 53 | 54 | &.syntax--variable { 55 | color: @light-orange; 56 | } 57 | } 58 | } 59 | 60 | &.syntax--function { 61 | color: @blue; 62 | } 63 | } 64 | 65 | .syntax--constant { 66 | color: @orange; 67 | 68 | &.syntax--dom { 69 | color: @very-light-gray; 70 | } 71 | 72 | &.syntax--character.syntax--escape { 73 | color: @cyan; 74 | } 75 | 76 | &.syntax--numeric { 77 | /*color: @orange;*/ 78 | color: @light-orange; 79 | } 80 | 81 | &.syntax--other.syntax--color { 82 | color: @cyan; 83 | } 84 | 85 | &.syntax--other.syntax--symbol { 86 | color: @orange; 87 | } 88 | } 89 | 90 | .syntax--variable { 91 | color: @very-light-gray; 92 | 93 | &.syntax--interpolation { 94 | color: darken(@very-light-gray, 10%); 95 | } 96 | 97 | &.syntax--parameter.syntax--function { 98 | color: @light-orange; 99 | } 100 | 101 | &.syntax--other { 102 | color: @blue; 103 | 104 | &.syntax--instance, 105 | &.syntax--class { 106 | color: @light-orange 107 | } 108 | 109 | &.syntax--readwrite, 110 | &.syntax--property, 111 | &.syntax--object { 112 | color: @very-light-gray; 113 | } 114 | 115 | &.syntax--constant, 116 | &.syntax--shorthandpropertyname { 117 | color: @light-orange; 118 | } 119 | } 120 | 121 | &.syntax--type { 122 | color: @light-orange; 123 | } 124 | 125 | &.syntax--prototype { 126 | color: @orange; 127 | } 128 | 129 | &.syntax--this, 130 | &.syntax--super { 131 | color: @blue; 132 | } 133 | } 134 | 135 | .syntax--invalid.syntax--illegal { 136 | background-color: @red; 137 | color: @syntax-background-color; 138 | } 139 | 140 | .syntax--string { 141 | color: @orange; 142 | 143 | 144 | &.syntax--regexp { 145 | color: @cyan; 146 | 147 | .syntax--source.syntax--ruby.syntax--embedded { 148 | color: @orange; 149 | } 150 | } 151 | 152 | &.syntax--other.syntax--link { 153 | color: @red; 154 | } 155 | 156 | &.syntax--unquoted.syntax--js { 157 | color: @light-orange; 158 | } 159 | } 160 | 161 | .syntax--punctuation { 162 | &.syntax--definition { 163 | &.syntax--comment { 164 | color: @light-gray; 165 | } 166 | 167 | &.syntax--string, 168 | &.syntax--variable, 169 | &.syntax--parameters, 170 | &.syntax--array { 171 | color: @syntax-text-color; 172 | } 173 | 174 | &.syntax--string { 175 | &.syntax--begin, 176 | &.syntax--end { 177 | color: @red; 178 | } 179 | } 180 | 181 | &.syntax--heading, 182 | &.syntax--identity { 183 | color: @blue; 184 | } 185 | 186 | &.syntax--tag { 187 | color: saturate(spin(darken(@blue, 16%), 6), 13%); 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 | 201 | &.syntax--class { 202 | color: @very-light-gray; 203 | } 204 | 205 | &.syntax--section.syntax--embedded { 206 | color: darken(@red, 10%); 207 | } 208 | 209 | &.syntax--terminator, 210 | &.syntax--key-value { 211 | color: @light-orange; 212 | } 213 | } 214 | 215 | .syntax--support { 216 | &.syntax--class { 217 | color: @light-orange; 218 | } 219 | 220 | &.syntax--function { 221 | color: @light-orange; 222 | 223 | &.syntax--any-method { 224 | color: @very-light-gray; 225 | } 226 | 227 | &.syntax--misc { 228 | color: @orange; 229 | } 230 | } 231 | 232 | &.syntax--constant { 233 | color: @very-light-gray; 234 | } 235 | } 236 | 237 | .syntax--entity { 238 | &.syntax--name.syntax--function { 239 | //color: @blue; 240 | color: @white; 241 | } 242 | 243 | &.syntax--name.syntax--class, 244 | &.syntax--name.syntax--type.syntax--class { 245 | color: @light-orange; 246 | } 247 | 248 | &.syntax--name.syntax--section { 249 | color: @blue; 250 | } 251 | 252 | &.syntax--name.syntax--tag { 253 | color: @blue; 254 | } 255 | 256 | &.syntax--other.syntax--attribute-name { 257 | color: @light-orange; 258 | } 259 | } 260 | 261 | .syntax--meta { 262 | &.syntax--class { 263 | color: @light-orange; 264 | 265 | .syntax--inherited-class { 266 | color: @light-orange; 267 | } 268 | } 269 | 270 | &.syntax--link { 271 | color: @orange; 272 | } 273 | 274 | &.syntax--require { 275 | color: @blue; 276 | } 277 | 278 | &.syntax--selector { 279 | color: @purple; 280 | } 281 | 282 | &.syntax--separator { 283 | background-color: @gray; 284 | color: @syntax-text-color; 285 | } 286 | 287 | &.syntax--brace { 288 | color: @very-light-gray; 289 | } 290 | 291 | &.syntax--import, 292 | &.syntax--export { 293 | .syntax--module { 294 | color: @light-orange; 295 | } 296 | } 297 | .syntax--tag.syntax--decorator { 298 | .syntax--operator.syntax--decoration { 299 | color: @blue; 300 | } 301 | } 302 | } 303 | 304 | .syntax--none { 305 | color: @syntax-text-color; 306 | } 307 | 308 | .syntax--markup { 309 | &.syntax--bold { 310 | color: @orange; 311 | font-weight: bold; 312 | } 313 | 314 | &.syntax--changed { 315 | color: @purple; 316 | } 317 | 318 | &.syntax--deleted { 319 | color: @red; 320 | } 321 | 322 | &.syntax--italic { 323 | color: @purple; 324 | font-style: italic; 325 | } 326 | 327 | &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading { 328 | color: @blue; 329 | } 330 | 331 | &.syntax--inserted { 332 | color: @green; 333 | } 334 | 335 | &.syntax--list { 336 | color: @red; 337 | } 338 | 339 | &.syntax--quote { 340 | color: @orange; 341 | } 342 | 343 | &.syntax--raw.syntax--inline { 344 | color: @green; 345 | } 346 | } 347 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | atom-text-editor[mini] .scroll-view { 2 | padding-left: 1px; 3 | } 4 | 5 | atom-text-editor { 6 | -webkit-font-smoothing: subpixel-antialiased !important; 7 | 8 | background-color: @syntax-background-color; 9 | color: @syntax-text-color; 10 | 11 | .wrap-guide { 12 | background-color: @syntax-wrap-guide-color; 13 | } 14 | 15 | .indent-guide { 16 | color: @syntax-indent-guide-color; 17 | } 18 | 19 | .invisible-character { 20 | color: @syntax-invisible-character-color; 21 | } 22 | 23 | .gutter { 24 | background-color: @syntax-gutter-background-color; 25 | color: @syntax-gutter-text-color; 26 | 27 | .line-number { 28 | width: 100%; 29 | &.syntax--cursor-line { 30 | background-color: @syntax-gutter-background-color-selected; 31 | color: @syntax-gutter-text-color-selected; 32 | } 33 | 34 | &.syntax--cursor-line-no-selection { 35 | color: @syntax-gutter-text-color-selected; 36 | } 37 | } 38 | } 39 | 40 | .gutter .line-number.folded, 41 | .gutter .line-number:after, 42 | .fold-marker:after { 43 | color: @light-gray; 44 | } 45 | 46 | .invisible { 47 | color: @syntax-text-color; 48 | } 49 | 50 | .cursor { 51 | color: @syntax-cursor-color; 52 | } 53 | 54 | .selection .region { 55 | background-color: @syntax-selection-color; 56 | } 57 | } 58 | 59 | atom-text-editor .search-results .syntax--marker .syntax--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 .syntax--region { 65 | border: 1px solid @syntax-result-marker-color-selected; 66 | } 67 | -------------------------------------------------------------------------------- /styles/index.less: -------------------------------------------------------------------------------- 1 | 2 | // common 3 | @import "syntax-variables.less"; 4 | @import "editor.less"; 5 | 6 | // languages syntax 7 | @import "common.less"; 8 | @import "languages/css.less"; 9 | @import "languages/less.less"; 10 | @import "languages/sass.less"; 11 | @import "languages/ruby.less"; 12 | @import "languages/java.less"; 13 | @import "languages/coffee.less"; 14 | @import "languages/markup.less"; 15 | @import "languages/glsl.less"; 16 | @import "languages/typescript.less"; 17 | @import "languages/jsx.less"; 18 | @import "languages/html.less"; 19 | @import "languages/cpp.less"; 20 | @import "languages/csharp.less"; 21 | @import "languages/uno.less"; 22 | @import "languages/bash.less"; 23 | @import "languages/dots.less"; 24 | @import "languages/regexp.less"; 25 | -------------------------------------------------------------------------------- /styles/languages/bash.less: -------------------------------------------------------------------------------- 1 | .syntax--shell { 2 | &.syntax--builtin { 3 | &.syntax--function { 4 | color: @light-orange; 5 | } 6 | } 7 | 8 | &.syntax--definition { 9 | &.syntax--variable { 10 | color: @orange; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/languages/coffee.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--coffee { 2 | .syntax--variable.syntax--readwrite, 3 | .syntax--entity.syntax--name.syntax--function, 4 | .syntax--entity.syntax--name.syntax--class { 5 | color: @light-orange; 6 | } 7 | 8 | .syntax--meta.syntax--class .syntax--name { 9 | color: @white; 10 | } 11 | 12 | .syntax--support.syntax--function { 13 | color: @light-orange; 14 | } 15 | 16 | .syntax--variable.syntax--assignment, 17 | .syntax--embedded.syntax--source { 18 | color: @syntax-text-color; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /styles/languages/cpp.less: -------------------------------------------------------------------------------- 1 | .syntax--c { 2 | &.syntax--dot-access { 3 | color: @syntax-text-color; 4 | } 5 | } 6 | 7 | .syntax--objc { 8 | &.syntax--punctuation { 9 | &.syntax--scope { 10 | color: @syntax-text-color; 11 | } 12 | } 13 | 14 | &.syntax--support { 15 | &.syntax--function { 16 | color: @light-orange; 17 | } 18 | } 19 | } 20 | 21 | .syntax--objcpp { 22 | .syntax--support { 23 | color: @light-orange; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/languages/csharp.less: -------------------------------------------------------------------------------- 1 | .syntax--cs { 2 | &.syntax--meta { 3 | &.syntax--body { 4 | color: @syntax-text-color; 5 | } 6 | 7 | &.syntax--method, 8 | &.syntax--namespace { 9 | &.syntax--body { 10 | color: @syntax-text-color; 11 | } 12 | color: @light-orange; 13 | } 14 | 15 | &.syntax--keyword { 16 | &.syntax--using { 17 | color: @light-orange; 18 | 19 | &.syntax--other { 20 | color: @cyan; 21 | } 22 | } 23 | } 24 | 25 | .syntax--variable { 26 | &.syntax--parameter { 27 | &.syntax--function { 28 | color: @syntax-text-color; 29 | } 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/languages/css.less: -------------------------------------------------------------------------------- 1 | 2 | .syntax--source.syntax--css { 3 | .syntax--entity { 4 | &.syntax--tag { 5 | color: @blue; 6 | } 7 | &.syntax--tag.syntax--name { 8 | color: @blue; 9 | } 10 | &.syntax--name { 11 | color: @very-light-gray; 12 | } 13 | } 14 | 15 | .syntax--entity.syntax--attribute-name { 16 | color: @light-orange; 17 | } 18 | 19 | .syntax--constant:not(.syntax--numeric), 20 | .syntax--support.syntax--constant.syntax--property-value { 21 | color: @orange; 22 | } 23 | 24 | .syntax--function { 25 | .syntax--keyword { 26 | color: @blue; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /styles/languages/dots.less: -------------------------------------------------------------------------------- 1 | .syntax--dots { 2 | .syntax--constant { 3 | &.syntax--other { 4 | color: @blue; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /styles/languages/glsl.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--glsl { 2 | .syntax--storage { 3 | &.syntax--modifier { 4 | color: @blue; 5 | } 6 | } 7 | 8 | .syntax--support { 9 | &.syntax--function { 10 | color: @blue; 11 | } 12 | 13 | &.syntax--variable { 14 | color: @orange; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/languages/html.less: -------------------------------------------------------------------------------- 1 | .syntax--html, 2 | .syntax--sgml, 3 | .xhtml { 4 | &.syntax--doctype { 5 | color: @orange; 6 | } 7 | 8 | &.syntax--custom { 9 | &.syntax--elements { 10 | color: @light-orange; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/languages/java.less: -------------------------------------------------------------------------------- 1 | .syntax--java { 2 | &.syntax--source { 3 | .syntax--variable { 4 | &.syntax--definition { 5 | color: @very-light-gray; 6 | } 7 | } 8 | 9 | .syntax--meta { 10 | &.syntax--class { 11 | &.syntax--meta.syntax--body { 12 | color: @very-light-gray; 13 | } 14 | } 15 | 16 | &.syntax--package { 17 | .syntax--storage.syntax--modifier { 18 | color: @light-orange; 19 | } 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /styles/languages/jsx.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--jsx { 2 | .syntax--es { 3 | .syntax--meta.syntax--scope.syntax--tag { 4 | .syntax--embedded.syntax--expression { 5 | .syntax--punctuation.syntax--section { 6 | color: @light-orange; 7 | } 8 | } 9 | 10 | .syntax--meta.syntax--tag { 11 | color: saturate(spin(darken(@blue, 16%), 6), 13%); 12 | 13 | .syntax--embedded.syntax--expression { 14 | .syntax--source { 15 | color: @very-light-gray; 16 | } 17 | } 18 | } 19 | } 20 | } 21 | 22 | .syntax--keyword { 23 | color: @blue; 24 | 25 | &.syntax--accessor, 26 | &.syntax--assignment, 27 | &.syntax--operator { 28 | color: @light-orange; 29 | } 30 | } 31 | 32 | .syntax--embedded { 33 | .syntax--punctuation.syntax--section { 34 | color: @light-orange; 35 | } 36 | } 37 | 38 | .syntax--entity.syntax--tag { 39 | .syntax--class.syntax--component { 40 | color: @blue; 41 | } 42 | } 43 | 44 | .syntax--other { 45 | &.syntax--object.syntax--key { 46 | .syntax--js-label { 47 | color: @very-light-gray; 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /styles/languages/less.less: -------------------------------------------------------------------------------- 1 | 2 | .syntax--source.syntax--less { 3 | .syntax--support.syntax--function { 4 | color: @light-orange; 5 | } 6 | 7 | .syntax--punctuation.syntax--definition:not(.syntax--comment) { 8 | color: @orange; 9 | } 10 | 11 | .syntax--at-rule { 12 | .syntax--punctuation.syntax--definition.syntax--keyword { 13 | color: @blue; 14 | } 15 | } 16 | 17 | .syntax--variable { 18 | color: @very-light-gray; 19 | .syntax--punctuation.syntax--definition { 20 | color: @blue; 21 | } 22 | } 23 | 24 | .syntax--entity { 25 | color: @blue; 26 | 27 | &.syntax--pseudo-class { 28 | color: @blue; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /styles/languages/markup.less: -------------------------------------------------------------------------------- 1 | 2 | .syntax--source.syntax--gfm .syntax--markup { 3 | -webkit-font-smoothing: auto; 4 | &.syntax--heading { 5 | color: @orange; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /styles/languages/regexp.less: -------------------------------------------------------------------------------- 1 | .syntax--regexp { 2 | color: @orange !important; 3 | } 4 | -------------------------------------------------------------------------------- /styles/languages/ruby.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--ruby { 2 | 3 | .syntax--punctuation.syntax--section.syntax--scope.syntax--ruby { 4 | color: @very-light-gray; 5 | } 6 | .syntax--meta.syntax--embedded { 7 | color: @light-orange; 8 | } 9 | 10 | .syntax--variable.syntax--instance.syntax--ruby, 11 | .syntax--meta.syntax--embedded .syntax--variable.syntax--instance { 12 | color: @light-orange; 13 | 14 | .syntax--punctuation { 15 | color: @light-orange; 16 | } 17 | } 18 | 19 | .syntax--constant.syntax--symbol.syntax--hashkey { 20 | &,.syntax--punctuation.syntax--definition.syntax--constant.syntax--hashkey.syntax--ruby { 21 | color: @red; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /styles/languages/sass.less: -------------------------------------------------------------------------------- 1 | 2 | .syntax--source.syntax--sass, 3 | .syntax--source.syntax--scss { 4 | .syntax--mixin, 5 | .syntax--function { 6 | .syntax--entity { 7 | color: $white; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /styles/languages/typescript.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--ts { 2 | .syntax--storage { 3 | &.syntax--type { 4 | color: @blue; 5 | } 6 | } 7 | 8 | .syntax--entity { 9 | &.syntax--name { 10 | color: @blue; 11 | 12 | &.syntax--function { 13 | color: @white; 14 | } 15 | } 16 | 17 | &.syntax--instance { 18 | color: @light-orange; 19 | } 20 | 21 | &.syntax--inherited-class { 22 | color: @light-orange; 23 | } 24 | } 25 | 26 | .syntax--parameter { 27 | &.syntax--function { 28 | color: @very-light-gray; 29 | } 30 | } 31 | 32 | .syntax--language { 33 | &.syntax--variable { 34 | color: @blue; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /styles/languages/uno.less: -------------------------------------------------------------------------------- 1 | .syntax--uno { 2 | &.syntax--source { 3 | &.syntax--keyword { 4 | color: @cyan; 5 | } 6 | 7 | &.syntax--meta { 8 | &.syntax--class { 9 | &.syntax--body { 10 | color: @syntax-text-color; 11 | } 12 | 13 | &.syntax--identifier { 14 | .syntax--entity { 15 | &.syntax--name { 16 | color: @syntax-text-color; 17 | } 18 | } 19 | } 20 | 21 | .syntax--storage { 22 | &.syntax--type { 23 | color: @light-orange; 24 | } 25 | } 26 | } 27 | 28 | &.syntax--method { 29 | &.syntax--return-type { 30 | color: @light-orange; 31 | } 32 | } 33 | 34 | &.syntax--method-call { 35 | .syntax--meta { 36 | &.syntax--method { 37 | color: @light-orange; 38 | } 39 | } 40 | } 41 | 42 | &.syntax--meta { 43 | .syntax--meta { 44 | &.syntax--method { 45 | &.syntax--annotation { 46 | color: @light-orange; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /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: white; 9 | @syntax-selection-color: mix(@very-light-gray, @very-dark-gray, 15%); 10 | @syntax-background-color: @very-dark-gray; 11 | 12 | // Guide colors 13 | @syntax-wrap-guide-color: @dark-gray; 14 | @syntax-indent-guide-color: @dark-gray; 15 | @syntax-invisible-character-color: @gray; 16 | 17 | // For find and replace markers 18 | @syntax-result-marker-color: @light-gray; 19 | @syntax-result-marker-color-selected: white; 20 | 21 | // Gutter colors 22 | @syntax-gutter-text-color: desaturate(lighten(@very-dark-gray, 21%), 5%); 23 | @syntax-gutter-text-color-selected: lighten(@syntax-gutter-text-color, 10%); 24 | @syntax-gutter-background-color: saturate(darken(@very-dark-gray, 2%), 1%); 25 | @syntax-gutter-background-color-selected: @very-dark-gray; 26 | 27 | // For git diff info. i.e. in the gutter 28 | @syntax-color-renamed: @blue; 29 | @syntax-color-added: @green; 30 | @syntax-color-modified: @orange; 31 | @syntax-color-removed: @red; 32 | --------------------------------------------------------------------------------