feat: add dark option for code blocks (#284)

Added a dark mode option!

<img width="594" alt="image" src="https://user-images.githubusercontent.com/1891010/131742846-66a79614-64e0-442a-acb1-dbf04cb8a449.png">

I don't love the look of the tabs, I think we can probably make those look a little bit better. I think we should make this the default in the new design!

__tests__/index.test.js

@@ -27,6 +27,7 @@ test('it should have the proper utils exports', () => {
     },
     normalize: true,
     settings: { position: false },
+    theme: 'light',
   });
 });
 

components/Code/index.jsx

@@ -32,7 +32,7 @@ CopyCode.propTypes = {
 };
 
 function Code(props) {
-  const { children, className, copyButtons, lang, meta } = props;
+  const { children, className, copyButtons, lang, meta, theme } = props;
 
   const langClass = className.search(/lang(?:uage)?-\w+/) >= 0 ? className.match(/\s?lang(?:uage)?-(\w+)/)[1] : '';
   const language = canonicalLanguage(lang) || langClass;
@@ -41,14 +41,15 @@ function Code(props) {
   const codeOpts = {
     inline: !lang,
     tokenizeVariables: true,
+    dark: theme === 'dark',
   };
   const codeContent = syntaxHighlighter ? syntaxHighlighter(children[0], language, codeOpts) : children[0];
 
   return (
     <React.Fragment>
       <code
         ref={codeRef}
-        className={['rdmd-code', `lang-${language}`].join(' ')}
+        className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
         data-lang={language}
         name={meta}
         suppressHydrationWarning={true}
@@ -60,12 +61,12 @@ function Code(props) {
   );
 }
 
-function CreateCode(sanitizeSchema, { copyButtons }) {
+function CreateCode(sanitizeSchema, { copyButtons, theme }) {
   // This is for code blocks class name
   sanitizeSchema.attributes.code = ['className', 'lang', 'meta', 'value'];
 
   // eslint-disable-next-line react/display-name
-  return props => <Code {...props} copyButtons={copyButtons} />;
+  return props => <Code {...props} copyButtons={copyButtons} theme={theme} />;
 }
 
 Code.propTypes = {
@@ -74,6 +75,7 @@ Code.propTypes = {
   copyButtons: PropTypes.bool,
   lang: PropTypes.string,
   meta: PropTypes.string,
+  theme: PropTypes.string,
 };
 
 Code.defaultProps = {

components/Code/style.scss

@@ -1,4 +1,4 @@
-@mixin gfmCodeBaseStyles($background: #F6F8FA, $text: inherit) {
+@mixin gfmCodeBaseStyles($background: #F6F8FA, $background-dark: #242E34, $text: inherit) {
 
   code,
   kbd,
@@ -60,6 +60,11 @@
     padding: 1em
   }
 
+  pre code.theme-dark {
+    background-color: $background-dark;
+    background-color: var(--md-code-background, $background-dark);
+  }
+
   pre code {
     background-color: transparent;
     border: 0;
@@ -200,6 +205,10 @@
       background: inherit;
     }
 
+    >code.theme-dark {
+      color: white;
+    }
+
     button.rdmd-code-copy {
       display: inline-block !important;
       position: absolute;
@@ -237,4 +246,4 @@
   // --md-code-background: #F6F8FA;  
   @include gfmCodeBaseStyles;
   @include copyCodeButton;
-}
+}

components/CodeTabs/index.jsx

@@ -4,7 +4,7 @@ const PropTypes = require('prop-types');
 const { uppercase } = require('@readme/syntax-highlighter');
 
 const CodeTabs = props => {
-  const { attributes, children } = props;
+  const { attributes, children, theme } = props;
 
   function handleClick({ target }, index) {
     const $wrap = target.parentElement.parentElement;
@@ -20,7 +20,7 @@ const CodeTabs = props => {
 
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <div {...attributes} className="CodeTabs CodeTabs_initial">
+    <div {...attributes} className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
         {children.map(({ props: pre }, i) => {
           const { meta, lang } = pre.children[0].props;
@@ -40,12 +40,16 @@ const CodeTabs = props => {
 CodeTabs.propTypes = {
   attributes: PropTypes.shape({}),
   children: PropTypes.arrayOf(PropTypes.any).isRequired,
+  theme: PropTypes.string,
 };
 
 CodeTabs.defaultProps = {
   attributes: null,
 };
 
-module.exports = (/* sanitizeSchema */) => {
-  return CodeTabs;
-};
+function CreateCodeTabs({ theme }) {
+  // eslint-disable-next-line react/display-name
+  return props => <CodeTabs {...props} theme={theme} />;
+}
+
+module.exports = (_, opts) => CreateCodeTabs(opts);

components/CodeTabs/style.scss

@@ -3,14 +3,25 @@
 
 @mixin CodeTabs {
   $bgc-pre: #F6F8FA;
+  $bgc-pre-dark: #242E34;
   $bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
+  $bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
   $radius: var(--md-code-radius, var(--markdown-radius, 3px));
 
   color: #333;
   color: var(--md-code-text, #333);
   border-radius: $radius !important;
   overflow: hidden;
 
+  &.theme-dark {
+    color: white;
+    color: var(--md-code-text, white);
+    .CodeTabs-toolbar {
+      background: $bgc-bar-dark;
+      background: var(--md-code-tabs, $bgc-bar-dark);
+    }
+  }
+
   &-toolbar {
     background: $bgc-bar;
     background: var(--md-code-tabs, $bgc-bar);
@@ -50,6 +61,14 @@
     pointer-events: none;
   }
 
+  &.theme-dark.CodeTabs_initial &-toolbar button:first-child,
+  &.theme-dark .CodeTabs-toolbar button.CodeTabs_active {
+    background: $bgc-pre-dark;
+    background: var(--md-code-background, $bgc-pre-dark);
+    color: white;
+    color: var(--md-code-text, white);
+  }
+
   &-toolbar button:not(.CodeTabs_active):hover {
     background: rgba(0, 0, 0, .075);
   }
@@ -62,6 +81,11 @@
     &:not(.CodeTabs_active) { display: none }
   }
 
+  &.theme-dark pre {
+    background: $bgc-pre-dark;
+    background: var(--md-code-background, $bgc-pre-dark);
+  }
+
   &.CodeTabs_initial pre:first-child {
     display: block;
   }

index.js

@@ -152,7 +152,7 @@ export function reactProcessor(opts = {}, components = {}) {
       createElement: React.createElement,
       Fragment: React.Fragment,
       components: {
-        'code-tabs': CodeTabs(sanitize),
+        'code-tabs': CodeTabs(sanitize, opts),
         'html-block': HTMLBlock(sanitize),
         'rdme-callout': Callout(sanitize),
         'readme-variable': Variable,

options.js

@@ -16,6 +16,7 @@ const options = {
   settings: {
     position: false,
   },
+  theme: 'light',
 };
 
 /**