├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── LICENSE ├── README.md ├── sample.md ├── screenshot.png └── theme ├── notes-dark.css └── notes-dark ├── FiraMono-Bold.ttf ├── FiraMono-Regular.ttf └── codeblock.xydark.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Environment (please complete the following information):** 11 | - OS: [e.g. macOS 10.15.6] 12 | - Typora: [e.g. Version 0.9.9.34.2] 13 | - Notes Dark: [e.g. v1.6] 14 | 15 | **Describe the bug** 16 | A clear and concise description of what the bug is. 17 | 18 | **To Reproduce** 19 | Steps to reproduce the behavior or markdown sample. 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen or how you expected the markdown sample to render. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Additional context** 28 | Add any other context about the problem here. 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Arnaud de Surirey 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![screenshot](https://github.com/adesurirey/typora-notes-dark-theme/blob/master/screenshot.png) 2 | 3 | # Notes dark theme for Typora 4 | A dark theme inspired by Apple Notes app. 5 | 6 | ## Installation instructions 7 | - Download the [zipped project package](https://github.com/adesurirey/typora-notes-dark-theme/archive/master.zip). 8 | - Copy the `notes-dark.css` file and `notes-dark` folder to your Typora theme library. 9 | - Launch or restart Typora and choose `Notes Dark` from the theme menu. 10 | - **Pro tip:** watch this repository to be notified of new releases. 11 | -------------------------------------------------------------------------------- /sample.md: -------------------------------------------------------------------------------- 1 | # Notes Dark theme for Typora 2 | 3 | Regular, *italic*, **bold**, ==highlighted==, `monospace` and kbd 4 | 5 | ```javascript 6 | const [count, setCount] = useState(0); 7 | ``` 8 | 9 | It has [colored links]() 10 | 11 | ## Stripped tables 12 | 13 | | Option | Description | 14 | | ---------- | ---------------------------------------------------------- | 15 | | The option | The description of that option you wrote on the other cell | 16 | 17 | > This is a quote, also useful for document notes 18 | 19 | ### Tasks 20 | 21 | - [x] Something done 22 | - [ ] Something to do [^1] 23 | 24 | [^1]: Here is the footnote. 25 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adesurirey/typora-notes-dark-theme/55d95805960d280e696ad82d6748323021d49047/screenshot.png -------------------------------------------------------------------------------- /theme/notes-dark.css: -------------------------------------------------------------------------------- 1 | @import './notes-dark/codeblock.xydark.css'; 2 | 3 | @font-face { 4 | font-family: 'Fira Mono'; 5 | font-style: normal; 6 | font-weight: normal; 7 | src: local("Fira Mono Regular"), url("./notes-dark/FiraMono-Regular.ttf") format("truetype"); 8 | } 9 | 10 | @font-face { 11 | font-family: 'Fira Mono'; 12 | font-style: normal; 13 | font-weight: bold; 14 | src: local("Fira Mono Bold"), url("./notes-dark/FiraMono-Bold.ttf") format("truetype"); 15 | } 16 | 17 | :root { 18 | --primary-color: #fcba03; 19 | --primary-color-rgb: 252, 186, 3; 20 | 21 | --bg-color: #292929; 22 | --bg-color-dark: #1f1f1f; 23 | --dark-trait: #141414; 24 | --light-trait-100: #3d3d3d; 25 | --light-trait-200: #545454; 26 | --light-trait-300: #777; 27 | --light-trait-400: #8c8c8c; 28 | 29 | --text-color: #f8f8f2; 30 | --text-color-secondary: #d2d3d3; 31 | --text-highlight-color: #fff; 32 | --text-highlight-bg: rgba(var(--primary-color-rgb), 0.3); 33 | --select-text-bg-color: rgba(255, 255, 255, 0.2); 34 | --search-select-text-color: var(--text-highlight-color); 35 | --search-select-bg-color: var(--text-highlight-bg); 36 | 37 | --code-color: #f3b3f8; 38 | 39 | --border-radius: 3px; 40 | 41 | --font-size: 14px; 42 | --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; 43 | --monospace: 'Fira Mono', 'Cousine', 'Consolas', monospace; 44 | 45 | --heading-char-color: var(--light-trait-400); 46 | --color-popover-bg-color: var(--text-color); 47 | --rawblock-edit-panel-bd: var(--bg-color-dark); 48 | --control-text-color: var(--text-color); 49 | --meta-content-color: var(--primary-color); 50 | --primary-btn-border-color: var(--primary-color); 51 | --side-bar-bg-color: var(--bg-color-dark); 52 | --item-hover-bg-color: var(--bg-color); 53 | --item-hover-text-color: var(--text-highlight-color); 54 | --active-file-bg-color: var(--bg-color); 55 | --active-file-border-color: var(--bg-color); 56 | --window-border: 1px solid var(--bg-color); 57 | --focus-ring-color: transparent; 58 | --table-bg-darker-color: var(--bg-color-dark); 59 | --table-bg-color: var(--bg-color); 60 | } 61 | 62 | html { 63 | font-size: var(--font-size); 64 | } 65 | 66 | body { 67 | font-family: var(--font-family); 68 | -webkit-font-smoothing: antialiased; 69 | color: var(--text-color); 70 | line-height: 1.6; 71 | } 72 | 73 | #write { 74 | max-width: 860px; 75 | margin: 0 auto; 76 | padding: 30px; 77 | padding-bottom: 100px; 78 | } 79 | 80 | @media only screen and (min-width: 1400px) { 81 | #write { 82 | max-width: 1024px; 83 | } 84 | } 85 | 86 | @media only screen and (min-width: 1800px) { 87 | #write { 88 | max-width: 1200px; 89 | } 90 | } 91 | 92 | #write > ul:first-child, 93 | #write > ol:first-child { 94 | margin-top: 30px; 95 | } 96 | 97 | a { 98 | color: var(--primary-color); 99 | } 100 | 101 | h1, 102 | h2, 103 | h3, 104 | h4, 105 | h5, 106 | h6 { 107 | position: relative; 108 | margin-top: 1rem; 109 | margin-bottom: 1rem; 110 | font-weight: bold; 111 | line-height: 1.4; 112 | cursor: text; 113 | } 114 | 115 | h1:hover a.anchor, 116 | h2:hover a.anchor, 117 | h3:hover a.anchor, 118 | h4:hover a.anchor, 119 | h5:hover a.anchor, 120 | h6:hover a.anchor { 121 | text-decoration: none; 122 | } 123 | 124 | h1 tt, 125 | h1 code, 126 | h2 tt, 127 | h2 code, 128 | h3 tt, 129 | h3 code, 130 | h4 tt, 131 | h4 code, 132 | h5 tt, 133 | h5 code, 134 | h6 tt, 135 | h6 code { 136 | font-size: inherit; 137 | } 138 | 139 | h1 { 140 | padding-bottom: 0.3em; 141 | font-size: 2.2em; 142 | line-height: 1.3; 143 | } 144 | 145 | h2 { 146 | padding-bottom: 0.3em; 147 | font-size: 1.75em; 148 | line-height: 1.225; 149 | } 150 | 151 | h3 { 152 | font-size: 1.4em; 153 | line-height: 1.43; 154 | } 155 | 156 | h4 { 157 | font-size: 1.2em; 158 | } 159 | 160 | h5 { 161 | font-size: 1em; 162 | } 163 | 164 | h6 { 165 | font-size: 1em; 166 | color: var(--light-trait-300); 167 | } 168 | 169 | p, 170 | blockquote, 171 | ul, 172 | ol, 173 | dl, 174 | table { 175 | margin: 0.8em 0; 176 | } 177 | 178 | li > ol, 179 | li > ul { 180 | margin: 0 0; 181 | } 182 | 183 | hr { 184 | height: 2px; 185 | padding: 0; 186 | margin: 16px 0; 187 | background-color: var(--light-trait-100); 188 | border: 0 none; 189 | overflow: hidden; 190 | box-sizing: content-box; 191 | } 192 | 193 | sup.md-footnote { 194 | background-color: var(--light-trait-400); 195 | color: var(--light-trait-100); 196 | } 197 | 198 | li p.first { 199 | display: inline-block; 200 | } 201 | 202 | ul, 203 | ol { 204 | padding-left: 30px; 205 | } 206 | 207 | ul:first-child, 208 | ol:first-child { 209 | margin-top: 0; 210 | } 211 | 212 | ul:last-child, 213 | ol:last-child { 214 | margin-bottom: 0; 215 | } 216 | 217 | mark, 218 | .ty-file-search-match-text, 219 | .md-search-hit { 220 | background: var(--search-select-bg-color); 221 | color: var(--search-select-text-color); 222 | } 223 | .md-search-hit * { 224 | color: var(--search-select-text-color); 225 | } 226 | .cm-search-hit.CodeMirror-selectedtext, 227 | .md-search-hit.md-search-select, 228 | .md-search-select { 229 | outline: 2px solid var(--primary-color); 230 | } 231 | .outline-item.select, .ty-search-item-line.select, .ty-search-item.select { 232 | outline-width: 2px; 233 | } 234 | .outline-item.select { 235 | outline-offset: 0px; 236 | } 237 | 238 | blockquote { 239 | margin-left: -14px; 240 | margin-right: -14px; 241 | border-radius: var(--border-radius); 242 | border-left: 4px solid var(--light-trait-300); 243 | background-color: var(--light-trait-100); 244 | padding: 7px 14px 7px 10px; 245 | } 246 | 247 | blockquote blockquote { 248 | padding-right: 0; 249 | } 250 | 251 | table { 252 | padding: 0; 253 | word-break: initial; 254 | } 255 | 256 | table tr { 257 | border-top: 1px solid var(--dark-trait); 258 | margin: 0; 259 | padding: 0; 260 | } 261 | 262 | table tr:nth-child(2n), 263 | thead { 264 | background-color: var(--side-bar-bg-color); 265 | } 266 | 267 | table tr th { 268 | font-weight: bold; 269 | border: 1px solid var(--dark-trait); 270 | border-bottom: 0; 271 | margin: 0; 272 | padding: 6px 13px; 273 | } 274 | 275 | table tr td { 276 | border: 1px solid var(--dark-trait); 277 | margin: 0; 278 | padding: 6px 13px; 279 | } 280 | 281 | table tr th:first-child, 282 | table tr td:first-child { 283 | margin-top: 0; 284 | } 285 | 286 | table tr th:last-child, 287 | table tr td:last-child { 288 | margin-bottom: 0; 289 | } 290 | 291 | kbd { 292 | font-size: 0.875rem; 293 | background: var(--bg-color-dark); 294 | border: 1px solid var(--dark-trait); 295 | box-shadow: 0 2px 0 var(--dark-trait); 296 | color: var(--text-color-secondary); 297 | } 298 | 299 | .md-fences, 300 | code, 301 | tt { 302 | border: 1px solid var(--dark-trait); 303 | background-color: var(--bg-color-dark); 304 | border-radius: var(--border-radius); 305 | padding: 2px 4px 0px 4px; 306 | font-size: 0.9em; 307 | font-family: var(--monospace); 308 | } 309 | 310 | .md-fences { 311 | margin-bottom: 15px; 312 | margin-top: 15px; 313 | padding-top: 8px; 314 | padding-bottom: 6px; 315 | background-color: var(--side-bar-bg-color); 316 | } 317 | 318 | #write pre.md-meta-block { 319 | padding: 1rem; 320 | font-size: 85%; 321 | line-height: 1.45; 322 | background-color: var(--bg-color-dark); 323 | border: 0; 324 | border-radius: var(--border-radius); 325 | color: var(--light-trait-400); 326 | margin-top: 0 !important; 327 | } 328 | 329 | #write .mathjax-block .md-rawblock-tooltip { 330 | border-top-left-radius: var(--border-radius); 331 | border-top-right-radius: var(--border-radius); 332 | } 333 | 334 | #write .mathjax-block .md-math-container { 335 | border-top-left-radius: var(--border-radius); 336 | border-bottom-right-radius: var(--border-radius); 337 | border-bottom-left-radius: var(--border-radius); 338 | } 339 | 340 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 341 | border-top-left-radius: var(--border-radius); 342 | } 343 | 344 | .md-mathjax-midline { 345 | background-color: var(--bg-color); 346 | color: var(--text-color); 347 | } 348 | 349 | .md-inline-math script { 350 | color: var(--code-color); 351 | } 352 | 353 | code { 354 | padding: 0 2px 0 2px; 355 | } 356 | 357 | .CodeMirror-lines { 358 | padding-left: 4px; 359 | } 360 | 361 | .code-tooltip { 362 | box-shadow: none; 363 | border-radius: var(--border-radius); 364 | } 365 | 366 | #write .code-tooltip { 367 | bottom: initial; 368 | top: 100%; 369 | left: initial; 370 | right: -1px; 371 | background: var(--bg-color-dark); 372 | border: 1px solid var(--dark-trait); 373 | border-top-left-radius: 0; 374 | border-top-right-radius: 0; 375 | border-top: 0; 376 | font-family: var(--monospace); 377 | } 378 | 379 | #write .md-mathblock-panel .code-tooltip { 380 | right: 0; 381 | border: none; 382 | } 383 | 384 | #write .md-task-list-item > input { 385 | -webkit-appearance: initial; 386 | display: block; 387 | position: absolute; 388 | border: 1px solid var(--light-trait-200); 389 | border-radius: 50%; 390 | margin-top: 0.2rem; 391 | margin-left: -1.8rem; 392 | height: 1.2rem; 393 | width: 1.2rem; 394 | transition: background 0.3s; 395 | } 396 | 397 | #write .md-task-list-item > input:focus { 398 | outline: none; 399 | box-shadow: none; 400 | } 401 | 402 | #write .md-task-list-item > input[checked] { 403 | background: var(--primary-color); 404 | border: 1px solid var(--primary-color); 405 | } 406 | 407 | #write .md-task-list-item > input[checked]::before { 408 | content: '✓'; 409 | position: absolute; 410 | top: 0; 411 | left: 0; 412 | height: 100%; 413 | width: 100%; 414 | text-align: center; 415 | color: var(--dark-trait); 416 | font-size: 12px; 417 | font-weight: 500; 418 | } 419 | 420 | .md-image > .md-meta { 421 | border-radius: var(--border-radius); 422 | padding: 2px 0px 0px 4px; 423 | font-size: 0.9em; 424 | color: inherit; 425 | } 426 | 427 | .md-toc { 428 | margin-top: 20px; 429 | padding-bottom: 20px; 430 | } 431 | 432 | /* Source mode */ 433 | .CodeMirror.cm-s-typora-default *, 434 | .cm-s-typora-default * { 435 | background: inherit; 436 | color: var(--text-color); 437 | font-family: var(--monospace); 438 | font-size: var(--font-size) !important; 439 | font-style: normal; 440 | font-weight: normal; 441 | } 442 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 443 | border-left: 2px solid var(--light-trait-400); 444 | } 445 | 446 | .sidebar-tabs { 447 | border-bottom: none; 448 | } 449 | 450 | .outline-expander { 451 | width: 1.5rem; 452 | vertical-align: initial; 453 | } 454 | .outline-expander:before, 455 | .outline-expander:hover:before, 456 | .outline-item-open > .outline-item > .outline-expander:before, 457 | .outline-item-open > .outline-item > .outline-expander:hover:before { 458 | content: "\f125"; 459 | transition: transform 125ms ease-in-out; 460 | } 461 | .outline-item-open > .outline-item > .outline-expander:hover:before, 462 | .outline-item-open > .outline-item > .outline-expander:before { 463 | transform: rotate(90deg); 464 | } 465 | .outline-label:hover { 466 | text-decoration: none; 467 | } 468 | 469 | #toc-dropmenu { 470 | background: var(--bg-color-dark); 471 | } 472 | #toc-dropmenu .outline-title { 473 | font-size: 1rem; 474 | text-transform: uppercase; 475 | } 476 | .dropdown-menu .divider { 477 | display: none; 478 | } 479 | 480 | .context-menu { 481 | background-color: var(--bg-color-dark); 482 | } 483 | 484 | .file-node-background { 485 | height: 31px; 486 | } 487 | .file-node-content:hover .file-node-icon, 488 | .file-node-content:hover .file-node-open-state { 489 | visibility: visible; 490 | } 491 | .file-node-icon { 492 | margin-right: 8px; 493 | } 494 | .file-library-node:not(.file-node-root):focus>.file-node-content { 495 | outline: none; 496 | } 497 | 498 | /* New file animation */ 499 | .blink-area { 500 | animation: none; 501 | } 502 | 503 | .file-list-item-summary { 504 | font-size: var(--font-size); 505 | font-family: var(--font-family); 506 | } 507 | 508 | #md-searchpanel input { 509 | border-radius: var(--border-radius); 510 | box-shadow: none; 511 | } 512 | #md-searchpanel input:focus { 513 | box-shadow: none; 514 | border-color: var(--meta-content-color); 515 | } 516 | #md-searchpanel .search-type-selection { 517 | width: auto; 518 | } 519 | #md-searchpanel .btn:not(.close-btn):hover { 520 | box-shadow: none; 521 | } 522 | 523 | .mac-seamless-mode #typora-sidebar { 524 | background-color: var(--side-bar-bg-color); 525 | } 526 | 527 | #md-notification .btn { 528 | border: 0; 529 | } 530 | 531 | .megamenu-menu { 532 | background-color: var(--bg-color-dark); 533 | } 534 | 535 | .megamenu-opened header { 536 | background-image: none; 537 | } 538 | 539 | /* mega menu */ 540 | .megamenu-content, 541 | .megamenu-opened header { 542 | background: var(--bg-color); 543 | } 544 | 545 | .megamenu-opened .megamenu-content { 546 | visibility: visible; 547 | opacity: 1; 548 | animation: none; 549 | background-color: inherit; 550 | } 551 | 552 | #recent-file-panel tbody tr:nth-child(2n) { 553 | background-color: var(--table-bg-darker-color); 554 | } 555 | 556 | #recent-file-panel tbody tr:nth-child(2n + 1) { 557 | background-color: var(--table-bg-color); 558 | } 559 | 560 | #recent-file-panel-action-btn { 561 | background-color: var(--bg-color); 562 | } 563 | 564 | .long-btn:hover { 565 | background-color: var(--item-hover-bg-color); 566 | color: var(--item-hover-text-color) !important; 567 | } 568 | 569 | #recent-file-panel-action-btn:hover{ 570 | background-color: var(--item-hover-bg-color); 571 | color: var(--item-hover-text-color) !important; 572 | } 573 | 574 | .mouse-entered #top-titlebar .toolbar-icon.btn:hover, 575 | .mouse-entered #top-titlebar .toolbar-icon.btn.hover { 576 | background-color: var(--item-hover-bg-color); 577 | } 578 | 579 | #m-import-local:hover .preference-item-hint { 580 | color: var(--item-hover-text-color); 581 | } 582 | 583 | .typora-sourceview-on #toggle-sourceview-btn { 584 | background-color: var(--bg-color-dark); 585 | } -------------------------------------------------------------------------------- /theme/notes-dark/FiraMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adesurirey/typora-notes-dark-theme/55d95805960d280e696ad82d6748323021d49047/theme/notes-dark/FiraMono-Bold.ttf -------------------------------------------------------------------------------- /theme/notes-dark/FiraMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adesurirey/typora-notes-dark-theme/55d95805960d280e696ad82d6748323021d49047/theme/notes-dark/FiraMono-Regular.ttf -------------------------------------------------------------------------------- /theme/notes-dark/codeblock.xydark.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .cm-s-inner .cm-variable { 4 | color: #fff; 5 | } 6 | 7 | .cm-s-inner .cm-keyword, 8 | .cm-s-inner .cm-property { 9 | color: #6699CC; 10 | } 11 | 12 | .cm-s-inner .cm-tag { 13 | color: #EC5F67; 14 | } 15 | 16 | .CodeMirror div.CodeMirror-cursor { 17 | border-left: 1px solid #b8bfc6; 18 | z-index: 3; 19 | } 20 | 21 | .cm-s-inner .cm-string { 22 | color: #99C794; 23 | } 24 | 25 | .cm-s-inner .cm-comment, 26 | .cm-s-inner.cm-comment { 27 | color: #65737E; 28 | } 29 | 30 | .cm-s-inner .cm-header, 31 | .cm-s-inner .cm-def, 32 | .cm-s-inner.cm-header, 33 | .cm-s-inner.cm-def, 34 | .cm-s-inner .cm-attribute, 35 | .cm-s-inner .cm-operator { 36 | color: #C594C5; 37 | } 38 | 39 | .cm-s-inner .cm-quote, 40 | .cm-s-inner.cm-quote { 41 | color: #99C794; 42 | } 43 | 44 | .cm-s-inner .cm-hr { 45 | color: #d8d5d5; 46 | } 47 | 48 | .cm-s-inner .cm-link { 49 | color: #d3d3ef; 50 | } 51 | 52 | .cm-s-inner .cm-negative { 53 | color: #EC5F67; 54 | } 55 | 56 | .cm-s-inner .cm-positive { 57 | color: #99C794; 58 | } 59 | 60 | .cm-s-inner .cm-string-2 { 61 | color: #EC5F67; 62 | } 63 | 64 | .cm-s-inner .cm-meta, 65 | .cm-s-inner .cm-qualifier { 66 | color: #b7b3b3; 67 | } 68 | 69 | .cm-s-inner .cm-builtin { 70 | color: #f3b3f8; 71 | } 72 | 73 | .cm-s-inner .cm-bracket { 74 | color: #5FB3B3; 75 | } 76 | 77 | .cm-s-inner .cm-atom, 78 | .cm-s-inner.cm-atom { 79 | color: #84B6CB; 80 | } 81 | 82 | .cm-s-inner .cm-number { 83 | color: #F99157; 84 | } 85 | 86 | .cm-s-inner .cm-variable { 87 | color: #b8bfc6; 88 | } 89 | 90 | .cm-s-inner .cm-variable-2 { 91 | color: #9FBAD5; 92 | } 93 | 94 | .cm-s-inner .cm-variable-3 { 95 | color: #1cc685; 96 | } 97 | 98 | .CodeMirror-selectedtext, 99 | .CodeMirror-selected { 100 | background: #4a89dc; 101 | color: #fff !important; 102 | text-shadow: none; 103 | } 104 | 105 | .CodeMirror-gutters { 106 | border-right: none; 107 | } --------------------------------------------------------------------------------