From 2109685d5a39547b105b9184ef810f1e5630c2e7 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 1 Aug 2018 15:50:36 -0600 Subject: [PATCH] use atom dark theme for codeMirror --- src/renderer/component/viewers/codeViewer.jsx | 2 +- src/renderer/scss/component/_file-render.scss | 3 +- .../scss/component/_syntax-highlighter.scss | 161 +++++++++++++++--- 3 files changed, 137 insertions(+), 29 deletions(-) diff --git a/src/renderer/component/viewers/codeViewer.jsx b/src/renderer/component/viewers/codeViewer.jsx index 817a04c99..c076ddac2 100644 --- a/src/renderer/component/viewers/codeViewer.jsx +++ b/src/renderer/component/viewers/codeViewer.jsx @@ -32,7 +32,7 @@ class CodeViewer extends React.PureComponent { // 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 diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss index befdc4712..ac57ffbfb 100644 --- a/src/renderer/scss/component/_file-render.scss +++ b/src/renderer/scss/component/_file-render.scss @@ -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; } diff --git a/src/renderer/scss/component/_syntax-highlighter.scss b/src/renderer/scss/component/_syntax-highlighter.scss index f71a01c7d..82a718d7f 100644 --- a/src/renderer/scss/component/_syntax-highlighter.scss +++ b/src/renderer/scss/component/_syntax-highlighter.scss @@ -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; }