morning.css

:root {
  --base: #FDFDFE;
  --surface: #F1F1F4;
  --overlay: #D8DAE4;
  --soft: #8388AD;
  --slight: #5F6488;
  --text: #4E5377;

  --coral: #D26A5D;
  --violet:  #886CDB;
  --salmon: #F19A8E;
  --fennel: #3788BE;
  --sky: #7397DE;


  --highlight-low: #C1C3D6;
  --highlight-med: #AAB0D5;
  --highlight-high: #949ABE;
}
.CodeMirror {
  font-family: monaco, Consolas, Menlo, Courier, monospace;
  font-size: 16px;
  line-height: 1.5em;
  background-color: var(--base);
}
span {
  color: var(--soft);
}
.CodeMirror-gutters {
  background-color: var(--surface);
  border-right: 1px solid var(--overlay);
}
.CodeMirror-linenumber {
  color: var(--text);
}
.CodeMirror-guttermarker-slight {
  color: var(--fennel);
}
.CodeMirror-foldmarker {
  color: var(--coral);
  text-shadow: none;
}
.extras .icon svg {
  fill: var(--violet);
}
.extras .icon:hover {
  background-color: var(--overlay);
}
.cm-s-default .cm-comment {
  color: var(--soft);
}
.cm-s-default .cm-operator,
.cm-s-default .cm-property,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-variable {
  color: var(--sky);
}
.cm-s-default .cm-atom,
.cm-s-default .cm-number {
  color: var(--salmon);
}
.cm-s-default .cm-string,
.cm-s-default .cm-string-2 {
  color: var(--violet);
}
.CodeMirror-selected {
  background: var(--highlight-med) !important;
}