From f990e4bd16f3b7a6ee9eeeea075da53b64f85062 Mon Sep 17 00:00:00 2001 From: Yamboy1 Date: Sat, 18 Jan 2020 20:13:11 +1300 Subject: [PATCH] Codebox theming --- ui/component/viewers/codeViewer.jsx | 2 +- ui/scss/component/_markdown-editor.scss | 9 +- ui/scss/component/_syntax-highlighter.scss | 210 ++++++++++----------- 3 files changed, 104 insertions(+), 117 deletions(-) diff --git a/ui/component/viewers/codeViewer.jsx b/ui/component/viewers/codeViewer.jsx index 1c806440f..3f053b208 100644 --- a/ui/component/viewers/codeViewer.jsx +++ b/ui/component/viewers/codeViewer.jsx @@ -43,7 +43,7 @@ class CodeViewer extends React.PureComponent { // 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 diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss index 2f4562149..95ffed6d2 100644 --- a/ui/scss/component/_markdown-editor.scss +++ b/ui/scss/component/_markdown-editor.scss @@ -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; diff --git a/ui/scss/component/_syntax-highlighter.scss b/ui/scss/component/_syntax-highlighter.scss index 3d8844fa3..b9aa7e29b 100644 --- a/ui/scss/component/_syntax-highlighter.scss +++ b/ui/scss/component/_syntax-highlighter.scss @@ -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; }