├── .gitignore ├── LICENSE ├── README.md ├── docs ├── duotone.css ├── index.html ├── palette.js ├── screenshot.png └── update.sh ├── index.less ├── package.json └── styles ├── colors.less ├── editor.less ├── palette.less └── syntax-variables.less /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 simurai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > Note: This theme is __deprecated__. Take a look at [tone-syntax](https://atom.io/packages/tone-syntax) that is somewhat similar. 2 | 3 | # DuoTone Dark Space Theme 4 | 5 | A double-hue syntax theme for Atom. 6 | 7 | ![DuoTone](https://github.com/simurai/duotone-dark-space-syntax/raw/master/docs/screenshot.png) 8 | 9 | DuoTone themes use only 2 hues (8 shades in total). It __tones down__ less important parts (like punctuation and brackets) and highlights only the __important__ ones. This leads to a more calm color scheme, but still lets you find the stuff you're looking for. 10 | 11 | ## Language support 12 | 13 | DuoTone themes are optimized for many languages: 14 | 15 | > C, Clojure, CoffeeScript, C#, CSS, GF Markdown, Go, Haskell, HTML, Java, JavaScript, JSON, Less, Perl, PHP, Python, Ruby, SASS, SCSS, Stylus, XML, YAML... 16 | 17 | See the list of [all languages](https://github.com/simurai/duotone-syntax/tree/master/styles/languages). 18 | 19 | 20 | ## Variations 21 | 22 | Here a list of all [DuoTone themes](https://atom.io/themes/search?utf8=%E2%9C%93&q=keyword:duotone). Or at least the ones that have the `duotone` keyword added. :grin: 23 | 24 | 25 | ### Issues and contributing 26 | 27 | If you would like to create a new __Issue__ or __PR__, please do so in: 28 | 29 | - __this repo__ if it's about __color__ changes, like in `colors.less` or `syntax-variables.less`. 30 | - __[DuoTone master template](https://github.com/simurai/duotone-syntax)__ if it's about __everything else__, like in improving language support. Changes will trickle down into this theme too. 31 | -------------------------------------------------------------------------------- /docs/duotone.css: -------------------------------------------------------------------------------- 1 | atom-text-editor, 2 | :host { 3 | color: #8686cb; 4 | background-color: #24242e; 5 | } 6 | atom-text-editor .line.cursor-line, 7 | :host .line.cursor-line { 8 | background-color: rgba(63, 63, 80, 0.26); 9 | } 10 | atom-text-editor .invisible, 11 | :host .invisible { 12 | color: #8686cb; 13 | } 14 | atom-text-editor .cursor, 15 | :host .cursor { 16 | border-color: #ff8b52; 17 | border-left-width: 2px; 18 | } 19 | atom-text-editor .selection .region, 20 | :host .selection .region { 21 | background-color: #3f3f50; 22 | } 23 | atom-text-editor .bracket-matcher .region, 24 | :host .bracket-matcher .region { 25 | border-bottom: 1px solid #ff8b52; 26 | } 27 | atom-text-editor .invisible-character, 28 | :host .invisible-character { 29 | color: #3a3a4a; 30 | -webkit-font-smoothing: antialiased; 31 | } 32 | atom-text-editor .indent-guide, 33 | :host .indent-guide { 34 | color: #3a3a4a; 35 | } 36 | atom-text-editor .wrap-guide, 37 | :host .wrap-guide { 38 | background-color: #3a3a4a; 39 | } 40 | atom-text-editor .find-result .region.region.region, 41 | :host .find-result .region.region.region, 42 | atom-text-editor .current-result .region.region.region, 43 | :host .current-result .region.region.region { 44 | border-radius: 0px; 45 | background-color: rgba(255, 139, 82, 0.16); 46 | transition: border-color 0.4s; 47 | } 48 | atom-text-editor .find-result .region.region.region, 49 | :host .find-result .region.region.region { 50 | border: 2px solid transparent; 51 | } 52 | atom-text-editor .current-result .region.region.region, 53 | :host .current-result .region.region.region { 54 | border: 2px solid #ff8b52; 55 | transition-duration: .1s; 56 | } 57 | atom-text-editor .gutter .line-number, 58 | :host .gutter .line-number { 59 | color: #5b5b7b; 60 | -webkit-font-smoothing: antialiased; 61 | } 62 | atom-text-editor .gutter .line-number.git-line-removed:before, 63 | :host .gutter .line-number.git-line-removed:before { 64 | bottom: -3px; 65 | } 66 | atom-text-editor .gutter .line-number.git-line-removed:after, 67 | :host .gutter .line-number.git-line-removed:after { 68 | content: ""; 69 | position: absolute; 70 | left: 0px; 71 | bottom: 0px; 72 | width: 25px; 73 | border-bottom: 1px dotted rgba(224, 82, 82, 0.5); 74 | pointer-events: none; 75 | } 76 | atom-text-editor .gutter .line-number.cursor-line, 77 | :host .gutter .line-number.cursor-line { 78 | color: #8686cb; 79 | background-color: #2b2b36; 80 | } 81 | atom-text-editor .gutter .line-number.cursor-line-no-selection, 82 | :host .gutter .line-number.cursor-line-no-selection { 83 | background-color: transparent; 84 | } 85 | atom-text-editor .gutter .line-number .icon-right, 86 | :host .gutter .line-number .icon-right { 87 | color: #8686cb; 88 | } 89 | atom-text-editor .gutter .line-number.folded, 90 | :host .gutter .line-number.folded, 91 | atom-text-editor .gutter .line-number:after, 92 | :host .gutter .line-number:after, 93 | atom-text-editor .fold-marker:after, 94 | :host .fold-marker:after { 95 | color: #8686cb; 96 | } 97 | .uno-1 { 98 | color: #bebeef; 99 | } 100 | .uno-2 { 101 | color: #8686cb; 102 | } 103 | .uno-3 { 104 | color: #7272a1; 105 | } 106 | .uno-4 { 107 | color: #5b5b7b; 108 | } 109 | .uno-5 { 110 | color: #49495a; 111 | } 112 | .duo-1 { 113 | color: #fe7734; 114 | } 115 | .duo-2 { 116 | color: #b06845; 117 | } 118 | .duo-3 { 119 | color: #644c40; 120 | } 121 | .meta { 122 | color: #49495a; 123 | } 124 | .html.elements, 125 | .entity, 126 | .tag, 127 | .function-call { 128 | color: #bebeef; 129 | } 130 | .attribute-name, 131 | .character.escape { 132 | color: #7272a1; 133 | } 134 | .support { 135 | color: #5b5b7b; 136 | } 137 | .variable { 138 | color: #7272a1; 139 | } 140 | .string, 141 | .constant, 142 | .storage.type { 143 | color: #fe7734; 144 | } 145 | .keyword, 146 | .storage { 147 | color: #b06845; 148 | } 149 | .punctuation, 150 | .bracket, 151 | .brace { 152 | color: #49495a; 153 | } 154 | .string .punctuation { 155 | color: #644c40; 156 | } 157 | .comment { 158 | color: #5b5b7b; 159 | font-style: italic; 160 | } 161 | .bold { 162 | font-weight: bold; 163 | } 164 | .italic { 165 | font-style: italic; 166 | } 167 | .c .parens, 168 | .c .block { 169 | color: #8686cb; 170 | } 171 | .c .parens .punctuation, 172 | .c .block .punctuation, 173 | .c .parens .bracket, 174 | .c .block .bracket, 175 | .c .parens .brace, 176 | .c .block .brace { 177 | color: #49495a; 178 | } 179 | .c .parens .string .punctuation, 180 | .c .block .string .punctuation { 181 | color: #644c40; 182 | } 183 | .c .comment { 184 | color: #644c40; 185 | } 186 | .source.clojure .expression { 187 | color: #fe7734; 188 | } 189 | .source.clojure .expression .punctuation { 190 | color: #49495a; 191 | } 192 | .source.clojure .symbol { 193 | color: #8686cb; 194 | } 195 | .source.clojure .vector { 196 | color: #5b5b7b; 197 | } 198 | .coffee.source { 199 | color: #5b5b7b; 200 | } 201 | .source.cs .meta { 202 | color: #5b5b7b; 203 | } 204 | .source.cs .method { 205 | color: #8686cb; 206 | } 207 | .css.source { 208 | color: #49495a; 209 | } 210 | .css.support.property-name { 211 | color: #7272a1; 212 | } 213 | .css.attribute-name.id, 214 | .css.attribute-name.class, 215 | .css.attribute-name.parent-selector { 216 | color: #bebeef; 217 | } 218 | .css.unit { 219 | color: #b06845; 220 | } 221 | .css.function { 222 | color: #644c40; 223 | } 224 | .css.punctuation.terminator { 225 | color: #644c40; 226 | } 227 | .css.at-rule { 228 | color: #bebeef; 229 | } 230 | .css.at-rule .keyword.punctuation { 231 | color: inherit; 232 | } 233 | .gfm { 234 | color: #bebeef; 235 | } 236 | .gfm .punctuation, 237 | .gfm .bracket, 238 | .gfm .brace { 239 | color: #49495a; 240 | } 241 | .gfm .string .punctuation { 242 | color: #644c40; 243 | } 244 | .gfm .link { 245 | color: #8686cb; 246 | } 247 | .gfm.markup { 248 | color: #8686cb; 249 | } 250 | .gfm.markup.bold { 251 | font-weight: bold; 252 | } 253 | .gfm.markup.italic { 254 | font-style: italic; 255 | } 256 | .gfm.markup.strike { 257 | color: #49495a; 258 | text-decoration: line-through; 259 | } 260 | .gfm.markup.raw { 261 | color: #fe7734; 262 | } 263 | .gfm.markup.raw .support, 264 | .gfm.markup.code .support { 265 | color: #5b5b7b; 266 | } 267 | .gfm.comment { 268 | color: #5b5b7b; 269 | } 270 | .gfm.comment.quote { 271 | color: #8686cb; 272 | } 273 | .gfm.table { 274 | color: #fe7734; 275 | } 276 | .gfm.table .border, 277 | .gfm.table .pipe { 278 | color: #49495a; 279 | } 280 | .gfm.variable, 281 | .gfm.entity { 282 | color: #fe7734; 283 | } 284 | .gfm.support { 285 | color: #b06845; 286 | } 287 | .gfm.heading-1, 288 | .gfm.heading-2, 289 | .gfm.heading-3 { 290 | color: #fe7734; 291 | } 292 | .gfm.heading-4, 293 | .gfm.heading-5, 294 | .gfm.heading-6 { 295 | color: #b06845; 296 | } 297 | .haskell.source { 298 | color: #8686cb; 299 | } 300 | .haskell.source .punctuation, 301 | .haskell.source .bracket, 302 | .haskell.source .brace { 303 | color: #49495a; 304 | } 305 | .haskell.source .string .punctuation { 306 | color: #644c40; 307 | } 308 | .html.meta { 309 | color: #49495a; 310 | } 311 | .html.embedded .meta, 312 | .html.doctype, 313 | .html.text { 314 | color: #5b5b7b; 315 | } 316 | .html .string .id { 317 | color: #fe7734; 318 | } 319 | .jade.text, 320 | .jade .constant.name.attribute.tag { 321 | color: #5b5b7b; 322 | } 323 | .jade .meta.control.flow { 324 | color: #8686cb; 325 | } 326 | .jade .attribute-name.id { 327 | color: #fe7734; 328 | } 329 | .java .method { 330 | color: #8686cb; 331 | } 332 | .java .method .punctuation, 333 | .java .method .bracket, 334 | .java .method .brace { 335 | color: #49495a; 336 | } 337 | .java .method .string .punctuation { 338 | color: #644c40; 339 | } 340 | .java .dereference { 341 | color: #5b5b7b; 342 | } 343 | .js.source { 344 | color: #8686cb; 345 | } 346 | .js.source .punctuation, 347 | .js.source .bracket, 348 | .js.source .brace { 349 | color: #49495a; 350 | } 351 | .js.source .string .punctuation { 352 | color: #644c40; 353 | } 354 | .json .string { 355 | color: #8686cb; 356 | } 357 | .json .string .punctuation { 358 | color: #49495a; 359 | } 360 | .json .value > .string { 361 | color: #fe7734; 362 | } 363 | .json .value > .string .punctuation { 364 | color: #49495a; 365 | } 366 | .json .value .constant { 367 | color: #b06845; 368 | } 369 | .less.variable:first-child { 370 | color: #8686cb; 371 | } 372 | .less .mixin { 373 | color: #b06845; 374 | } 375 | .mediawiki { 376 | color: #bebeef; 377 | } 378 | .mediawiki .punctuation, 379 | .mediawiki .bracket, 380 | .mediawiki .brace { 381 | color: #49495a; 382 | } 383 | .mediawiki .string .punctuation { 384 | color: #644c40; 385 | } 386 | .mediawiki .wiki-link { 387 | color: #8686cb; 388 | } 389 | .mediawiki .heading { 390 | color: #fe7734; 391 | } 392 | .mediawiki .function-call { 393 | color: #b06845; 394 | } 395 | .mediawiki .value { 396 | color: #fe7734; 397 | } 398 | .mediawiki .fix_this_later { 399 | color: #8686cb; 400 | } 401 | .mediawiki .pipe, 402 | .mediawiki .link, 403 | .mediawiki .tag { 404 | color: #49495a; 405 | } 406 | .php .string-contents { 407 | color: #fe7734; 408 | } 409 | .sass .at-rule .at-rule, 410 | .sass .at-rule .at-rule > .punctuation { 411 | color: #bebeef; 412 | } 413 | .sass .mixin + .function, 414 | .sass .include + .function { 415 | color: #b06845; 416 | } 417 | .sass.property-value { 418 | color: #fe7734; 419 | } 420 | .sass.property-value .function { 421 | color: #8686cb; 422 | } 423 | .sass.property-value .punctuation { 424 | color: #49495a; 425 | } 426 | .sass.variable.parameter.url { 427 | color: #fe7734; 428 | } 429 | .sass.class, 430 | .sass.parent-selector-suffix { 431 | color: #bebeef; 432 | } 433 | .scss .at-rule .at-rule, 434 | .scss .at-rule .at-rule > .punctuation { 435 | color: #bebeef; 436 | } 437 | .scss .mixin + .function, 438 | .scss .include + .function { 439 | color: #b06845; 440 | } 441 | .scss.property-value { 442 | color: #fe7734; 443 | } 444 | .scss.property-value .function { 445 | color: #8686cb; 446 | } 447 | .scss.property-value .punctuation { 448 | color: #49495a; 449 | } 450 | .scss.variable.parameter.url { 451 | color: #fe7734; 452 | } 453 | .scss.class, 454 | .scss.parent-selector-suffix { 455 | color: #bebeef; 456 | } 457 | .slim.meta { 458 | color: #49495a; 459 | } 460 | .slim.text { 461 | color: #5b5b7b; 462 | } 463 | .slim .string .id { 464 | color: #fe7734; 465 | } 466 | .stylus .function .name { 467 | color: #b06845; 468 | } 469 | .tex .other { 470 | color: #b06845; 471 | } 472 | .tex .reference { 473 | color: #8686cb; 474 | } 475 | .plain .text { 476 | color: #bebeef; 477 | } 478 | .yaml .tag { 479 | color: #8686cb; 480 | } 481 | .yaml .constant { 482 | color: #b06845; 483 | } 484 | .yaml .punctuation { 485 | color: #49495a; 486 | } 487 | atom-text-editor::shadow [data-screen-row="1"] .text { 488 | color: #bebeef; 489 | } 490 | atom-text-editor::shadow [data-screen-row="2"] .text { 491 | color: #8686cb; 492 | } 493 | atom-text-editor::shadow [data-screen-row="3"] .text { 494 | color: #7272a1; 495 | } 496 | atom-text-editor::shadow [data-screen-row="4"] .text { 497 | color: #5b5b7b; 498 | } 499 | atom-text-editor::shadow [data-screen-row="5"] .text { 500 | color: #49495a; 501 | } 502 | atom-text-editor::shadow [data-screen-row="7"] .text { 503 | color: #fe7734; 504 | } 505 | atom-text-editor::shadow [data-screen-row="8"] .text { 506 | color: #b06845; 507 | } 508 | atom-text-editor::shadow [data-screen-row="9"] .text { 509 | color: #644c40; 510 | } 511 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DuoTone Pallete 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

15 |
16 | Duo 19 |
20 |
21 | Tone 25 |
26 |
darkSPACE
27 |

28 | 29 |
30 |
uno-1
31 |
uno-2
32 |
uno-3
33 |
uno-4
34 |
uno-5
35 | 36 |
duo-1
37 |
duo-2
38 |
duo-3
39 | 40 |
background
41 |
42 |
43 | 44 |
45 | 46 | 
47 |   
<html>
  <head>
    <title>DuoTone</title>
    <meta charset=“utf-8”>
    <link rel=“stylesheet” href=“styles.css”>
  </head>
  <body>Hi</body>
</html>

48 |
49 | 50 | 
51 |   
body {
  padding: 1em;
  color: hsl(0, 0%, 100%);
  background-color: coral;
}
 
/* Viewport based padding */
@media (max-width: 800px) {
  body { padding: 4vh 8vw; }
}

52 |
53 | 54 | 
55 |   
// Get a desaturated base color
function getBaseColor() {
  let baseColor = chroma.random()
  while (chroma(baseColor).hsl()[1] > 1 / 3) {
    baseColor = chroma(baseColor).desaturate(1 / 8).hex()
  }
  return baseColor
}

56 |
57 | 58 |
59 | 60 | 64 | 65 | 66 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /docs/palette.js: -------------------------------------------------------------------------------- 1 | function parseColor(color) { 2 | var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); }); 3 | return { 4 | hex: "#" + arr.slice(0, 3).map(toHex).join(""), 5 | opacity: arr.length == 4 ? arr[3] : 1 6 | }; 7 | } 8 | function toHex(int) { 9 | var hex = int.toString(16); 10 | return hex.length == 1 ? "0" + hex : hex; 11 | } 12 | 13 | colors = document.getElementsByClassName('palette-color'); 14 | editor = document.getElementsByTagName('atom-text-editor')[0]; 15 | for (var i = 0; i < colors.length; i++) { 16 | if (i == colors.length - 1) { 17 | // for the last color, use the background color 18 | rgb_col = window.getComputedStyle(editor).backgroundColor; 19 | } else { 20 | rgb_col = window.getComputedStyle(colors[i]).color; 21 | } 22 | hex_col = parseColor(rgb_col); 23 | text = colors[i].textContent; 24 | colors[i].innerHTML = '

' + text + '

' + hex_col.hex + ''; 25 | } 26 | -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simurai/duotone-dark-space-syntax/4613cd0d548930323150869971e047f984e533f1/docs/screenshot.png -------------------------------------------------------------------------------- /docs/update.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -o nounset 4 | set -o errexit 5 | #set -o xtrace 6 | 7 | # 8 | # Regerate the palette's duotone.css file. Use when the duotone 9 | # less files change. 10 | # 11 | # I couldn't get the browser embeded less.js stuff to work locally - 12 | # there are unsolvable CORS issues with the file:// protocol. This 13 | # means that you would need to be running a local web server to view 14 | # the page. 15 | # 16 | 17 | dir=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd) 18 | 19 | lessc "$dir/../index.less" "$dir/duotone.css" 20 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | 2 | // DuoTone syntax theme 3 | 4 | @import (reference) "styles/syntax-variables"; 5 | @import 'styles/editor'; 6 | @import 'styles/palette'; 7 | 8 | // This imports the language styles from the duotone-syntax npm package 9 | // If you test locally, make sure to first run `apm install` 10 | @import 'node_modules/duotone-syntax/styles/languages/_index'; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "duotone-dark-space-syntax", 3 | "theme": "syntax", 4 | "version": "2.1.0", 5 | "description": "A dark blue-red DuoTone syntax theme", 6 | "keywords": [ 7 | "dark", 8 | "blue", 9 | "red", 10 | "duotone", 11 | "syntax" 12 | ], 13 | "repository": "https://github.com/simurai/duotone-dark-space-syntax", 14 | "license": "MIT", 15 | "engines": { 16 | "atom": ">=1.13.0 <2.0.0" 17 | }, 18 | "dependencies": { 19 | "duotone-syntax": "^2.1.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | 2 | // DuoTone dark Space 3 | 4 | // Hues ----------------------------------- 5 | @syntax-uno: 240; 6 | @syntax-duo: 20; 7 | 8 | 9 | // Language colors ----------------------------------- 10 | 11 | // Uno hue 12 | @uno-1: hsl(@syntax-uno, 60%, 84%); 13 | @uno-2: hsl(@syntax-uno, 40%, 66%); 14 | @uno-3: hsl(@syntax-uno, 20%, 54%); 15 | @uno-4: hsl(@syntax-uno, 15%, 42%); 16 | @uno-5: hsl(@syntax-uno, 10%, 32%); 17 | 18 | // Duo hue 19 | @duo-1: hsl(@syntax-duo, 99%, 60%); 20 | @duo-2: hsl(@syntax-duo, 44%, 48%); 21 | @duo-3: hsl(@syntax-duo, 22%, 32%); 22 | 23 | 24 | // Base colors ----------------------------------- 25 | @syntax-fg: @uno-2; 26 | @syntax-bg: hsl(@syntax-uno, 12%, 16%); 27 | @syntax-accent: hsl(@syntax-duo, 100%, 66%); 28 | @syntax-guide: lighten(@syntax-bg, 10%); 29 | @syntax-selection: lighten(@syntax-bg, 12%); 30 | @syntax-selection-gutter: lighten(@syntax-bg, 3%); 31 | @syntax-cursor-line: fade(@syntax-selection, 26%); // needs to be semi-transparent to show serach results 32 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | 2 | // Editor styles (background, gutter, guides) 3 | 4 | atom-text-editor { 5 | color: @syntax-text-color; 6 | background-color: @syntax-background-color; 7 | 8 | .line.cursor-line { 9 | background-color: @syntax-cursor-line; 10 | } 11 | 12 | .invisible { 13 | color: @syntax-text-color; 14 | } 15 | 16 | .cursor { 17 | border-color: @syntax-cursor-color; 18 | border-left-width: 2px; 19 | } 20 | 21 | .selection .region { 22 | background-color: @syntax-selection-color; 23 | } 24 | 25 | .bracket-matcher .region { 26 | border-bottom: 1px solid @syntax-accent; 27 | } 28 | 29 | .invisible-character { 30 | color: @syntax-invisible-character-color; 31 | -webkit-font-smoothing: antialiased; 32 | } 33 | 34 | .indent-guide { 35 | color: @syntax-indent-guide-color; 36 | } 37 | 38 | .wrap-guide { 39 | background-color: @syntax-wrap-guide-color; 40 | } 41 | 42 | // find + replace 43 | .find-result .region.region.region, 44 | .current-result .region.region.region { 45 | border-radius: 0px; 46 | background-color: @syntax-result-marker-color; 47 | transition: border-color .4s; 48 | } 49 | .find-result .region.region.region { 50 | border: 2px solid transparent; 51 | } 52 | .current-result .region.region.region { 53 | border: 2px solid @syntax-result-marker-color-selected; 54 | transition-duration: .1s; 55 | } 56 | 57 | .gutter { 58 | 59 | .line-number { 60 | color: @syntax-gutter-text-color; 61 | -webkit-font-smoothing: antialiased; 62 | 63 | &.git-line-removed:before { 64 | bottom: -3px; 65 | } 66 | &.git-line-removed:after { 67 | content: ""; 68 | position: absolute; 69 | left: 0px; 70 | bottom: 0px; 71 | width: 25px; 72 | border-bottom: 1px dotted fade(@syntax-color-removed, 50%); 73 | pointer-events: none; 74 | } 75 | 76 | &.cursor-line { 77 | color: @syntax-gutter-text-color-selected; 78 | background-color: @syntax-gutter-background-color-selected; 79 | } 80 | 81 | &.cursor-line-no-selection { 82 | background-color: transparent; 83 | } 84 | 85 | .icon-right { 86 | color: @syntax-text-color; 87 | } 88 | } 89 | } 90 | 91 | .gutter .line-number.folded, 92 | .gutter .line-number:after, 93 | .fold-marker:after { 94 | color: @syntax-gutter-text-color-selected; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /styles/palette.less: -------------------------------------------------------------------------------- 1 | 2 | // DuoTone palette 3 | 4 | .uno-1 { color: @uno-1; } // ..... Strong 5 | .uno-2 { color: @uno-2; } // .... | 6 | .uno-3 { color: @uno-3; } // ... | 7 | .uno-4 { color: @uno-4; } // .. | 8 | .uno-5 { color: @uno-5; } // . Weak 9 | 10 | .duo-1 { color: @duo-1; } // .... Strong 11 | .duo-2 { color: @duo-2; } // ... | 12 | .duo-3 { color: @duo-3; } // . Weak 13 | -------------------------------------------------------------------------------- /styles/syntax-variables.less: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | 4 | // Official Syntax Variables ----------------------------------- 5 | 6 | // General colors 7 | @syntax-text-color: @syntax-fg; 8 | @syntax-cursor-color: @syntax-accent; 9 | @syntax-selection-color: @syntax-selection; 10 | @syntax-selection-flash-color: @syntax-accent; 11 | @syntax-background-color: @syntax-bg; 12 | 13 | // Guide colors 14 | @syntax-wrap-guide-color: @syntax-guide; 15 | @syntax-indent-guide-color: @syntax-guide; 16 | @syntax-invisible-character-color: @syntax-guide; 17 | 18 | // For find and replace markers 19 | @syntax-result-marker-color: fade(@syntax-accent, 16%); 20 | @syntax-result-marker-color-selected: @syntax-accent; 21 | 22 | // Gutter colors 23 | @syntax-gutter-text-color: @uno-4; 24 | @syntax-gutter-text-color-selected: @uno-2; 25 | @syntax-gutter-background-color: transparent; 26 | @syntax-gutter-background-color-selected: @syntax-selection-gutter; 27 | 28 | // For git diff info. i.e. in the gutter 29 | @syntax-color-renamed: hsl(208, 100%, 60%); 30 | @syntax-color-added: hsl(150, 60%, 54%); 31 | @syntax-color-modified: hsl(40, 60%, 70%); 32 | @syntax-color-removed: hsl(0, 70%, 60%); 33 | 34 | // For language entity colors 35 | @syntax-color-variable: @uno-2; 36 | @syntax-color-constant: @duo-1; 37 | @syntax-color-property: @uno-3; 38 | @syntax-color-value: @duo-1; 39 | @syntax-color-function: @duo-1; 40 | @syntax-color-method: @duo-1; 41 | @syntax-color-class: @duo-1; 42 | @syntax-color-keyword: @duo-2; 43 | @syntax-color-tag: @uno-1; 44 | @syntax-color-attribute:@uno-2; 45 | @syntax-color-import: @duo-2; 46 | @syntax-color-snippet: @duo-2; 47 | --------------------------------------------------------------------------------