From b67a6e88f6705c3f81158851ca48ef0bae20b8aa Mon Sep 17 00:00:00 2001
From: Marijn Haverbeke <marijnh@gmail.com>
Date: Mon, 23 Jun 2014 16:25:19 +0200
Subject: [PATCH] Allow theme-sensitive styling of gutter markers

Using the CodeMirror-guttermarker and CodeMirror-guttermarker-subtle CSS
classes to give the markers their color.

Issue #2602
---
 addon/fold/foldgutter.css         | 1 -
 addon/fold/foldgutter.js          | 2 +-
 lib/codemirror.css                | 6 ++++++
 theme/3024-day.css                | 4 ++++
 theme/3024-night.css              | 3 +++
 theme/ambiance.css                | 5 ++++-
 theme/base16-dark.css             | 2 ++
 theme/base16-light.css            | 2 ++
 theme/blackboard.css              | 2 ++
 theme/cobalt.css                  | 2 ++
 theme/erlang-dark.css             | 2 ++
 theme/lesser-dark.css             | 2 ++
 theme/mbo.css                     | 2 ++
 theme/midnight.css                | 2 ++
 theme/monokai.css                 | 2 ++
 theme/neo.css                     | 3 +++
 theme/night.css                   | 2 ++
 theme/paraiso-dark.css            | 2 ++
 theme/paraiso-light.css           | 2 ++
 theme/pastel-on-dark.css          | 2 ++
 theme/rubyblue.css                | 2 ++
 theme/solarized.css               | 3 +++
 theme/the-matrix.css              | 2 ++
 theme/tomorrow-night-eighties.css | 2 ++
 theme/twilight.css                | 2 ++
 theme/vibrant-ink.css             | 2 ++
 theme/xq-dark.css                 | 2 ++
 27 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/addon/fold/foldgutter.css b/addon/fold/foldgutter.css
