Codebox theming
This commit is contained in:
Yamboy1
Sean Yesmunt
parent
4f4abdd3fa
commit
f990e4bd16
3 changed files with 104 additions and 117 deletions
|
|
@ -43,7 +43,7 @@ class CodeViewer extends React.PureComponent<Props> {
|
|||
// Auto detect syntax with file contentType
|
||||
mode: contentType,
|
||||
// Adaptive theme
|
||||
theme: theme === 'dark' ? 'one-dark' : 'default',
|
||||
theme: theme === 'dark' ? 'monokai' : 'default',
|
||||
// Hide the cursor
|
||||
readOnly: true,
|
||||
// Styled text selection
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
.CodeMirror {
|
||||
border-top: none;
|
||||
border-right: 1px solid var(--color-input-border);
|
||||
border-bottom: 1px solid var(--color-input-border);
|
||||
border-left: 1px solid var(--color-input-border);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
background: var(--color-input-bg);
|
||||
|
|
@ -13,6 +10,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.CodeMirror-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
background-color: var(--color-header-background);
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,114 +1,100 @@
|
|||
// 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)
|
||||
/* Based on Sublime Text's Monokai theme */
|
||||
|
||||
// basic
|
||||
.CodeMirror {
|
||||
&.cm-s-one-dark {
|
||||
color: #abb2bf;
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 2px solid #56b6c2;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// addon: edit/machingbrackets.js & addon: edit/matchtags.js
|
||||
.CodeMirror-matchingbracket,
|
||||
.CodeMirror-matchingtag {
|
||||
border-bottom: 2px solid #56b6c2;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-nonmatchingbracket {
|
||||
border-bottom: 2px solid #e06c75;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// addon: fold/foldgutter.js
|
||||
.CodeMirror-foldmarker,
|
||||
.CodeMirror-foldgutter,
|
||||
.CodeMirror-foldgutter-open,
|
||||
.CodeMirror-foldgutter-folded {
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
color: #5c6370 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// basic syntax
|
||||
.cm-atom,
|
||||
.cm-attribute,
|
||||
.cm-number,
|
||||
.cm-qualifier,
|
||||
.cm-strong {
|
||||
color: #d19a66;
|
||||
}
|
||||
|
||||
.cm-bracket,
|
||||
.cm-meta,
|
||||
.cm-punctuation,
|
||||
.cm-m-css.cm-property {
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.cm-builtin,
|
||||
.cm-error,
|
||||
.cm-header,
|
||||
.cm-negative,
|
||||
.cm-positive,
|
||||
.cm-tag,
|
||||
.cm-variable {
|
||||
color: #e06c75;
|
||||
}
|
||||
|
||||
.cm-comment,
|
||||
.cm-quote {
|
||||
color: #5c6370;
|
||||
}
|
||||
|
||||
.cm-def {
|
||||
color: #e5c07b;
|
||||
}
|
||||
|
||||
.cm-em,
|
||||
.cm-keyword {
|
||||
color: #c678dd;
|
||||
}
|
||||
|
||||
.cm-comment,
|
||||
.cm-em,
|
||||
.cm-quote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm-link,
|
||||
.cm-string {
|
||||
color: #98c379;
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
border-bottom: 1px solid #98c379;
|
||||
}
|
||||
|
||||
.cm-operator,
|
||||
.cm-property,
|
||||
.cm-m-css.cm-atom,
|
||||
.cm-m-css.cm-builtin,
|
||||
.cm-m-lua.cm-variable {
|
||||
color: #56b6c2;
|
||||
}
|
||||
|
||||
.cm-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cm-m-css.cm-variable {
|
||||
color: #828997;
|
||||
}
|
||||
}
|
||||
.cm-s-monokai.CodeMirror {
|
||||
background: #212529;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.cm-s-monokai div.CodeMirror-selected {
|
||||
background: #717273;
|
||||
}
|
||||
.cm-s-monokai .CodeMirror-gutters {
|
||||
background: #212529;
|
||||
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;
|
||||
}
|
||||
|
||||
.cm-s-monokai span.cm-comment {
|
||||
color: #ada6a7;
|
||||
}
|
||||
.cm-s-monokai span.cm-atom {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.cm-s-monokai span.cm-number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.cm-s-monokai span.cm-comment.cm-attribute {
|
||||
color: #97b757;
|
||||
}
|
||||
.cm-s-monokai span.cm-comment.cm-def {
|
||||
color: #bc9262;
|
||||
}
|
||||
.cm-s-monokai span.cm-comment.cm-tag {
|
||||
color: #bc6283;
|
||||
}
|
||||
.cm-s-monokai span.cm-comment.cm-type {
|
||||
color: #5998a6;
|
||||
}
|
||||
|
||||
.cm-s-monokai span.cm-property,
|
||||
.cm-s-monokai span.cm-attribute {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.cm-s-monokai span.cm-keyword {
|
||||
color: #f92672;
|
||||
}
|
||||
.cm-s-monokai span.cm-builtin {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.cm-s-monokai span.cm-string {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.cm-s-monokai span.cm-variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.cm-s-monokai span.cm-variable-2 {
|
||||
color: #9effff;
|
||||
}
|
||||
.cm-s-monokai span.cm-variable-3,
|
||||
.cm-s-monokai span.cm-type {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.cm-s-monokai span.cm-def {
|
||||
color: #fd971f;
|
||||
}
|
||||
.cm-s-monokai span.cm-bracket {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.cm-s-monokai span.cm-tag {
|
||||
color: #f92672;
|
||||
}
|
||||
.cm-s-monokai span.cm-header {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.cm-s-monokai span.cm-link {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.cm-s-monokai span.cm-error {
|
||||
background: #f92672;
|
||||
color: #f8f8f0;
|
||||
}
|
||||
|
||||
.cm-s-monokai .CodeMirror-activeline-background {
|
||||
background: #373831;
|
||||
}
|
||||
.cm-s-monokai .CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: white !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue