feat: update code theme to green

Author: Pyrax

example/src/components/code.js

@@ -34,28 +34,35 @@ const scope = {
 
 const injectJsx = (src) => `/** @jsx jsx */\n${src}`
 
+const liveTheme = { styles: [] }
+
 export const LiveCode = ({ children }) => (
-  <LiveProvider code={children} scope={scope} transformCode={injectJsx}>
-    <BaseStyles>
-      <div
+  <LiveProvider
+    code={children}
+    scope={scope}
+    transformCode={injectJsx}
+    theme={liveTheme}
+  >
+    <div
+      sx={{
+        p: 2
+      }}
+    >
+      <ThemeProvider theme={previewTheme}>
+        <BaseStyles>
+          <LivePreview />
+        </BaseStyles>
+      </ThemeProvider>
+      <LiveError
         sx={{
-          p: 2
+          variant: 'alerts.danger',
+          p: 3,
+          mt: 4,
+          mb: 2
         }}
-      >
-        <ThemeProvider theme={previewTheme}>
-          <BaseStyles>
-            <LivePreview />
-          </BaseStyles>
-        </ThemeProvider>
-        <LiveError
-          sx={{
-            variant: 'alerts.danger',
-            p: 3,
-            mt: 4,
-            mb: 2
-          }}
-        />
-      </div>
+      />
+    </div>
+    <BaseStyles>
       <pre
         sx={{
           my: 4

example/src/gatsby-plugin-theme-ui/theme.js

@@ -87,22 +87,13 @@ export const theme = {
       fontFamily: 'monospace',
       fontSize: 1,
       p: 3,
-      color: 'text',
-      bg: 'muted',
-      overflow: 'auto',
-      code: {
-        color: 'inherit'
-      }
+      overflow: 'auto'
     },
     code: {
-      fontFamily: 'monospace',
-      color: 'secondary',
-      fontSize: 1
+      fontFamily: 'monospace'
     },
     inlineCode: {
-      fontFamily: 'monospace',
-      color: 'secondary',
-      bg: 'muted'
+      fontFamily: 'monospace'
     },
     table: {
       width: '100%',
@@ -135,21 +126,48 @@ export const theme = {
       maxWidth: '100%'
     }
   },
+  // Prism theme based on https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
   prism: {
-    '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': {
-      color: 'gray'
+    backgroundColor: '#2a2d2a',
+    color: '#90c392',
+    '.comment,.prolog,.doctype,.cdata,.punctuation': {
+      color: '#779077'
+    },
+    '.namespace': {
+      opacity: 0.7
+    },
+    '.tag,.operator,.number': {
+      color: '#d0c14e'
+    },
+    '.property,.function': {
+      color: '#cebd8c'
+    },
+    '.tag-id,.selector,.atrule-id': {
+      color: '#f0fff0'
+    },
+    '.attr-name': {
+      color: '#b3d6b3'
+    },
+    '.boolean,.string,.entity,.url,.attr-value,.keyword,.control,.directive,.unit,.statement,.regex,.at-rule,.placeholder,.variable': {
+      color: '#cee073'
+    },
+    '.deleted': {
+      textDecorationLine: 'line-through'
+    },
+    '.inserted': {
+      textDecorationLine: 'underline'
     },
-    '.comment': {
+    '.italic': {
       fontStyle: 'italic'
     },
-    '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': {
-      color: 'purple'
+    '.important,.bold': {
+      fontWeight: 'bold'
     },
-    '.atrule,.attr-value,.keyword': {
-      color: 'primary'
+    '.important': {
+      color: '#b3d6b3'
     },
-    '.selector,.attr-name,.string,.char,.builtin,.inserted': {
-      color: 'secondary'
+    '.highlight': {
+      background: '#435643'
     }
   }
 }