Add support for Verminal theme 💅 (#341)

* Add verminal theme.

* Only decrease opacity if vibrancy is supported.

* Use Framer Syntax.

* Reset constants.

* Don't prefill example env variables.

.env.example

@@ -0,0 +1,7 @@
+TWITTER_CONSUMER_KEY=
+TWITTER_CONSUMER_SECRET=
+TWITTER_ACCESS_TOKEN_KEY=
+TWITTER_ACCESS_TOKEN_SECRET=
+UNSPLASH_ACCESS_KEY=
+UNSPLASH_SECRET_KEY=
+UNSPLASH_CALLBACK_URL=

components/Meta.js

@@ -7,6 +7,7 @@ import Typography from './style/Typography'
 import '../static/react-crop.css'
 import '../static/react-spinner.css'
 import '../lib/custom/themes/one-dark.css'
+import '../lib/custom/themes/verminal.css'
 
 export default () => {
   const onBrowser = typeof window !== 'undefined'

lib/constants.js

@@ -97,6 +97,10 @@ export const THEMES = [
     id: 'twilight',
     name: 'Twilight'
   },
+  {
+    id: 'verminal',
+    name: 'Verminal'
+  },
   {
     id: 'yeti',
     name: 'Yeti'

lib/custom/themes/verminal.css

@@ -0,0 +1,117 @@
+/*
+    Name:       verminal 1.0.0
+    Author:     Vernon de Goede (http://github.com/vernondegoede)
+*/
+
+.CodeMirror.cm-s-verminal {
+  background: rgba(0, 0, 0, 0.85);
+  color: white;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+@supports ((-webkit-backdrop-filter: blur(3em)) or (backdrop-filter: blur(3em))) {
+  .CodeMirror.cm-s-verminal {
+    -webkit-backdrop-filter: blur(4em);
+    backdrop-filter: blur(4em);
+    background: rgba(0, 0, 0, 0.70);    
+  }
+}
+
+/* basic syntax */
+.cm-s-verminal .cm-header {
+  color: #e06c75;
+}
+.cm-s-verminal .cm-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+.cm-s-verminal .cm-negative {
+  color: #e06c75;
+}
+.cm-s-verminal .cm-positive {
+  color: #e06c75;
+}
+.cm-s-verminal .cm-strong {
+  color: #d19a66;
+  font-weight: bold;
+}
+.cm-s-verminal .cm-header .cm-strong {
+  color: #d19a66;
+  font-weight: bold;
+}
+.cm-s-verminal .cm-em {
+  color: #c678dd;
+  font-style: italic;
+}
+.cm-s-verminal .cm-header .cm-em {
+  color: #c678dd;
+  font-style: italic;
+}
+.cm-s-verminal .cm-tag {
+  color: #e06c75;
+}
+.cm-s-verminal .cm-attribute {
+  color: #d19a66;
+}
+.cm-s-verminal .cm-link {
+  color: #98c379;
+  border-bottom: solid 1px #98c379;
+}
+.cm-s-verminal .cm-builtin {
+  color: #e06c75;
+}
+.cm-s-verminal .cm-keyword {
+  color: #9AE1FF;
+}
+.cm-s-verminal .cm-def {
+  color: #34B7FF;
+}
+.cm-s-verminal .cm-atom {
+  color: #d19a66;
+}
+.cm-s-verminal .cm-number {
+  color: #d19a66;
+}
+.cm-s-verminal .cm-property {
+  color: #0af;
+}
+.cm-s-verminal .cm-qualifier {
+  color: #d19a66;
+}
+.cm-s-verminal .cm-variable {
+  color: #ff9ba3;
+}
+.cm-s-verminal .cm-variable-2 {
+  color: #fff;
+}
+.cm-s-verminal .cm-string {
+  color: #98c379;
+}
+.cm-s-verminal .cm-punctuation {
+  color: #abb2bf;
+}
+.cm-s-verminal .cm-operator {
+  color: #FA78C3;
+}
+
+.cm-s-verminal .cm-meta {
+  color: #abb2bf;
+}
+.cm-s-verminal .cm-bracket {
+  color: #abb2bf;
+}
+.cm-s-verminal .cm-comment {
+  color: #5c6370;
+  font-style: italic;
+}
+.cm-s-verminal .cm-error {
+  color: #e06c75;
+}
+
+.cm-s-verminal .CodeMirror-linenumber,
+.cm-s-verminal .CodeMirror-linenumbers {
+  color: #616161 !important;
+  background-color: transparent;
+}