Feature request: Expose code mirror settings

[dogoku]

Use cases for exposing CodeMirror's settings:

• Able to use a different theme (main reason)
• Control indentation rules (current indentation is very confusing for me)
• Control font size
• ???

[dogoku]

For those that are interested in a Dark theme, I created one based off Codemirror's Darcula theme.

In the mean time, to use it, you can use Local Overrides on Chrome in order to edit style-8d4060aaac0136e1cdee-22.css (or any css file really) or the Stylish extension on either Chrome or Firefox.

/* DARK THEME START */

  /** CODEMIRROR DARCULA THEME
      Name: IntelliJ IDEA default theme
      From IntelliJ IDEA by JetBrains
   */

  .cm-s-default  { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;}
  .cm-s-default.CodeMirror, #JSONEditor .CodeMirror { background: #2B2B2B !important; color: #A9B7C6 !important; } 

  .cm-s-default span.cm-meta { color: #BBB529; }
  .cm-s-default span.cm-number { color: #6897BB; }
  .cm-s-default span.cm-keyword { color: #CC7832; line-height: 1em; font-weight: bold; }  
  .cm-s-default span.cm-def { color: #A9B7C6; font-style: italic; }
  .cm-s-default span.cm-variable { color: #A9B7C6; }
  .cm-s-default span.cm-variable-2 { color: #A9B7C6; }
  .cm-s-default span.cm-variable-3 { color: #9876AA; }
  .cm-s-default span.cm-type { color: #AABBCC; font-weight: bold; }
  .cm-s-default span.cm-property { color: #FFC66D; }
  .cm-s-default span.cm-operator { color: #A9B7C6; }
  .cm-s-default span.cm-string { color: #6A8759; }
  .cm-s-default span.cm-string-2 { color: #6A8759; }
  .cm-s-default span.cm-comment { color: #61A151; font-style: italic; } 
  .cm-s-default span.cm-link { color: #CC7832; }
  .cm-s-default span.cm-atom { color: #CC7832; }
  .cm-s-default span.cm-error { color: #BC3F3C; }
  .cm-s-default span.cm-tag { color: #629755; font-weight: bold; font-style: italic; text-decoration: underline; }
  .cm-s-default span.cm-attribute { color: #6897bb; }
  .cm-s-default span.cm-qualifier { color: #6A8759; }
  .cm-s-default span.cm-bracket { color: #A9B7C6; }
  .cm-s-default span.cm-builtin { color: #FF9E59; }
  .cm-s-default span.cm-special { color: #FF9E59; }

  .cm-s-default .CodeMirror-cursor { border-left: 1px solid #A9B7C6; }  
  .cm-s-default .CodeMirror-activeline-background { background: #323232; } 
  .cm-s-default .CodeMirror-gutters { background: #313335 !important; border-right: 1px solid #313335 !important; } 
  .cm-s-default .CodeMirror-guttermarker { color: #FFEE80; }  
  .cm-s-default .CodeMirror-guttermarker-subtle { color: #D0D0D0; }  
  .cm-s-default .CodeMirrir-linenumber { color: #606366; } 
  .cm-s-default .CodeMirror-matchingbracket { background-color: #3B514D; color: #FFEF28 !important; font-weight: bold; } 

  .cm-s-default div.CodeMirror-selected { background: #444; }

   /* Autocomplete styles */
  .CodeMirror-hints.default, .CodeMirror-hint, .CodeMirror-Tern-tooltip {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    color: #9C9E9E !important;
    background-color: #3B3E3F !important;
    border-color: #888 !important;
  }

  .CodeMirror-hints.default .CodeMirror-hint-active {
    background-color: #494D4E !important;
    color: #9C9E9E !important;
  }

  /* AST Explorer Overrides */
  .output, .toolbar {
    background: #2B2B2B !important; color: #A9B7C6;
    border-color: #555 !important;
  }

  .output .toolbar > button {
    color: white !important;
    border-left: 1px solid #555 !important;
    border-right: 1px solid #555 !important;
  }

  .output .toolbar > button.active {
    border-color: #333  !important;
    background-color: #555  !important;
  }

  .splitpane-divider {
    background-color: #555 !important;
  }

  #Toolbar, #Toolbar .menuButton ul, #contribution {
      background-color: #313335 !important;
      color: #ddd !important;
      border-color: #555 !important;
  }

  #Toolbar > * {
    border-right: 1px solid #555 !important;
  }

  #info a, #contribution a {
    color: #268bd2;
  }

  #info a, #contribution a:visited {
    color: #b9f;
  }

  .toggleBtn {
    border: 1px solid #222;
    background-color: #555;
    color: #a9b7c6;
  }

  /* Scrollbars */
  .tree-visualization > ul::-webkit-scrollbar-track,
  .CodeMirror-hints.default::-webkit-scrollbar-track,
  .CodeMirror-vscrollbar::-webkit-scrollbar-track,
  .CodeMirror-hscrollbar::-webkit-scrollbar-track {
      box-shadow: 0 0 6px rgba(0,0,0,0.3) !important;
      background-color: #2b2b2b  !important;
  }

  .tree-visualization > ul::-webkit-scrollbar,
  .CodeMirror-hints.default::-webkit-scrollbar,
  .CodeMirror-vscrollbar::-webkit-scrollbar,
  .CodeMirror-hscrollbar::-webkit-scrollbar {
      width: 12px  !important;
      background-color: #2b2b2b  !important;
      border: 1px solid black !important;
  }

  .tree-visualization > ul::-webkit-scrollbar-thumb,
  .CodeMirror-hints.default::-webkit-scrollbar-thumb,
  .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
  .CodeMirror-hscrollbar::-webkit-scrollbar {
      background-color: #606060  !important;
  }

  .tree-visualization > ul::-webkit-scrollbar-thumb:hover,
  .CodeMirror-hints.default::-webkit-scrollbar-thumb:hover,
  .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
  .CodeMirror-hscrollbar::-webkit-scrollbar:hover {
      background-color: #666  !important;
  }

/* DARK THEME END */

[rajasegar]

@dogoku Codemirror has lot of settings which ones you want to expose. Will theme, indentation rules and font size suffice? @fkling I can submit a PR if the feature request sounds OK, Actually i tried to implement the Codemirror themes . Below are some screenshots.

[dogoku]

That's awesome! Honestly I'll be happy with just the themes (or even a single dark theme if you want to also style the tree and the rest of the UI as I did above).

The indentation issues I was having was due to issues on my side (company web isolation proxy). Given that no one else replied in 5 months, I don't see no reason to expose anything else :)

[chmiiller]

Thanks for that, it works with Stylish 🖤