dark mode support, close #14

2021-08-23 16:14:08 +01:00 · 2021-08-23 16:14:08 +01:00 · ae8ada58ca
parent 96e9dbb2b2
commit ae8ada58ca
19 changed files with 1526 additions and 177 deletions
--- a/components/Breadcrumb.tsx
+++ b/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="p-1 hover:text-black transition-all duration-75 flex-shrink-0">
+        <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll">
+          <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>
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@ -60,10 +60,7 @@ const queryToPath = (query?: ParsedUrlQuery) => {
  return '/'
 }

-const fetcher = (url: string) => {
-  console.log(url)
-  return axios.get(url).then(res => res.data)
-}
+const fetcher = (url: string) => 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="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200">
+      <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 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>
        )}
--- a/components/Loading.tsx
+++ b/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"
--- a/components/Navbar.tsx
+++ b/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>
-        <a href="https://github.com/spencerwooo/onedrive-vercel-index" target="_blank" rel="noopener noreferrer">
+        <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"
+          className="dark:text-white"
+        >
          <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
        </a>
      </div>
--- a/components/previews/AudioPreview.tsx
+++ b/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
--- a/components/previews/CodePreview.tsx
+++ b/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>
--- a/components/previews/MarkdownPreview.tsx
+++ b/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}
--- a/components/previews/PDFPreview.tsx
+++ b/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,
              }}
--- a/components/previews/TextPreview.tsx
+++ b/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">
--- a/components/previews/VideoPreview.tsx
+++ b/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"
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pages/[...path].tsx
+++ b/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} />
--- a/pages/_app.tsx
+++ b/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,
--- a/pages/index.tsx
+++ b/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 />
--- a/styles/markdown-github.css
+++ b/styles/markdown-github.css
--- a/styles/prism-github.css
+++ b/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;
-}
--- a/styles/prism-vsc-dark.css
+++ b/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;
+}
--- a/tailwind.config.js
+++ b/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]