fix: change theme color

gregberge · Jan 21, 2019 · d981827 · d981827
1 parent 79c6eff
commit d981827
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 101 deletions.
diff --git a/src/components/RootWrapper.js b/src/components/RootWrapper.js
@@ -5,7 +5,7 @@ import { ThemeProvider } from './ThemeProvider'
 import { Code } from './Code'
 
 const Editor = styled.div`
-  background-color: ${th('gray100')};
+  background-color: #f5f2f0;
   color: ${th('editorTextColor')};
   padding: 15px 20px;
   margin: 25px -20px;

diff --git a/src/components/code-theme.css b/src/components/code-theme.css
@@ -1,24 +1,21 @@
-/*
-Name: Duotone Space
-Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
-
-Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css)
-Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
-*/
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
 
 code[class*='language-'],
 pre[class*='language-'] {
-  font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono',
-    'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
-    'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
-    'Courier New', Courier, monospace;
-  font-size: 14px;
-  line-height: 1.375;
-  direction: ltr;
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
 
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -28,24 +25,29 @@ pre[class*='language-'] {
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  background: #24242e;
-  color: #767693;
 }
 
 pre[class*='language-']::-moz-selection,
 pre[class*='language-'] ::-moz-selection,
 code[class*='language-']::-moz-selection,
 code[class*='language-'] ::-moz-selection {
   text-shadow: none;
-  background: #5151e6;
+  background: #b3d4fc;
 }
 
 pre[class*='language-']::selection,
 pre[class*='language-'] ::selection,
 code[class*='language-']::selection,
 code[class*='language-'] ::selection {
   text-shadow: none;
-  background: #5151e6;
+  background: #b3d4fc;
+}
+
+@media print {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: none;
+  }
 }
 
 /* Code blocks */
@@ -55,129 +57,86 @@ pre[class*='language-'] {
   overflow: auto;
 }
 
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #f5f2f0;
+}
+
 /* Inline code */
 :not(pre) > code[class*='language-'] {
   padding: 0.1em;
   border-radius: 0.3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #5b5b76;
+  color: slategray;
 }
 
 .token.punctuation {
-  color: #5b5b76;
+  color: #999;
 }
 
-.token.namespace {
+.namespace {
   opacity: 0.7;
 }
 
-.token.tag,
-.token.operator,
-.token.number {
-  color: #dd672c;
-}
-
 .token.property,
-.token.function {
-  color: #767693;
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
 }
 
-.token.tag-id,
 .token.selector,
-.token.atrule-id {
-  color: #ebebff;
-}
-
-code.language-javascript,
-.token.attr-name {
-  color: #aaaaca;
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
 }
 
-code.language-css,
-code.language-scss,
-.token.boolean,
-.token.string,
+.token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
-.language-scss .token.string,
-.style .token.string,
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.unit,
-.token.statement,
-.token.regex,
-.token.atrule {
-  color: #fe8c52;
-}
-
-.token.placeholder,
-.token.variable {
-  color: #fe8c52;
+.style .token.string {
+  color: #9a6e3a;
+  /* background: hsla(0, 0%, 100%, 0.5); */
 }
 
-.token.deleted {
-  text-decoration: line-through;
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
 }
 
-.token.inserted {
-  border-bottom: 1px dotted #ebebff;
-  text-decoration: none;
+.token.function,
+.token.class-name {
+  color: #dd4a68;
 }
 
-.token.italic {
-  font-style: italic;
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
 }
 
 .token.important,
 .token.bold {
   font-weight: bold;
 }
-
-.token.important {
-  color: #aaaaca;
+.token.italic {
+  font-style: italic;
 }
 
 .token.entity {
   cursor: help;
 }
-
-pre > code.highlight {
-  outline: 0.4em solid #7676f4;
-  outline-offset: 0.4em;
-}
-
-/* overrides color-values for the Line Numbers plugin
- * http://prismjs.com/plugins/line-numbers/
- */
-.line-numbers .line-numbers-rows {
-  border-right-color: #262631;
-}
-
-.line-numbers-rows > span:before {
-  color: #393949;
-}
-
-/* overrides color-values for the Line Highlight plugin
-* http://prismjs.com/plugins/line-highlight/
-*/
-.line-highlight {
-  background: rgba(221, 103, 44, 0.2);
-  background: -webkit-linear-gradient(
-    left,
-    rgba(221, 103, 44, 0.2) 70%,
-    rgba(221, 103, 44, 0)
-  );
-  background: linear-gradient(
-    to right,
-    rgba(221, 103, 44, 0.2) 70%,
-    rgba(221, 103, 44, 0)
-  );
-}