diff --git a/src/_styles/Code.scss b/src/_styles/Code.scss
index 1237c8b64..ec89db74e 100644
--- a/src/_styles/Code.scss
+++ b/src/_styles/Code.scss
@@ -19,12 +19,6 @@
 //     transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
 //   }
 //   &.#{block(light-theme)} {
-//     .hljs {
-//       display: block;
-//       overflow-x: auto;
-//       padding: 0.5em;
-//       background: #fafafa;
-//     }
   
 //     .hljs-comment,
 //     .hljs-quote {
diff --git a/src/code/src/Code.vue b/src/code/src/Code.vue
index cc40ea3d0..eb223a988 100644
--- a/src/code/src/Code.vue
+++ b/src/code/src/Code.vue
@@ -6,7 +6,11 @@ import styles from './styles/index.js'
 
 export default {
   name: 'Code',
-  mixins: [withapp, themeable, usecssr(styles)],
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(styles)
+  ],
   props: {
     language: {
       type: String,
diff --git a/src/code/src/styles/themed-base.cssr.js b/src/code/src/styles/themed-base.cssr.js
index 0e1d59029..b912f2829 100644
--- a/src/code/src/styles/themed-base.cssr.js
+++ b/src/code/src/styles/themed-base.cssr.js
@@ -1,196 +1,36 @@
-import { c, cTB, cB, prefix } from '../../../_utils/cssr'
+import { c, cTB } from '../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
-    const local = props.$local
-    const { monoFontFamily, easeInOutCubicBezier, strongFontWeight } = props.$base
+    const { monoFontFamily, easeInOutCubicBezier } = props.$base
     const {
-      codeTextColor
-    } = local
+      textColor,
+      highlightStyle
+    } = props.$local
     return [
       cTB(
         'code',
-        [
-          c('[class^=hljs]', {
-            color: codeTextColor
-          })
-        ]),
-      cB('code', {
-        raw: `
-          margin: 0;
-          font-size: 14px;
-          font-family: ${monoFontFamily};
-        `
-      },
-      [
-        c('code', {
-          fontFamily: monoFontFamily
-        }),
-        c('[class^=hljs]', {
-          transition: `
-            color .3s ${easeInOutCubicBezier},
-            background-color .3s ${easeInOutCubicBezier}
+        {
+          raw: `
+            margin: 0;
+            font-size: 14px;
+            font-family: ${monoFontFamily};
           `
-        }),
-        c(`&${prefix}light-theme`,
-          [
-            c('hljs', {
-              raw: `
-                display: block;
-                overflow-x: auto;
-                padding: 0.5em;
-                background: #fafafa;
-              `
-            }),
-            c('.hljs-comment, .hljs-quote', {
-              raw: `
-                color: #a0a1a7;
-                font-style: italic;
-              `
-            }),
-            c('.hljs-doctag, .hljs-keyword, .hljs-formula', {
-              raw: `
-                color: #a626a4;
-              `
-            }),
-            c(`.hljs-section, 
-              .hljs-name,
-              .hljs-selector-tag,
-              .hljs-deletion,
-              .hljs-subst`, {
-              raw: `
-                color: #e45649;
-              `
-            }),
-            c('.hljs-literal', {
-              raw: `
-                color: #0184bb;
-              `
-            }),
-            c(`.hljs-string,
-              .hljs-regexp,
-              .hljs-addition,
-              .hljs-attribute,
-              .hljs-meta-string`, {
-              color: `#50a14f`
-            }),
-            c(`.hljs-built_in,
-            .hljs-class .hljs-title`, {
-              color: `#c18401`
-            }),
-            c(`.hljs-attr,
-            .hljs-variable,
-            .hljs-template-variable,
-            .hljs-type,
-            .hljs-selector-class,
-            .hljs-selector-attr,
-            .hljs-selector-pseudo,
-            .hljs-number`, {
-              color: `#986801`
-            }),
-            c(`.hljs-symbol,
-            .hljs-bullet,
-            .hljs-link,
-            .hljs-meta,
-            .hljs-selector-id,
-            .hljs-title`, {
-              color: `#4078f2`
-            }),
-            c('.hljs-emphasis', {
-              fontStyle: `italic`
-            }),
-            c('.hljs-strong', {
-              fontWeight: strongFontWeight
-            }),
-            c('.hljs-link', {
-              textDecoration: 'underline'
-            }),
-            c(`.hljs-function .hljs-params, .hljs-function .hljs-params .hljs-typing`, {
-              color: `#383a42`
-            })
-
-          ]),
-        c(`&${prefix}dark-theme`,
-          [
-            c('hljs', {
-              raw: `
-                display: block;
-                overflow-x: auto;
-                padding: 0.5em;
-                line-height: 1.3em;
-                color: #abb2bf;
-                background: #282c34;
-              `
-            }),
-            c('.hljs-comment, .hljs-quote', {
-              raw: `
-                color: #61aeee;
-                font-style: italic;
-              `
-            }),
-            c('.hljs-pattern-match, .hljs-keyword, .hljs-operator', {
-              raw: `
-                color: #F92672;
-              `
-            }),
-            c(`.hljs-section, 
-              .hljs-name,
-              .hljs-selector-tag,
-              .hljs-deletion,
-              .hljs-subst`, {
-              raw: `
-                color: #A6E22E;
-              `
-            }),
-            c('.hljs-literal', {
-              raw: `
-                color: #FD971F;
-              `
-            }),
-            c(`.hljs-string,
-              .hljs-regexp,
-              .hljs-addition,
-              .hljs-attribute,
-              .hljs-meta-string`, {
-              color: `#7e57c2`
-            }),
-            c(`.hljs-built_in,
-            .hljs-class .hljs-title`, {
-              color: `#e2b93d`
-            }),
-            c(`.hljs-attr,
-            .hljs-variable,
-            .hljs-template-variable,
-            .hljs-type,
-            .hljs-selector-class,
-            .hljs-selector-attr,
-            .hljs-selector-pseudo,
-            .hljs-number`, {
-              color: `#9CCC65`
-            }),
-            c(`.hljs-symbol,
-            .hljs-bullet,
-            .hljs-link,
-            .hljs-meta,
-            .hljs-selector-id,
-            .hljs-title`, {
-              color: `#b18eb1`
-            }),
-            c('.hljs-emphasis', {
-              fontStyle: `italic`
-            }),
-            c('.hljs-strong', {
-              fontWeight: strongFontWeight
-            }),
-            c('.hljs-link', {
-              textDecoration: 'underline'
-            }),
-            c(`.hljs-function .hljs-params, .hljs-function .hljs-params .hljs-typing`, {
-              color: `#e06c75`
-            })
-
-          ])
-      ])
+        },
+        [
+          c('code', {
+            fontFamily: monoFontFamily
+          }),
+          c('[class^=hljs]', {
+            color: textColor,
+            transition: `
+              color .3s ${easeInOutCubicBezier},
+              background-color .3s ${easeInOutCubicBezier}
+            `
+          }),
+          highlightStyle
+        ]
+      )
     ]
   }
 ])
