From f15d7a83e2cbe03add7a1cbfce9ccb4efbff876e Mon Sep 17 00:00:00 2001 From: Ben Jervis <36141055+bjervisSEEK@users.noreply.github.com> Date: Tue, 10 Apr 2018 07:26:50 +1000 Subject: [PATCH] Adds Atom's One Dark theme (#319) * Adds Atom's One Dark theme * Moves one-dark.css into static * Moves the file from a stylesheet link to an import * Removes the link from constants --- components/Meta.js | 1 + lib/constants.js | 4 ++ static/customThemes/one-dark.css | 87 ++++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+) create mode 100644 static/customThemes/one-dark.css diff --git a/components/Meta.js b/components/Meta.js index 5262eea..2f40f43 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -6,6 +6,7 @@ import Typography from './style/Typography' import '../static/react-crop.css' import '../static/react-spinner.css' +import '../static/customThemes/one-dark.css' export default () => { const onBrowser = typeof window !== 'undefined' diff --git a/lib/constants.js b/lib/constants.js index f6e210f..a1ce825 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -58,6 +58,10 @@ export const THEMES = [ id: 'oceanic-next', name: 'Oceanic Next' }, + { + id: 'one-dark', + name: 'One Dark' + }, { id: 'panda-syntax', name: 'Panda' diff --git a/static/customThemes/one-dark.css b/static/customThemes/one-dark.css new file mode 100644 index 0000000..f494506 --- /dev/null +++ b/static/customThemes/one-dark.css @@ -0,0 +1,87 @@ +/* + 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) +*/ +/* basic */ +.CodeMirror.cm-s-one-dark { + font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace; + font-weight: 350; + font-size: 18px; + color: #abb2bf; + background-color: #282c34; +} +.cm-s-one-dark .CodeMirror-selected {background-color: #3e4451;} +.cm-s-one-dark .CodeMirror-gutter, +.cm-s-one-dark .CodeMirror-gutters { + border: none; + background-color: #282c34; +} +.cm-s-one-dark .CodeMirror-linenumber, +.cm-s-one-dark .CodeMirror-linenumbers { + color: #5c6370 !important; + background-color: transparent; +} +.cm-s-one-dark .CodeMirror-lines { + color: #abb2bf !important; + background-color: transparent; +} +.cm-s-one-dark .CodeMirror-cursor {border-left: 2px solid #56b6c2 !important;} +/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */ +.cm-s-one-dark .CodeMirror-matchingbracket, +.cm-s-one-dark .CodeMirror-matchingtag { + border-bottom: 2px solid #56b6c2; + color: #abb2bf !important; + background-color: transparent; +} +.cm-s-one-dark .CodeMirror-nonmatchingbracket { + border-bottom: 2px solid #e06c75; + color: #abb2bf !important; + background-color: transparent; +} +/* addon: fold/foldgutter.js */ +.cm-s-one-dark .CodeMirror-foldmarker, +.cm-s-one-dark .CodeMirror-foldgutter, +.cm-s-one-dark .CodeMirror-foldgutter-open, +.cm-s-one-dark .CodeMirror-foldgutter-folded { + border: none; + text-shadow: none; + color: #5c6370 !important; + background-color: transparent; +} +/* addon: selection/active-line.js */ +.cm-s-one-dark .CodeMirror-activeline-background {background-color: rgba(153, 187, 255, 0.04);} +/* basic syntax */ +.cm-s-one-dark .cm-header {color: #e06c75;} +.cm-s-one-dark .cm-quote {color: #5c6370;font-style: italic;} +.cm-s-one-dark .cm-negative {color: #e06c75;} +.cm-s-one-dark .cm-positive {color: #e06c75;} +.cm-s-one-dark .cm-strong {color: #d19a66;font-weight: bold;} +.cm-s-one-dark .cm-header .cm-strong {color: #d19a66;font-weight: bold;} +.cm-s-one-dark .cm-em {color: #c678dd;font-style: italic;} +.cm-s-one-dark .cm-header .cm-em {color: #c678dd;font-style: italic;} +.cm-s-one-dark .cm-tag {color: #e06c75;} +.cm-s-one-dark .cm-attribute {color: #d19a66;} +.cm-s-one-dark .cm-link {color: #98c379;border-bottom: solid 1px #98c379;} +.cm-s-one-dark .cm-builtin {color: #e06c75;} +.cm-s-one-dark .cm-keyword {color: #c678dd;} +.cm-s-one-dark .cm-def {color: #e5c07b;} /* original: #d19a66; */ +.cm-s-one-dark .cm-atom {color: #d19a66;} +.cm-s-one-dark .cm-number {color: #d19a66;} +.cm-s-one-dark .cm-property {color: #56b6c2;} /* original: #abb2bf */ +.cm-s-one-dark .cm-qualifier {color: #d19a66;} +.cm-s-one-dark .cm-variable {color: #e06c75;} +.cm-s-one-dark .cm-string {color: #98c379;} +.cm-s-one-dark .cm-punctuation {color: #abb2bf;} +.cm-s-one-dark .cm-operator {color: #56b6c2;} /* original: #abb2bf */ +.cm-s-one-dark .cm-meta {color: #abb2bf;} +.cm-s-one-dark .cm-bracket {color: #abb2bf;} +.cm-s-one-dark .cm-comment {color: #5c6370;font-style: italic;} +.cm-s-one-dark .cm-error {color: #e06c75;} +/* css syntax corrections */ +.cm-s-one-dark .cm-m-css.cm-variable {color: #828997;} +.cm-s-one-dark .cm-m-css.cm-property {color: #abb2bf;} +.cm-s-one-dark .cm-m-css.cm-atom {color: #56b6c2;} +.cm-s-one-dark .cm-m-css.cm-builtin {color: #56b6c2;} +/* lua syntax corrections */ +.cm-s-one-dark .cm-m-lua.cm-variable {color: #56b6c2;} \ No newline at end of file