Allow theme-sensitive styling of gutter markers

marijnh · marijnh · commit b67a6e88f670 · 2014-06-23T16:25:19.000+02:00
Using the CodeMirror-guttermarker and CodeMirror-guttermarker-subtle CSS classes to give the markers their color. Issue #2602
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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; }
 

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,6 @@`
`10`	`10`	`}`
`11`	`11`	`.CodeMirror-foldgutter-open,`
`12`	`12`	`.CodeMirror-foldgutter-folded {`
`13`		`- color: #555;`
`14`	`13`	`cursor: pointer;`
`15`	`14`	`}`
`16`	`15`	`.CodeMirror-foldgutter-open:after {`