diff --git a/src/code/styles/dark.js b/src/code/styles/dark.js
index 968353c1e..bb9ed4ac1 100644
--- a/src/code/styles/dark.js
+++ b/src/code/styles/dark.js
@@ -1,4 +1,5 @@
 import create from '../../styles/_utils/create-component-base'
+import { c } from '../../_utils/cssr'
 
 export default create({
   theme: 'dark',
@@ -8,7 +9,70 @@ export default create({
       secondaryTextColor
     } = derived
     return {
-      codeTextColor: secondaryTextColor
+      textColor: secondaryTextColor,
+      highlightStyle: [
+        c(`
+          .hljs-pattern-match,
+          .hljs-keyword, .hljs-operator
+        `, {
+          color: '#F92672'
+        }),
+        c('.hljs-pattern-match .hljs-constructor', {
+          color: '#61aeee'
+        }),
+        c('.hljs-function', {
+          color: '#61aeee'
+        }),
+        c('.hljs-function .hljs-params', {
+          color: '#A6E22E'
+        }),
+        c('.hljs-function .hljs-params .hljs-typing', {
+          color: '#FD971F'
+        }),
+        c('.hljs-module-access .hljs-module', {
+          color: '#7e57c2'
+        }),
+        c('.hljs-constructor', {
+          color: '#e2b93d'
+        }),
+        c('.hljs-constructor .hljs-string', {
+          color: '#9CCC65'
+        }),
+        c('.hljs-comment, .hljs-quote', {
+          color: '#b18eb1',
+          fontStyle: 'italic'
+        }),
+        c('.hljs-doctag, .hljs-formula', {
+          color: '#c678dd'
+        }),
+        c('.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst', {
+          color: '#e06c75'
+        }),
+        c('.hljs-literal', {
+          color: '#56b6c2'
+        }),
+        c('.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string', {
+          color: '#98c379'
+        }),
+        c('.hljs-built_in, .hljs-class .hljs-title', {
+          color: '#e6c07b'
+        }),
+        c('.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number', {
+          color: '#d19a66'
+        }),
+        c('.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title', {
+          color: '#61aeee'
+        }),
+        c('.hljs-emphasis', {
+          fontStyle: 'italic'
+        }),
+        c('.hljs-strong', {
+          fontWeight: base.strongFontWeight
+        }),
+        c('.hljs-link', {
+          textDecoration: 'underline'
+        })
+      ]
     }
   }
 })
