Default theme

components/Carbon.js

@@ -16,7 +16,7 @@ const DEFAULT_SETTINGS = {
   marginVertical: '45px',
   marginHorizontal: '45px',
   background: '#fed0ec',
-  theme: 'dracula',
+  theme: 'seti',
   language: DEFAULT_LANGUAGE
 }
 
@@ -116,7 +116,7 @@ class Carbon extends React.Component {
             }
 
             #container :global(.CodeMirror__container.dropshadow) {
-              box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
+              box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
               border-radius: 5px;
             }
 

components/Meta.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { THEMES, COLORS } from '../lib/constants'
+import { THEMES_ARRAY, COLORS } from '../lib/constants'
 import Reset from './style/Reset'
 import Typography from './style/Typography'
 
@@ -20,8 +20,13 @@ export default () => (
       <link rel="shortcut icon" href="/static/favicon.ico" />
       <link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css' />
       {
+<<<<<<< HEAD
         THEMES.map((theme, i) => (
           <link key={i} rel="stylesheet" href={theme.link || `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/${theme.id}.min.css`}/>
+=======
+        THEMES_ARRAY.map((theme, i) => (
+          <link key={i} rel="stylesheet" href={`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/${theme.id}.min.css`}/>
+>>>>>>> Default theme
         ))
       }
       <link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css" />

lib/constants.js

@@ -1,4 +1,6 @@
-export const THEMES = [
+import { toHash } from './util'
+
+export const THEMES_ARRAY = [
   {
     id: '3024-night',
     name: '3024 Night'
@@ -63,6 +65,8 @@ export const THEMES = [
   }
 ]
 
+export const THEMES = toHash(THEMES_ARRAY)
+
 export const LANGUAGES = [
   {
     name: 'Auto'
@@ -258,7 +262,7 @@ export const COLORS = {
   BLACK: '#121212',
   PRIMARY: '#F8E81C',
   SECONDARY: '#fff',
-  GRAY: '#b5b3a0'
+  GRAY: '#858585'
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

lib/util.js

@@ -0,0 +1,10 @@
+export const toHash = (array) => {
+  return array.reduce((hash, item) => {
+    const id = item.id
+    if (hash[id]) {
+      throw new Error('ID already exists')
+    }
+    hash[id] = item
+    return hash
+  }, {})
+}

pages/editor.js

@@ -16,6 +16,7 @@ import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
 import {
+  THEMES_ARRAY,
   THEMES,
   LANGUAGES,
   DEFAULT_LANGUAGE,
@@ -42,7 +43,7 @@ class Editor extends React.Component {
     super(props)
     this.state = {
       background: '#ABB8C3',
-      theme: THEMES[0].id,
+      theme: THEMES.seti.id,
       language: DEFAULT_LANGUAGE,
       dropShadow: true,
       windowControls: true,
@@ -102,7 +103,7 @@ class Editor extends React.Component {
         <Page enableHeroText>
           <div id="editor">
             <Toolbar>
-              <Dropdown list={THEMES} onChange={theme => this.setState({ theme: theme.id })}/>
+              <Dropdown selected={THEMES[this.state.theme]} list={THEMES_ARRAY} onChange={theme => this.setState({ theme: theme.id })}/>
               <Dropdown list={LANGUAGES} onChange={language => this.setState({ language: language.module })}/>
               <ColorPicker
                 onChange={color => this.setState({ background: color })}