index 49805393d..ad19ae2d3 100644
--- a/addon/fold/foldgutter.css
+++ b/addon/fold/foldgutter.css
@@ -10,7 +10,6 @@
 }
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
-  color: #555;
   cursor: pointer;
 }
 .CodeMirror-foldgutter-open:after {
diff --git a/addon/fold/foldgutter.js b/addon/fold/foldgutter.js
index 4db825929..bd31ec4d9 100644
--- a/addon/fold/foldgutter.js
+++ b/addon/fold/foldgutter.js
@@ -58,7 +58,7 @@
   function marker(spec) {
     if (typeof spec == "string") {
       var elt = document.createElement("div");
-      elt.className = spec;
+      elt.className = spec + " CodeMirror-guttermarker-subtle";
       return elt;
     } else {
       return spec.cloneNode(true);
diff --git a/lib/codemirror.css b/lib/codemirror.css
index d33dc05a6..0948ad594 100644
--- a/lib/codemirror.css
+++ b/lib/codemirror.css
@@ -40,6 +40,9 @@
   box-sizing: content-box;
 }
 
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
 /* CURSOR */
 
 .CodeMirror div.CodeMirror-cursor {
@@ -86,6 +89,7 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
   border-left: 1px solid #ccc;
   position: absolute;
 }
+
 /* DEFAULT THEME */
 
 .cm-s-default .cm-keyword {color: #708;}
@@ -121,6 +125,8 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 .cm-s-default .cm-error {color: #f00;}
 .cm-invalidchar {color: #f00;}
 
+/* Default styles for common addons */
+
 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 .CodeMirror-activeline-background {background: #e8f2ff;}
diff --git a/theme/3024-day.css b/theme/3024-day.css
index cbb9a4fa4..ebf46fb4a 100644
--- a/theme/3024-day.css
+++ b/theme/3024-day.css
@@ -10,8 +10,12 @@
 
 .cm-s-3024-day.CodeMirror {background: #f7f7f7; color: #3a3432;}
 .cm-s-3024-day div.CodeMirror-selected {background: #d6d5d4 !important;}
+
 .cm-s-3024-day .CodeMirror-gutters {background: #f7f7f7; border-right: 0px;}
+.cm-s-3024-day .CodeMirror-guttermarker { color: #db2d20; }
+.cm-s-3024-day .CodeMirror-guttermarker-subtle { color: #807d7c; }
 .cm-s-3024-day .CodeMirror-linenumber {color: #807d7c;}
+
 .cm-s-3024-day .CodeMirror-cursor {border-left: 1px solid #5c5855 !important;}
 
 .cm-s-3024-day span.cm-comment {color: #cdab53;}
diff --git a/theme/3024-night.css b/theme/3024-night.css
index 2c62e221b..631757fc4 100644
--- a/theme/3024-night.css
+++ b/theme/3024-night.css
@@ -11,7 +11,10 @@
 .cm-s-3024-night.CodeMirror {background: #090300; color: #d6d5d4;}
 .cm-s-3024-night div.CodeMirror-selected {background: #3a3432 !important;}
 .cm-s-3024-night .CodeMirror-gutters {background: #090300; border-right: 0px;}
+.cm-s-3024-night .CodeMirror-guttermarker { color: #db2d20; }
+.cm-s-3024-night .CodeMirror-guttermarker-subtle { color: #5c5855; }
 .cm-s-3024-night .CodeMirror-linenumber {color: #5c5855;}
+
 .cm-s-3024-night .CodeMirror-cursor {border-left: 1px solid #807d7c !important;}
 
 .cm-s-3024-night span.cm-comment {color: #cdab53;}
diff --git a/theme/ambiance.css b/theme/ambiance.css
index 48ba091fb..c844566ea 100644
--- a/theme/ambiance.css
+++ b/theme/ambiance.css
@@ -56,10 +56,13 @@
 
 .cm-s-ambiance .CodeMirror-linenumber {
   text-shadow: 0px 1px 1px #4d4d4d;
-  color: #222;
+  color: #111;
   padding: 0 5px;
 }
 
+.cm-s-ambiance .CodeMirror-guttermarker { color: #aaa; }
+.cm-s-ambiance .CodeMirror-guttermarker-subtle { color: #111; }
+
 .cm-s-ambiance .CodeMirror-lines .CodeMirror-cursor {
   border-left: 1px solid #7991E8;
 }
diff --git a/theme/base16-dark.css b/theme/base16-dark.css
index 3b7b21c7a..199997abd 100644
--- a/theme/base16-dark.css
+++ b/theme/base16-dark.css
@@ -11,6 +11,8 @@
 .cm-s-base16-dark.CodeMirror {background: #151515; color: #e0e0e0;}
 .cm-s-base16-dark div.CodeMirror-selected {background: #202020 !important;}
 .cm-s-base16-dark .CodeMirror-gutters {background: #151515; border-right: 0px;}
+.cm-s-base16-dark .CodeMirror-guttermarker { color: #ac4142; }
+.cm-s-base16-dark .CodeMirror-guttermarker-subtle { color: #505050; }
 .cm-s-base16-dark .CodeMirror-linenumber {color: #505050;}
 .cm-s-base16-dark .CodeMirror-cursor {border-left: 1px solid #b0b0b0 !important;}
 
diff --git a/theme/base16-light.css b/theme/base16-light.css
index 5aa4b5389..12ff2eb06 100644
--- a/theme/base16-light.css
+++ b/theme/base16-light.css
@@ -11,6 +11,8 @@
 .cm-s-base16-light.CodeMirror {background: #f5f5f5; color: #202020;}
 .cm-s-base16-light div.CodeMirror-selected {background: #e0e0e0 !important;}
 .cm-s-base16-light .CodeMirror-gutters {background: #f5f5f5; border-right: 0px;}
+.cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
+.cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
 .cm-s-base16-light .CodeMirror-linenumber {color: #b0b0b0;}
 .cm-s-base16-light .CodeMirror-cursor {border-left: 1px solid #505050 !important;}
 
diff --git a/theme/blackboard.css b/theme/blackboard.css
index 8b7608472..d7a2dc969 100644
--- a/theme/blackboard.css
+++ b/theme/blackboard.css
@@ -3,6 +3,8 @@
 .cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
 .cm-s-blackboard .CodeMirror-selected { background: #253B76 !important; }
 .cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; }
+.cm-s-blackboard .CodeMirror-guttermarker { color: #FBDE2D; }
+.cm-s-blackboard .CodeMirror-guttermarker-subtle { color: #888; }
 .cm-s-blackboard .CodeMirror-linenumber { color: #888; }
 .cm-s-blackboard .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }
 
diff --git a/theme/cobalt.css b/theme/cobalt.css
index b4a917736..47440531a 100644
--- a/theme/cobalt.css
+++ b/theme/cobalt.css
@@ -1,6 +1,8 @@
 .cm-s-cobalt.CodeMirror { background: #002240; color: white; }
 .cm-s-cobalt div.CodeMirror-selected { background: #b36539 !important; }
 .cm-s-cobalt .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-cobalt .CodeMirror-guttermarker { color: #ffee80; }
+.cm-s-cobalt .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
 .cm-s-cobalt .CodeMirror-linenumber { color: #d0d0d0; }
 .cm-s-cobalt .CodeMirror-cursor { border-left: 1px solid white !important; }
 
diff --git a/theme/erlang-dark.css b/theme/erlang-dark.css
index db56b1084..ff47d7f8d 100644
--- a/theme/erlang-dark.css
+++ b/theme/erlang-dark.css
@@ -1,6 +1,8 @@
 .cm-s-erlang-dark.CodeMirror { background: #002240; color: white; }
 .cm-s-erlang-dark div.CodeMirror-selected { background: #b36539 !important; }
 .cm-s-erlang-dark .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-erlang-dark .CodeMirror-guttermarker { color: white; }
+.cm-s-erlang-dark .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
 .cm-s-erlang-dark .CodeMirror-linenumber { color: #d0d0d0; }
 .cm-s-erlang-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
 
diff --git a/theme/lesser-dark.css b/theme/lesser-dark.css
index b8e77c279..a78247473 100644
--- a/theme/lesser-dark.css
+++ b/theme/lesser-dark.css
@@ -13,6 +13,8 @@ Ported to CodeMirror by Peter Kroon
 .cm-s-lesser-dark.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
 
 .cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
+.cm-s-lesser-dark .CodeMirror-guttermarker { color: #599eff; }
+.cm-s-lesser-dark .CodeMirror-guttermarker-subtle { color: #777; }
 .cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }
 
 .cm-s-lesser-dark span.cm-keyword { color: #599eff; }
diff --git a/theme/mbo.css b/theme/mbo.css
index bb52e6d17..4446c87a3 100644
--- a/theme/mbo.css
+++ b/theme/mbo.css
@@ -3,6 +3,8 @@
 .cm-s-mbo.CodeMirror {background: #2c2c2c; color: #ffffe9;}
 .cm-s-mbo div.CodeMirror-selected {background: #716C62 !important;}
 .cm-s-mbo .CodeMirror-gutters {background: #4e4e4e; border-right: 0px;}
+.cm-s-mbo .CodeMirror-guttermarker { color: white; }
+.cm-s-mbo .CodeMirror-guttermarker-subtle { color: grey; }
 .cm-s-mbo .CodeMirror-linenumber {color: #dadada;}
 .cm-s-mbo .CodeMirror-cursor {border-left: 1px solid #ffffec !important;}
 
diff --git a/theme/midnight.css b/theme/midnight.css
index 468d87daf..4567d2939 100644
--- a/theme/midnight.css
+++ b/theme/midnight.css
@@ -16,6 +16,8 @@
 
 .cm-s-midnight div.CodeMirror-selected {background: #314D67 !important;}
 .cm-s-midnight .CodeMirror-gutters {background: #0F192A; border-right: 1px solid;}
+.cm-s-midnight .CodeMirror-guttermarker { color: white; }
+.cm-s-midnight .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
 .cm-s-midnight .CodeMirror-linenumber {color: #D0D0D0;}
 .cm-s-midnight .CodeMirror-cursor {
     border-left: 1px solid #F8F8F0 !important;
diff --git a/theme/monokai.css b/theme/monokai.css
index 7ac601a13..548d2dfff 100644
--- a/theme/monokai.css
+++ b/theme/monokai.css
@@ -3,6 +3,8 @@
 .cm-s-monokai.CodeMirror {background: #272822; color: #f8f8f2;}
 .cm-s-monokai div.CodeMirror-selected {background: #49483E !important;}
 .cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
+.cm-s-monokai .CodeMirror-guttermarker { color: white; }
+.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
 .cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
 .cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
 
diff --git a/theme/neo.css b/theme/neo.css
index b013770b9..cecaaf280 100644
--- a/theme/neo.css
+++ b/theme/neo.css
@@ -32,6 +32,9 @@
   color:#e0e2e5;
 }
 
+.cm-s-neo .CodeMirror-guttermarker { color: #1d75b3; }
+.cm-s-neo .CodeMirror-guttermarker-subtle { color: #e0e2e5; }
+
 .cm-s-neo div.CodeMirror-cursor {
   width: auto;
   border: 0;
diff --git a/theme/night.css b/theme/night.css
index 016e55ee7..a0bf8cfa7 100644
--- a/theme/night.css
+++ b/theme/night.css
@@ -3,6 +3,8 @@
 .cm-s-night.CodeMirror { background: #0a001f; color: #f8f8f8; }
 .cm-s-night div.CodeMirror-selected { background: #447 !important; }
 .cm-s-night .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-night .CodeMirror-guttermarker { color: white; }
+.cm-s-night .CodeMirror-guttermarker-subtle { color: #bbb; }
 .cm-s-night .CodeMirror-linenumber { color: #f8f8f8; }
 .cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }
 
diff --git a/theme/paraiso-dark.css b/theme/paraiso-dark.css
index ddefc55d2..53dcdf7a2 100644
--- a/theme/paraiso-dark.css
+++ b/theme/paraiso-dark.css
@@ -11,6 +11,8 @@
 .cm-s-paraiso-dark.CodeMirror {background: #2f1e2e; color: #b9b6b0;}
 .cm-s-paraiso-dark div.CodeMirror-selected {background: #41323f !important;}
 .cm-s-paraiso-dark .CodeMirror-gutters {background: #2f1e2e; border-right: 0px;}
+.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
+.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
 .cm-s-paraiso-dark .CodeMirror-linenumber {color: #776e71;}
 .cm-s-paraiso-dark .CodeMirror-cursor {border-left: 1px solid #8d8687 !important;}
 
diff --git a/theme/paraiso-light.css b/theme/paraiso-light.css
index 8afb14be4..07ca32597 100644
--- a/theme/paraiso-light.css
+++ b/theme/paraiso-light.css
@@ -11,6 +11,8 @@
 .cm-s-paraiso-light.CodeMirror {background: #e7e9db; color: #41323f;}
 .cm-s-paraiso-light div.CodeMirror-selected {background: #b9b6b0 !important;}
 .cm-s-paraiso-light .CodeMirror-gutters {background: #e7e9db; border-right: 0px;}
+.cm-s-paraiso-light .CodeMirror-guttermarker { color: black; }
+.cm-s-paraiso-light .CodeMirror-guttermarker-subtle { color: #8d8687; }
 .cm-s-paraiso-light .CodeMirror-linenumber {color: #8d8687;}
 .cm-s-paraiso-light .CodeMirror-cursor {border-left: 1px solid #776e71 !important;}
 
diff --git a/theme/pastel-on-dark.css b/theme/pastel-on-dark.css
index 72a247527..7992ac7d2 100644
--- a/theme/pastel-on-dark.css
+++ b/theme/pastel-on-dark.css
@@ -19,6 +19,8 @@
 	border-right: 0px;
 	padding: 0 3px;
 }
+.cm-s-pastel-on-dark .CodeMirror-guttermarker { color: white; }
+.cm-s-pastel-on-dark .CodeMirror-guttermarker-subtle { color: #8F938F; }
 .cm-s-pastel-on-dark .CodeMirror-linenumber { color: #8F938F; }
 .cm-s-pastel-on-dark .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }
 .cm-s-pastel-on-dark span.cm-comment { color: #A6C6FF; }
diff --git a/theme/rubyblue.css b/theme/rubyblue.css
index 47fae0da9..534983894 100644
--- a/theme/rubyblue.css
+++ b/theme/rubyblue.css
@@ -1,6 +1,8 @@
 .cm-s-rubyblue.CodeMirror { background: #112435; color: white; }
 .cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; }
 .cm-s-rubyblue .CodeMirror-gutters { background: #1F4661; border-right: 7px solid #3E7087; }
+.cm-s-rubyblue .CodeMirror-guttermarker { color: white; }
+.cm-s-rubyblue .CodeMirror-guttermarker-subtle { color: #3E7087; }
 .cm-s-rubyblue .CodeMirror-linenumber { color: white; }
 .cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; }
 
diff --git a/theme/solarized.css b/theme/solarized.css
index 39fc83d7c..36d5f7904 100644
--- a/theme/solarized.css
+++ b/theme/solarized.css
@@ -146,6 +146,9 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
   color: #586e75;
   padding: 0 5px;
 }
+.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
+.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
+.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }
 
 .cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
   color: #586e75;
diff --git a/theme/the-matrix.css b/theme/the-matrix.css
index 0c3704a62..01474ca94 100644
--- a/theme/the-matrix.css
+++ b/theme/the-matrix.css
@@ -1,6 +1,8 @@
 .cm-s-the-matrix.CodeMirror { background: #000000; color: #00FF00; }
 .cm-s-the-matrix div.CodeMirror-selected { background: #2D2D2D !important; }
 .cm-s-the-matrix .CodeMirror-gutters { background: #060; border-right: 2px solid #00FF00; }
+.cm-s-the-matrix .CodeMirror-guttermarker { color: #0f0; }
+.cm-s-the-matrix .CodeMirror-guttermarker-subtle { color: white; }
 .cm-s-the-matrix .CodeMirror-linenumber { color: #FFFFFF; }
 .cm-s-the-matrix .CodeMirror-cursor { border-left: 1px solid #00FF00 !important; }
 
diff --git a/theme/tomorrow-night-eighties.css b/theme/tomorrow-night-eighties.css
index 85c2a4a78..841413546 100644
--- a/theme/tomorrow-night-eighties.css
+++ b/theme/tomorrow-night-eighties.css
@@ -11,6 +11,8 @@
 .cm-s-tomorrow-night-eighties.CodeMirror {background: #000000; color: #CCCCCC;}
 .cm-s-tomorrow-night-eighties div.CodeMirror-selected {background: #2D2D2D !important;}
 .cm-s-tomorrow-night-eighties .CodeMirror-gutters {background: #000000; border-right: 0px;}
+.cm-s-tomorrow-night-eighties .CodeMirror-guttermarker { color: #f2777a; }
+.cm-s-tomorrow-night-eighties .CodeMirror-guttermarker-subtle { color: #777; }
 .cm-s-tomorrow-night-eighties .CodeMirror-linenumber {color: #515151;}
 .cm-s-tomorrow-night-eighties .CodeMirror-cursor {border-left: 1px solid #6A6A6A !important;}
 
diff --git a/theme/twilight.css b/theme/twilight.css
index 19d6abadd..9ca50576d 100644
--- a/theme/twilight.css
+++ b/theme/twilight.css
@@ -2,6 +2,8 @@
 .cm-s-twilight .CodeMirror-selected { background: #323232 !important; } /**/
 
 .cm-s-twilight .CodeMirror-gutters { background: #222; border-right: 1px solid #aaa; }
+.cm-s-twilight .CodeMirror-guttermarker { color: white; }
+.cm-s-twilight .CodeMirror-guttermarker-subtle { color: #aaa; }
 .cm-s-twilight .CodeMirror-linenumber { color: #aaa; }
 .cm-s-twilight .CodeMirror-cursor { border-left: 1px solid white !important; }
 
diff --git a/theme/vibrant-ink.css b/theme/vibrant-ink.css
index 0206225bf..517728232 100644
--- a/theme/vibrant-ink.css
+++ b/theme/vibrant-ink.css
@@ -4,6 +4,8 @@
 .cm-s-vibrant-ink .CodeMirror-selected { background: #35493c !important; }
 
 .cm-s-vibrant-ink .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
+.cm-s-vibrant-ink .CodeMirror-guttermarker { color: white; }
+.cm-s-vibrant-ink .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
 .cm-s-vibrant-ink .CodeMirror-linenumber { color: #d0d0d0; }
 .cm-s-vibrant-ink .CodeMirror-cursor { border-left: 1px solid white !important; }
 
diff --git a/theme/xq-dark.css b/theme/xq-dark.css
index 4a0b2138c..116eccf21 100644
--- a/theme/xq-dark.css
+++ b/theme/xq-dark.css
@@ -23,6 +23,8 @@ THE SOFTWARE.
 .cm-s-xq-dark.CodeMirror { background: #0a001f; color: #f8f8f8; }
 .cm-s-xq-dark .CodeMirror-selected { background: #27007A !important; }
 .cm-s-xq-dark .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
+.cm-s-xq-dark .CodeMirror-guttermarker { color: #FFBD40; }
+.cm-s-xq-dark .CodeMirror-guttermarker-subtle { color: #f8f8f8; }
 .cm-s-xq-dark .CodeMirror-linenumber { color: #f8f8f8; }
 .cm-s-xq-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
 
-- 
GitLab