diff --git a/src/code/styles/light.js b/src/code/styles/light.js
index 906a30cbb..642960128 100644
--- a/src/code/styles/light.js
+++ b/src/code/styles/light.js
@@ -1,4 +1,5 @@
 import create from '../../styles/_utils/create-component-base'
+import { c } from '../../_utils/cssr'
 
 export default create({
   theme: 'light',
@@ -8,7 +9,89 @@ export default create({
       secondaryTextColor
     } = derived
     return {
-      codeTextColor: secondaryTextColor
+      textColor: secondaryTextColor,
+      highlightStyle: [
+        c(`
+          .hljs-comment,
+          .hljs-quote
+        `, {
+          raw: `
+            color: #a0a1a7;
+            font-style: italic;
+          `
+        }),
+        c(`
+          .hljs-doctag,
+          .hljs-keyword,
+          .hljs-formula
+        `, {
+          color: '#a626a4'
+        }),
+        c(`
+          .hljs-section, 
+          .hljs-name,
+          .hljs-selector-tag,
+          .hljs-deletion,
+          .hljs-subst
+        `, {
+          color: '#e45649'
+        }),
+        c('.hljs-literal', {
+          color: '#0184bb'
+        }),
+        c(`
+          .hljs-string,
+          .hljs-regexp,
+          .hljs-addition,
+          .hljs-attribute,
+          .hljs-meta-string
+        `, {
+          color: `#50a14f`
+        }),
+        c(`
+          .hljs-built_in,
+          .hljs-class .hljs-title
+        `, {
+          color: `#c18401`
+        }),
+        c(`
+          .hljs-attr,
+          .hljs-variable,
+          .hljs-template-variable,
+          .hljs-type,
+          .hljs-selector-class,
+          .hljs-selector-attr,
+          .hljs-selector-pseudo,
+          .hljs-number
+        `, {
+          color: `#986801`
+        }),
+        c(`
+          .hljs-symbol,
+          .hljs-bullet,
+          .hljs-link,
+          .hljs-meta,
+          .hljs-selector-id,
+          .hljs-title
+        `, {
+          color: `#4078f2`
+        }),
+        c('.hljs-emphasis', {
+          fontStyle: `italic`
+        }),
+        c('.hljs-strong', {
+          fontWeight: base.strongFontWeight
+        }),
+        c('.hljs-link', {
+          textDecoration: 'underline'
+        }),
+        c(`
+          .hljs-function .hljs-params,
+          .hljs-function .hljs-params .hljs-typing
+        `, {
+          color: '#383a42'
+        })
+      ]
     }
   }
 })