From 7a049c44d0f371e142d5cef01d2eb7400f57c433 Mon Sep 17 00:00:00 2001
From: Mo Sattler <hi@mosattler.com>
Date: Thu, 8 Jul 2021 15:45:53 +0200
Subject: [PATCH] fix(docs): github theme

---
 src/components/CodeBlock.jsx  |   2 +-
 src/lib/github-prism-theme.js | 194 ++++++++++++++++++++++++++++++++++
 2 files changed, 195 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/github-prism-theme.js

diff --git a/src/components/CodeBlock.jsx b/src/components/CodeBlock.jsx
index 355f3f6..8a72864 100644
--- a/src/components/CodeBlock.jsx
+++ b/src/components/CodeBlock.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
-import github from 'prism-react-renderer/themes/github'
+import github from '../lib/github-prism-theme.js'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { useState } from 'react'
 
diff --git a/src/lib/github-prism-theme.js b/src/lib/github-prism-theme.js
new file mode 100644
index 0000000..9dbcdf5
--- /dev/null
+++ b/src/lib/github-prism-theme.js
@@ -0,0 +1,194 @@
+var theme = {
+  plain: {
+    color: 'rgb(36, 41, 46)',
+    backgroundColor: 'rgb(246, 248, 250)'
+  },
+  styles: [
+    {
+      types: ['prolog'],
+      style: {
+        color: 'rgb(0, 0, 128)'
+      }
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: 'rgb(106, 153, 85)'
+      }
+    },
+    {
+      types: ['builtin', 'changed', 'keyword'],
+      style: {
+        color: 'rgb(215, 58, 73)'
+      }
+    },
+    {
+      types: ['inserted-sign', 'inserted'],
+      style: {
+        backgroundColor: 'rgb(240, 255, 244)',
+        color: 'rgb(34, 134, 58)'
+      }
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: 'rgb(100, 102, 149)'
+      }
+    },
+    {
+      types: ['attr-name', 'variable'],
+      style: {
+        color: 'rgb(156, 220, 254)'
+      }
+    },
+    {
+      types: ['deleted-sign', 'deleted'],
+      style: {
+        backgroundColor: 'rgb(255, 238, 240)',
+        color: 'rgb(179, 29, 40)'
+      }
+    },
+    {
+      types: ['selector'],
+      style: {
+        color: 'rgb(215, 186, 125)'
+      }
+    },
+    {
+      // Fix tag color
+      types: ['tag'],
+      style: {
+        color: 'rgb(78, 201, 176)'
+      }
+    },
+    {
+      // Fix tag color for HTML
+      types: ['tag'],
+      languages: ['markup'],
+      style: {
+        color: 'rgb(86, 156, 214)'
+      }
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: 'rgb(36, 41, 46)'
+      }
+    },
+    {
+      types: ['operator'],
+      style: {
+        color: 'rgb(0, 92, 197)'
+      }
+    },
+    {
+      types: ['boolean'],
+      style: {
+        color: 'rgb(0, 92, 197)'
+      }
+    },
+    {
+      // Fix punctuation color for HTML
+      types: ['punctuation'],
+      languages: ['markup'],
+      style: {
+        color: '#808080'
+      }
+    },
+    {
+      types: ['function'],
+      style: {
+        color: 'rgb(0,0,0)'
+      }
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: 'rgb(78, 201, 176)'
+      }
+    },
+    {
+      types: ['known-class-name', 'class-name'],
+      style: {
+        color: 'rgb(227, 98, 9)'
+      }
+    },
+    {
+      types: ['char'],
+      style: {
+        color: 'rgb(209, 105, 105)'
+      }
+    },
+    {
+      types: ['property-access'],
+      style: {
+        color: 'rgb(0, 92, 197)'
+      }
+    },
+    {
+      types: ['method', 'function', 'property-access'],
+      style: {
+        color: 'rgb(0,0,0)'
+      }
+    },
+    {
+      languages: ['json'],
+      types: ['property'],
+      style: {
+        color: 'rgb(3, 47, 98)'
+      }
+    },
+    {
+      languages: ['json'],
+      types: ['string'],
+      style: {
+        color: 'rgb(3, 47, 98)'
+      }
+    },
+    {
+      languages: ['json'],
+      types: ['number'],
+      style: {
+        color: 'rgb(0, 92, 197)'
+      }
+    },
+    {
+      languages: ['json'],
+      types: ['comment'],
+      style: {
+        backgroundColor: 'rgb(179, 29, 40)',
+        color: 'rgb(250, 251, 252)'
+      }
+    },
+    {
+      languages: ['yaml'],
+      types: ['key'],
+      style: {
+        color: 'rgb(34, 134, 58)'
+      }
+    },
+    {
+      languages: ['bash'],
+      types: ['class-name', 'operator'],
+      style: {
+        color: 'rgb(215, 58, 73)'
+      }
+    },
+    {
+      languages: ['bash'],
+      types: ['variable'],
+      style: {
+        color: 'rgb(36, 41, 46)'
+      }
+    },
+    {
+      languages: ['bash'],
+      types: ['string', 'variable', 'function'],
+      style: {
+        color: 'rgb(3, 47, 98)'
+      }
+    }
+  ]
+}
+
+export default theme