Skip to content

Instantly share code, notes, and snippets.

@mootari
Created May 24, 2020 19:49
Show Gist options
  • Save mootari/7b1b5a04250d31c7f193a757780700c2 to your computer and use it in GitHub Desktop.
Save mootari/7b1b5a04250d31c7f193a757780700c2 to your computer and use it in GitHub Desktop.
Monokai for ObservableHQ
/* ==UserStyle==
@name Monokai for Observable
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Overrides the Observable CodeMirror theme with Monokai.
@author -
==/UserStyle== */
@-moz-document domain("observablehq.com") {
/* Based on Sublime Text's Monokai theme */
.cm-s-observable.CodeMirror { background: #272822; color: #f8f8f2; }
.cm-s-observable div.CodeMirror-selected { background: #49483E; }
.cm-s-observable .CodeMirror-line::selection, .cm-s-observable .CodeMirror-line > span::selection, .cm-s-observable .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.cm-s-observable .CodeMirror-line::-moz-selection, .cm-s-observable .CodeMirror-line > span::-moz-selection, .cm-s-observable .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.cm-s-observable .CodeMirror-gutters { background: #272822; border-right: 0px; }
.cm-s-observable .CodeMirror-guttermarker { color: white; }
.cm-s-observable .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-observable .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-observable .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
.cm-s-observable span.cm-comment { color: #75715e; }
.cm-s-observable span.cm-atom { color: #ae81ff; }
.cm-s-observable span.cm-number { color: #ae81ff; }
.cm-s-observable span.cm-comment.cm-attribute { color: #97b757; }
.cm-s-observable span.cm-comment.cm-def { color: #bc9262; }
.cm-s-observable span.cm-comment.cm-tag { color: #bc6283; }
.cm-s-observable span.cm-comment.cm-type { color: #5998a6; }
.cm-s-observable span.cm-property, .cm-s-observable span.cm-attribute { color: #a6e22e; }
.cm-s-observable span.cm-keyword { color: #f92672; }
.cm-s-observable span.cm-builtin { color: #66d9ef; }
.cm-s-observable span.cm-string { color: #e6db74; }
.cm-s-observable span.cm-variable { color: #f8f8f2; }
.cm-s-observable span.cm-variable-2 { color: #9effff; }
.cm-s-observable span.cm-variable-3, .cm-s-observable span.cm-type { color: #66d9ef; }
.cm-s-observable span.cm-def { color: #fd971f; }
.cm-s-observable span.cm-bracket { color: #f8f8f2; }
.cm-s-observable span.cm-tag { color: #f92672; }
.cm-s-observable span.cm-header { color: #ae81ff; }
.cm-s-observable span.cm-link { color: #ae81ff; }
.cm-s-observable span.cm-error { background: #f92672; color: #f8f8f0; }
.cm-s-observable .CodeMirror-activeline-background { background: #373831; }
.cm-s-observable .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment