use atom dark theme for codeMirror
This commit is contained in:
btzr-io
parent
1f554c8e20
commit
2109685d5a
3 changed files with 137 additions and 29 deletions
|
|
@ -32,7 +32,7 @@ class CodeViewer extends React.PureComponent<Props> {
|
|||
// Auto detect syntax with file contentType
|
||||
mode: contentType,
|
||||
// Adaptive theme
|
||||
theme: theme === 'dark' ? 'dark' : 'default',
|
||||
theme: theme === 'dark' ? 'one-dark' : 'default',
|
||||
// Hide the cursor
|
||||
readOnly: true,
|
||||
// Styled text selection
|
||||
|
|
|
|||
|
|
@ -56,8 +56,9 @@
|
|||
|
||||
.CodeMirror-code {
|
||||
font-size: 1em;
|
||||
font-weight: 350;
|
||||
line-height: 1.5em;
|
||||
font-family: inconsolata, monospace;
|
||||
font-family: Menlo, Consolas, 'DejaVu Sans Mono', inconsolata, monospace;
|
||||
letter-spacing: 0.3px;
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,147 @@
|
|||
/*
|
||||
Dark-theme
|
||||
https://github.com/FarhadG/code-mirror-themes/blob/master/themes/made-of-code.css
|
||||
Name: one-dark 1.1.1
|
||||
Author: Török Ádám (http://github.com/Aerobird98)
|
||||
Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
|
||||
*/
|
||||
.CodeMirror .cm-s-dark {
|
||||
--color-property: #7ed6df;
|
||||
--color-string: #ff7979;
|
||||
--color-keyword: #ff7979;
|
||||
|
||||
/* basic */
|
||||
.CodeMirror.cm-s-one-dark {
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.CodeMirror.cm-s-dark .CodeMirror-selected {
|
||||
background: #007dff80;
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-lines {
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror.cm-s-dark .cm-comment {
|
||||
color: #54576b;
|
||||
background: #00000000;
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-cursor {
|
||||
border-left: 2px solid #56b6c2 !important;
|
||||
}
|
||||
.CodeMirror.cm-s-dark .cm-keyword {
|
||||
color: var(--color-keyword);
|
||||
/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-matchingbracket,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-matchingtag {
|
||||
border-bottom: 2px solid #56b6c2;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.CodeMirror.cm-s-dark .cm-string {
|
||||
color: #f6e58d;
|
||||
background: #102622fa;
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-nonmatchingbracket {
|
||||
border-bottom: 2px solid #e06c75;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.CodeMirror.cm-s-dark .cm-property {
|
||||
color: var(--color-property);
|
||||
/* addon: fold/foldgutter.js */
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldmarker,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-open,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-folded {
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
color: #5c6370 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.CodeMirror.cm-s-dark .cm-atom {
|
||||
color: #f1d950;
|
||||
/* addon: selection/active-line.js */
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-activeline-background {
|
||||
background-color: rgba(153, 187, 255, 0.04);
|
||||
}
|
||||
.CodeMirror.cm-s-dark .cm-number {
|
||||
color: #f1d950;
|
||||
/* basic syntax */
|
||||
.CodeMirror.cm-s-one-dark .cm-header {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-dark .cm-operator {
|
||||
color: var(--color-keyword);
|
||||
.CodeMirror.cm-s-one-dark .cm-quote {
|
||||
color: #5c6370;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-dark .CodeMirror-linenumber {
|
||||
color: #54576b;
|
||||
.CodeMirror.cm-s-one-dark .cm-negative {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-positive {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-strong {
|
||||
color: #d19a66;
|
||||
font-weight: bold;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-header .cm-strong {
|
||||
color: #d19a66;
|
||||
font-weight: bold;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-em {
|
||||
color: #c678dd;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-header .cm-em {
|
||||
color: #c678dd;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-tag {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-attribute {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-link {
|
||||
color: #98c379;
|
||||
border-bottom: solid 1px #98c379;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-builtin {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-keyword {
|
||||
color: #c678dd;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-def {
|
||||
color: #e5c07b;
|
||||
} /* original: #d19a66; */
|
||||
.CodeMirror.cm-s-one-dark .cm-atom {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-number {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-property {
|
||||
color: #56b6c2;
|
||||
} /* original: #abb2bf */
|
||||
.CodeMirror.cm-s-one-dark .cm-qualifier {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-variable {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-string {
|
||||
color: #98c379;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-punctuation {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-operator {
|
||||
color: #56b6c2;
|
||||
} /* original: #abb2bf */
|
||||
.CodeMirror.cm-s-one-dark .cm-meta {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-bracket {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-comment {
|
||||
color: #5c6370;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-error {
|
||||
color: #e06c75;
|
||||
}
|
||||
/* css syntax corrections */
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-variable {
|
||||
color: #828997;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-property {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-atom {
|
||||
color: #56b6c2;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-builtin {
|
||||
color: #56b6c2;
|
||||
}
|
||||
/* lua syntax corrections */
|
||||
.CodeMirror.cm-s-one-dark .cm-m-lua.cm-variable {
|
||||
color: #56b6c2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue