From b84474652c157acbf84acc13a5d74df4beed6178 Mon Sep 17 00:00:00 2001 From: Adam Lusted Date: Wed, 17 Jul 2019 03:46:38 +1000 Subject: [PATCH] Added SynthWave '84 theme + Text Shadows (#810) * - Added ability to set optional `text-shadows` on themes. - Extended `THEMES` to include optional `shadows` setting. - Added SynthWave '84 theme. See https://github.com/robb0wen/synthwave-vscode * - Changed ID of `SynthWave-84` theme to `synthwave-84` - Added synthwave-84 to LOCAL_STYLESHEETS - Migrated SynthWave-84 theme to `static/themes/synthwave-84.css` - reverted a few things from 3f9daaf9ecee4561f9fad1bbdb8f38fd58a631c6 - Reverted global text-shadows - Reverted constants.js/themes model changes. * Update Meta.js --- components/Meta.js | 2 +- lib/constants.js | 19 ++++++++ static/themes/synthwave-84.css | 80 ++++++++++++++++++++++++++++++++++ 3 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 static/themes/synthwave-84.css diff --git a/components/Meta.js b/components/Meta.js index 2271962..c9cca22 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -6,7 +6,7 @@ import Font from './style/Font' import Typography from './style/Typography' const HIGHLIGHTS_ONLY = ['shades-of-purple', 'vscode'] -const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord'] +const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord', 'synthwave-84'] const CDN_STYLESHEETS = THEMES.filter( t => LOCAL_STYLESHEETS.indexOf(t.id) < 0 && HIGHLIGHTS_ONLY.indexOf(t.id) < 0 ) diff --git a/lib/constants.js b/lib/constants.js index b16bc9d..a48cda6 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -452,6 +452,25 @@ export const THEMES = [ tag: '#93a1a1' } }, + { + id: 'synthwave-84', + name: "SynthWave '84", + highlights: { + background: '#2b213a', + text: '#b6b1b1', + variable: '#f92aad', + attribute: '#fff5f6', + definition: '#fdfdfd', + keyword: '#f4eee4', + operator: '#f4eee4', + property: '#fdfdfd', + number: '#f97e72', + string: '#ff8b39', + comment: '#6d77b3', + meta: '#ff8b39', + tag: '#f92aad' + } + }, { id: 'tomorrow-night-bright', name: 'Tomorrow Night', diff --git a/static/themes/synthwave-84.css b/static/themes/synthwave-84.css new file mode 100644 index 0000000..2fde73d --- /dev/null +++ b/static/themes/synthwave-84.css @@ -0,0 +1,80 @@ +/* + Name: synthwave-84 1.0.0 + Author: Robb Owen (https://github.com/robb0wen) + Original SynthWave 84' theme (https://github.com/robb0wen/synthwave-vscode) +*/ +/* basic */ +.CodeMirror.cm-s-synthwave-84 { + font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace; + font-weight: 350; + font-size: 18px; + color: #b6b1b1; + background-color: #2b213a; +} +.cm-s-synthwave-84 .CodeMirror-selected { + background-color: #1f172e !important; +} +.cm-s-synthwave-84 .CodeMirror-gutter, +.cm-s-synthwave-84 .CodeMirror-gutters { + border: none; + background-color: #011627; +} +.cm-s-synthwave-84 .CodeMirror-linenumber, +.cm-s-synthwave-84 .CodeMirror-linenumbers { + color: #6d77b3 !important; + background-color: transparent; +} +.cm-s-synthwave-84 .CodeMirror-lines { + color: #b6b1b1 !important; + background-color: transparent; +} +.cm-s-synthwave-84 .CodeMirror-cursor { + border-left: 2px solid #fa7b73 !important; +} +/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */ +.cm-s-synthwave-84 .CodeMirror-matchingbracket, +.cm-s-synthwave-84 .CodeMirror-matchingtag { + border-bottom: 2px solid #c792ea; + color: #b6b1b1 !important; + background-color: transparent; +} +.cm-s-synthwave-84 .CodeMirror-nonmatchingbracket { + border-bottom: 2px solid #fa7b73; + color: #b6b1b1 !important; + background-color: transparent; +} +/* addon: fold/foldgutter.js */ +.cm-s-synthwave-84 .CodeMirror-foldmarker, +.cm-s-synthwave-84 .CodeMirror-foldgutter, +.cm-s-synthwave-84 .CodeMirror-foldgutter-open, +.cm-s-synthwave-84 .CodeMirror-foldgutter-folded { + border: none; + text-shadow: none; + color: #5c6370 !important; + background-color: transparent; +} + +/* addon: selection/active-line.js */ +.cm-s-synthwave-84 .CodeMirror-activeline-background {background-color: #2b213a;} +/* basic syntax */ +.cm-s-synthwave-84 .cm-quote {color: #6d77b3;font-style: italic;} +.cm-s-synthwave-84 .cm-negative {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;} +.cm-s-synthwave-84 .cm-positive {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;} +.cm-s-synthwave-84 .cm-strong {color: #f97e72;font-weight: bold;} +.cm-s-synthwave-84 .cm-em {color: #f4eee4;font-style: italic;text-shadow:0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;} +.cm-s-synthwave-84 .cm-attribute {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;} +.cm-s-synthwave-84 .cm-link {color: #f97e72;border-bottom: solid 1px #f97e72;} +.cm-s-synthwave-84 .cm-keyword {color: #f4eee4;font-style: italic;text-shadow:0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;} +.cm-s-synthwave-84 .cm-def {color: #fdfdfd; text-shadow:0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;} +.cm-s-synthwave-84 .cm-atom {color: #f97e72;} +.cm-s-synthwave-84 .cm-number {color: #f97e72;} +.cm-s-synthwave-84 .cm-property {color: #fdfdfd;text-shadow:0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;} +.cm-s-synthwave-84 .cm-qualifier {color: #f97e72;} +.cm-s-synthwave-84 .cm-variable {color: #f92aad;text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;} +.cm-s-synthwave-84 .cm-variable-2 {color: #f92aad;text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;} +.cm-s-synthwave-84 .cm-string {color: #ff8b39;} +.cm-s-synthwave-84 .cm-string-2 {color: #ff8b39;} +.cm-s-synthwave-84 .cm-operator {color: #f4eee4;text-shadow:0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;} +.cm-s-synthwave-84 .cm-meta {color: #ff8b39;} +.cm-s-synthwave-84 .cm-comment {color: #6d77b3;font-style: italic;} +.cm-s-synthwave-84 .cm-error {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;}