dark mode support, close #14

components/Breadcrumb.tsx

@@ -8,14 +8,14 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
     const { path } = query
     if (Array.isArray(path)) {
       return (
-        <div className="pb-4 text-sm text-gray-600 flex overflow-x-scroll">
+        <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll">
-          <div className="p-1 hover:text-black transition-all duration-75 flex-shrink-0">
+          <div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75 flex-shrink-0">
             <Link href="/">🚩 Home</Link>
           </div>
           {path.map((q: string, i: number) => (
             <div key={i} className="flex items-center flex-shrink-0">
               <div>/</div>
-              <div className="p-1 hover:text-black transition-all duration-75">
+              <div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
                 <Link
                   href={`/${path
                     .slice(0, i + 1)
@@ -33,7 +33,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
   }
 
   return (
-    <div className="pb-4 text-sm text-gray-600 hover:text-black transition-all duration-75">
+    <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
       <div className="p-1">
         <Link href="/">🚩 Home</Link>
       </div>

components/FileListing.tsx

@@ -60,10 +60,7 @@ const queryToPath = (query?: ParsedUrlQuery) => {
   return '/'
 }
 
-const fetcher = (url: string) => {
+const fetcher = (url: string) => axios.get(url).then(res => res.data)
-  console.log(url)
-  return axios.get(url).then(res => res.data)
-}
 
 const FileListItem: FunctionComponent<{
   fileContent: { id: string; name: string; size: number; file: Object; lastModifiedDateTime: string }
@@ -72,7 +69,7 @@ const FileListItem: FunctionComponent<{
   const renderEmoji = emojiIcon && !emojiIcon.index
 
   return (
-    <div className="p-3 grid grid-cols-10 items-center space-x-2 cursor-pointer hover:bg-gray-100">
+    <div className="p-3 grid grid-cols-10 items-center space-x-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
       <div className="flex space-x-2 items-center col-span-10 md:col-span-7 truncate">
         {/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */}
         <div className="w-5 text-center flex-shrink-0">
@@ -86,7 +83,7 @@ const FileListItem: FunctionComponent<{
           {renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name}
         </div>
       </div>
-      <div className="hidden md:block font-mono text-sm col-span-2 text-gray-700 flex-shrink-0">
+      <div className="hidden md:block font-mono text-sm col-span-2 text-gray-700 dark:text-gray-500 flex-shrink-0">
         {new Date(c.lastModifiedDateTime).toLocaleString('en-US', {
           year: 'numeric',
           month: '2-digit',
@@ -96,7 +93,9 @@ const FileListItem: FunctionComponent<{
           hour12: false,
         })}
       </div>
-      <div className="hidden md:block font-mono text-sm text-gray-700 flex-shrink-0">{humanFileSize(c.size)}</div>
+      <div className="hidden md:block font-mono text-sm text-gray-700 dark:text-gray-500 flex-shrink-0">
+        {humanFileSize(c.size)}
+      </div>
     </div>
   )
 }
@@ -116,14 +115,14 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
   if (error) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <Loading loadingText="Loading ..." />
       </div>
     )
@@ -170,8 +169,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     })
 
     return (
-      <div className="bg-white shadow rounded">
+      <div className="bg-white dark:bg-gray-900 dark:text-white shadow rounded">
-        <div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200">
+        <div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200 dark:border-gray-700">
           <div className="col-span-10 md:col-span-7 font-bold">Name</div>
           <div className="hidden md:block font-bold col-span-2">Last Modified</div>
           <div className="hidden md:block font-bold">Size</div>
@@ -234,7 +233,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         ))}
 
         {renderReadme && (
-          <div className="border-t">
+          <div className="border-t dark:border-gray-700">
             <MarkdownPreview file={readmeFile} standalone={false} />
           </div>
         )}

components/Loading.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
 
 const Loading: FunctionComponent<{ loadingText: string }> = ({ loadingText }) => {
   return (
-    <div className="flex items-center justify-center rounded py-32 space-x-1">
+    <div className="flex items-center justify-center rounded py-32 space-x-1 dark:text-white">
       <svg
         className="animate-spin -ml-1 mr-3 h-5 w-5"
         xmlns="http://www.w3.org/2000/svg"

components/Navbar.tsx

@@ -4,10 +4,15 @@ import siteConfig from '../config/site.json'
 
 const Navbar = () => {
   return (
-    <div className="text-left bg-white p-3 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
+    <div className="text-left bg-white dark:bg-gray-900 p-3 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
       <div className="max-w-4xl w-full mx-auto flex items-center justify-between">
-        <h1 className="font-bold text-xl">{siteConfig.title}</h1>
+        <h1 className="font-bold text-xl dark:text-white">{siteConfig.title}</h1>
-        <a href="https://github.com/spencerwooo/onedrive-vercel-index" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://github.com/spencerwooo/onedrive-vercel-index"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="dark:text-white"
+        >
           <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
         </a>
       </div>

components/previews/AudioPreview.tsx

@@ -16,9 +16,9 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="bg-white rounded shadow p-3 w-full">
+      <div className="bg-white dark:bg-gray-900 dark:text-white rounded shadow p-3 w-full">
         <div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
-          <div className="flex items-center justify-center bg-gray-100 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
+          <div className="flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
             {playerStatus === PlayerState.Loading ? (
               <div>
                 <svg

components/previews/CodePreview.tsx

@@ -20,14 +20,14 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   if (error) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -35,7 +35,7 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="markdown-body shadow bg-white rounded p-3">
+      <div className="markdown-body shadow bg-gray-900 rounded p-3">
         <pre className={`language-${getExtension(file.name)}`}>
           <code>{data}</code>
         </pre>

components/previews/MarkdownPreview.tsx

@@ -9,7 +9,6 @@ import rehypeKatex from 'rehype-katex'
 import rehypeRaw from 'rehype-raw'
 
 import 'katex/dist/katex.min.css'
-import 'github-markdown-css/github-markdown.css'
 
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
@@ -18,7 +17,15 @@ import DownloadBtn from '../DownloadBtn'
 const fetcher = (url: string) => axios.get(url).then(res => res.data)
 
 const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> = ({ file, standalone = true }) => {
-  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
+  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher, {
+    revalidateOnFocus: false,
+    revalidateOnMount: false,
+    revalidateOnReconnect: false,
+    refreshWhenOffline: false,
+    refreshWhenHidden: false,
+    refreshInterval: 0,
+  })
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       Prism.highlightAll()
@@ -27,14 +34,14 @@ const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> =
 
   if (error) {
     return (
-      <div className={`${standalone ? 'shadow bg-white rounded p-3' : ''}`}>
+      <div className={`${standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}`}>
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className={standalone ? 'shadow bg-white rounded p-3' : ''}>
+      <div className={standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}>
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -42,7 +49,13 @@ const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> =
 
   return (
     <>
-      <div className={standalone ? 'markdown-body shadow bg-white rounded p-3' : 'markdown-body p-3'}>
+      <div
+        className={
+          standalone
+            ? 'markdown-body shadow bg-white dark:bg-gray-900 rounded p-3 dark:text-white'
+            : 'markdown-body p-3 dark:text-white'
+        }
+      >
         {/* Using rehypeRaw to render HTML inside Markdown, is potentially dangerous, use under safe environments. (#18) */}
         <ReactMarkdown remarkPlugins={[gfm, remarkMath]} rehypePlugins={[rehypeKatex, rehypeRaw as any]}>
           {data}

components/previews/PDFPreview.tsx

@@ -26,12 +26,12 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
     <>
       <div
-        className="flex flex-col bg-white rounded shadow md:p-3 w-full overflow-scroll"
+        className="flex flex-col bg-white dark:bg-gray-900 rounded shadow md:p-3 w-full overflow-scroll"
         style={{ maxHeight: '90vh' }}
       >
         <div className="w-full flex-1 overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
           <Document
-            className="bg-gray-100"
+            className="bg-gray-100 dark:bg-gray-800"
             file={file['@microsoft.graph.downloadUrl']}
             onLoadSuccess={onDocumentLoadSuccess}
             loading={<Loading loadingText={loadingText} />}
@@ -46,7 +46,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           </Document>
         </div>
 
-        <div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center">
+        <div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center dark:text-white">
           <button
             className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
             onClick={() => {
@@ -60,7 +60,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
             Page{' '}
             <input
               value={pageNumber}
-              className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring focus:ring-red-300 focus:outline-none"
+              className="w-10 mr-1 text-center p-1 bg-red-50 dark:bg-gray-600 rounded focus:ring focus:ring-red-300 dark:focus:ring-red-700 focus:outline-none"
               style={{
                 maxWidth: 50,
               }}

components/previews/TextPreview.tsx

@@ -12,14 +12,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
   if (error) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -27,7 +27,7 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="shadow bg-white rounded p-3">
+      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
         <pre className="p-0 md:p-3 overflow-scroll">{data}</pre>
       </div>
       <div className="mt-4">

components/previews/VideoPreview.tsx

@@ -14,7 +14,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="bg-white rounded shadow p-3">
+      <div className="bg-white dark:bg-gray-900 rounded shadow p-3">
         <div className="relative" style={{ paddingTop: '56.25%' }}>
           <ReactPlayer
             className="absolute top-0 left-0 w-full h-full"

package-lock.json

@@ -14,7 +14,6 @@
         "@fortawesome/react-fontawesome": "^0.1.14",
         "axios": "^0.21.1",
         "emoji-regex": "^9.2.2",
-        "github-markdown-css": "^4.0.0",
         "next": "^11.1.0",
         "preview-office-docs": "^1.0.2",
         "prismjs": "^1.23.0",
@@ -2971,14 +2970,6 @@
         "stream-parser": "^0.3.1"
       }
     },
-    "node_modules/github-markdown-css": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-4.0.0.tgz",
-      "integrity": "sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -10031,11 +10022,6 @@
         "stream-parser": "^0.3.1"
       }
     },
-    "github-markdown-css": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-4.0.0.tgz",
-      "integrity": "sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg=="
-    },
     "glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",

package.json

@@ -16,7 +16,6 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "axios": "^0.21.1",
     "emoji-regex": "^9.2.2",
-    "github-markdown-css": "^4.0.0",
     "next": "^11.1.0",
     "preview-office-docs": "^1.0.2",
     "prismjs": "^1.23.0",

pages/[...path].tsx

@@ -11,12 +11,12 @@ export default function Folders() {
   const { query } = useRouter()
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
       <Head>
         <title>{siteConfig.title}</title>
       </Head>
 
-      <main className="flex flex-col w-full flex-1 bg-gray-50">
+      <main className="flex flex-col w-full flex-1 bg-gray-50 dark:bg-gray-800">
         <Navbar />
         <div className="mx-auto w-full max-w-4xl p-4">
           <Breadcrumb query={query} />

pages/_app.tsx

@@ -1,5 +1,7 @@
 import '../styles/globals.css'
-import '../styles/prism-github.css'
+import '../styles/prism-vsc-dark.css'
+import '../styles/markdown-github.css'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faFileImage,

pages/index.tsx

@@ -8,12 +8,12 @@ import Breadcrumb from '../components/Breadcrumb'
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
       <Head>
         <title>{siteConfig.title}</title>
       </Head>
 
-      <main className="flex flex-col w-full flex-1 bg-gray-50">
+      <main className="flex flex-col w-full flex-1 bg-gray-50 dark:bg-gray-800">
         <Navbar />
         <div className="mx-auto w-full max-w-4xl p-4">
           <Breadcrumb />

styles/prism-github.css

@@ -1,119 +0,0 @@
-code[class*='language-'],
-pre[class*='language-'] {
-  color: #393a34;
-  font-family: 'SF Mono', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  font-size: 0.9em;
-  line-height: 1.2em;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre > code[class*='language-'] {
-  font-size: 1em;
-}
-
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  background: #b3d4fc;
-}
-
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
-  background: #b3d4fc;
-}
-
-/* Code blocks */
-pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.2em;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  background: #f8f8f8;
-  border: 1px solid #dddddd;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #999988;
-  font-style: italic;
-}
-
-.token.namespace {
-  opacity: 0.7;
-}
-
-.token.string,
-.token.attr-value {
-  color: #e3116c;
-}
-
-.token.punctuation,
-.token.operator {
-  color: #393a34; /* no highlight */
-}
-
-.token.entity,
-.token.url,
-.token.symbol,
-.token.number,
-.token.boolean,
-.token.variable,
-.token.constant,
-.token.property,
-.token.regex,
-.token.inserted {
-  color: #36acaa;
-}
-
-.token.atrule,
-.token.keyword,
-.token.attr-name,
-.language-autohotkey .token.selector {
-  color: #00a4db;
-}
-
-.token.function,
-.token.deleted,
-.language-autohotkey .token.tag {
-  color: #9a050f;
-}
-
-.token.tag,
-.token.selector,
-.language-autohotkey .token.keyword {
-  color: #00009f;
-}
-
-.token.important,
-.token.function,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}

styles/prism-vsc-dark.css

@@ -0,0 +1,287 @@
+pre[class*='language-'],
+code[class*='language-'] {
+  color: #d4d4d4;
+  font-size: 13px;
+  text-shadow: none;
+  font-family: Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', 'Courier New', monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*='language-']::selection,
+code[class*='language-']::selection,
+pre[class*='language-'] *::selection,
+code[class*='language-'] *::selection {
+  text-shadow: none;
+  background: #75a7ca;
+}
+
+@media print {
+  pre[class*='language-'],
+  code[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  background: #1e1e1e;
+}
+
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  color: #db4c69;
+  background: #f9f2f4;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+  opacity: 0.7;
+}
+
+.token.doctype .token.doctype-tag {
+  color: #569cd6;
+}
+
+.token.doctype .token.name {
+  color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+  color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+  color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+  color: #ce9178;
+}
+
+.language-css .token.string.url {
+  text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+  color: #d4d4d4;
+}
+
+.token.operator.arrow {
+  color: #569cd6;
+}
+
+.token.atrule {
+  color: #ce9178;
+}
+
+.token.atrule .token.rule {
+  color: #c586c0;
+}
+
+.token.atrule .token.url {
+  color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+  color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.keyword {
+  color: #569cd6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+  color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+  color: #dcdcaa;
+}
+
+.token.regex {
+  color: #d16969;
+}
+
+.token.important {
+  color: #569cd6;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.constant {
+  color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+  color: #4ec9b0;
+}
+
+.token.console {
+  color: #9cdcfe;
+}
+
+.token.parameter {
+  color: #9cdcfe;
+}
+
+.token.interpolation {
+  color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+  color: #569cd6;
+}
+
+.token.boolean {
+  color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+  color: #9cdcfe;
+}
+
+.token.selector {
+  color: #d7ba7d;
+}
+
+.token.escape {
+  color: #d7ba7d;
+}
+
+.token.tag {
+  color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+  color: #808080;
+}
+
+.token.cdata {
+  color: #808080;
+}
+
+.token.attr-name {
+  color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+  color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+  color: #d4d4d4;
+}
+
+.token.entity {
+  color: #569cd6;
+}
+
+.token.namespace {
+  color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*='language-javascript'],
+code[class*='language-javascript'],
+pre[class*='language-jsx'],
+code[class*='language-jsx'],
+pre[class*='language-typescript'],
+code[class*='language-typescript'],
+pre[class*='language-tsx'],
+code[class*='language-tsx'] {
+  color: #9cdcfe;
+}
+
+pre[class*='language-css'],
+code[class*='language-css'] {
+  color: #ce9178;
+}
+
+pre[class*='language-html'],
+code[class*='language-html'] {
+  color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+  color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+  color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[data-line] {
+  position: relative;
+}
+
+pre[class*='language-'] > code[class*='language-'] {
+  position: relative;
+  z-index: 1;
+}
+
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: #f7ebc6;
+  box-shadow: inset 5px 0 0 #f7d87c;
+  z-index: 0;
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}

tailwind.config.js

@@ -1,10 +1,25 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')
 
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'media', // or 'media' or 'class'
   theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      black: colors.black,
+      white: colors.white,
+      gray: colors.gray,
+      red: colors.rose,
+      yellow: colors.amber,
+      green: colors.green,
+      blue: colors.sky,
+      indigo: colors.indigo,
+      purple: colors.purple,
+      pink: colors.pink
+    },
     extend: {
       fontFamily: {
         sans: ['Inter', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans]