feat: improve prism code syntax theme

pages/_app.tsx

@@ -5,7 +5,10 @@ import 'styles/global.css'
 import 'react-notion-x/src/styles.css'
 
 // used for code syntax highlighting (optional)
-import 'prismjs/themes/prism-tomorrow.css'
+import 'prismjs/themes/prism-coy.css'
+
+// this is better for dark mode
+// import 'prismjs/themes/prism-okaidia.css'
 
 // used for collection views (optional)
 // TODO: re-add if we enable collection view dropdowns
@@ -17,6 +20,15 @@ import 'prismjs/themes/prism-tomorrow.css'
 // global style overrides for notion
 import 'styles/notion.css'
 
+// global style overrides for prism theme
+import 'styles/prism-theme.css'
+
+import 'prismjs'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-bash'
+
 import React from 'react'
 import { useRouter } from 'next/router'
 import { bootstrap } from 'lib/bootstrap-client'

styles/notion.css

@@ -122,10 +122,17 @@
   margin: 2em 0;
 }
 
-@media only screen and (max-width: 900px) {
-  .notion-collection {
-    padding-left: 8px;
-    padding-right: 8px;
+@media only screen and (max-width: 920px) {
+  .index-page.notion-page {
+    padding-left: 2vw;
+    padding-right: 2vw;
+  }
+}
+
+@media only screen and (max-width: 720px) {
+  .notion-page {
+    padding-left: 2vw;
+    padding-right: 2vw;
   }
 }
 
@@ -187,3 +194,9 @@
   border-radius: 50%;
   box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
 }
+
+.notion-code {
+  background: rgba(249, 250, 251, 1);
+  border: 1px solid rgba(229, 231, 235, 1);
+  border-radius: 0.375rem;
+}

styles/prism-theme.css

@@ -0,0 +1,117 @@
+/* prism theme adjustments */
+
+.notion pre {
+  background-color: rgba(249, 250, 251, 1);
+}
+.dark-mode .notion pre {
+  background-color: rgba(17, 24, 39, 1);
+}
+.notion pre {
+  border-color: rgba(229, 231, 235, 1);
+}
+.dark-mode .notion pre {
+  border-color: rgba(55, 65, 81, 1);
+}
+.notion pre {
+  border-width: 1px;
+}
+.notion code {
+  background-color: rgba(243, 244, 246, 1);
+}
+.dark-mode .notion code {
+  background-color: rgba(17, 24, 39, 1);
+}
+.notion code {
+  border-color: rgba(243, 244, 246, 1);
+}
+.dark-mode .notion code {
+  border-color: rgba(31, 41, 55, 1);
+}
+.notion code {
+  border-radius: 0.375rem;
+  border-width: 1px;
+  color: rgba(31, 41, 55, 1);
+}
+.dark-mode .notion code {
+  color: rgba(229, 231, 235, 1);
+}
+.notion img {
+  margin: 0;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: rgba(55, 65, 81, 1);
+}
+.dark-mode .token.cdata,
+.dark-mode .token.comment,
+.dark-mode .token.doctype,
+.dark-mode .token.prolog {
+  color: rgba(209, 213, 219, 1);
+}
+.token.punctuation {
+  color: rgba(55, 65, 81, 1);
+}
+.dark-mode .token.punctuation {
+  color: rgba(209, 213, 219, 1);
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: rgba(16, 185, 129, 1);
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: rgba(139, 92, 246, 1);
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  color: rgba(245, 158, 11, 1);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: rgba(59, 130, 246, 1);
+}
+.token.class-name,
+.token.function {
+  color: rgba(236, 72, 153, 1);
+}
+.token.important,
+.token.regex,
+.token.variable {
+  color: rgba(245, 158, 11, 1);
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  color: rgba(31, 41, 55, 1);
+}
+.dark-mode code[class*='language-'],
+.dark-mode pre[class*='language-'] {
+  color: rgba(249, 250, 251, 1);
+}
+pre::-webkit-scrollbar {
+  display: none;
+}
+pre {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+  background: none;
+}