add themes

src/style/base.css

@@ -10,82 +10,3 @@ body {
 * {
   box-sizing: border-box;
 }
-
-header {
-  position: fixed;
-  z-index: 2;
-  width: 100%;
-  height: 2em;
-  background: #025;
-  color: #adf;
-  display: flex;
-  justify-content: space-between;
-}
-
-header > div {
-  display: flex;
-  align-items: center;
-}
-
-header .button {
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 .25em;
-}
-
-header a {
-  color: inherit;
-  text-decoration: none;
-}
-
-header .button:hover {
-  background: #36368c;
-}
-
-header .button > ul {
-  position: absolute;
-  top: 2em;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  background-color: #36368c;
-}
-
-header .button > ul > li {
-  padding: .15em .5em;
-}
-
-header .button > ul > li:hover {
-  background-color: #025;
-}
-
-main {
-  padding-top: 2em;
-}
-
-.editor {
-  counter-reset: line;
-  font-size: 16px;
-  outline: 0;
-  min-height: calc(100vh - 2em);
-}
-
-.editor #code-area {
-  outline: none;
-  padding-left: 60px !important;
-}
-
-.editor pre {
-  padding-left: 60px !important;
-}
-
-.editor .editorLineNumber {
-  position: absolute;
-  left: 0px;
-  color: #cccccc;
-  text-align: right;
-  width: 40px;
-  font-weight: 100;
-}

src/style/themes.js

@@ -0,0 +1,56 @@
+const themes = {
+  light: {
+    primary: '#aaddff',
+    secondary: '#022550',
+    highlight: '#36368c',
+
+    editor: {
+      background: 'none',
+      lineNumber: '#cccccc',
+      primary: 'black',
+      selection: '#b3d4fc',
+      comment: 'slategray',
+      commentTag: '#A082BD',
+      punctuation: '#999',
+      annotation: '#999',
+      namespace: 'slategray',
+      property: '#e90',
+      constant: '#905',
+      number: '#905',
+      selector: '#690',
+      operator: '#9a6e3a',
+      keyword: '#07a',
+      function: '#DD4A68',
+      className: '#DD4A68',
+      variable: '#e90'
+    }
+  },
+  dark: {
+    primary: '#aaddff',
+    secondary: '#022550',
+    highlight: '#36368c',
+
+    editor: {
+      background: '#041f29',
+      lineNumber: '#81969A',
+      primary: '#E0E2E4',
+      selection: '#E0E2E4',
+      comment: '#7D8C93',
+      commentTag: '#A082BD',
+      punctuation: '#E8E2B7',
+      annotation: '#00FFF8',
+      namespace: '#7CA8CF',
+      property: '#ee9900',
+      constant: '#F77669',
+      number: '#FFCD22',
+      selector: '#E2B671',
+      operator: '#E8E2B7',
+      keyword: '#1CCBEF',
+      function: '#BCBCBC',
+      className: '#82CF75',
+      variable: '#ee9900'
+    }
+  }
+};
+
+export default themes;