Tweak colors

.babelrc

@@ -3,7 +3,7 @@
         "@loadable/babel-plugin",
         ["prismjs", {
             "languages": ["css", "html", "javascript", "jsx", "tsx"],
-            "theme": "twilight",
+            // "theme": "okaidia",
             "css": true
         }]
     ],

client/components/SampleCode.tsx

@@ -19,15 +19,6 @@ const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang
             : (
                 <pre
                     className={`language-${lang}`}
-                    style={{
-                        border: 'none',
-                        borderRadius: 0,
-                        boxShadow: 'none',
-                        fontFamily: "'Source Code Pro', monospace",
-                        height: fullHeight ? '100%' : 'auto',
-                        lineHeight: 1.5,
-                        margin: 0,
-                    }}
                     dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
                 />
             );

client/components/coverCard.css

@@ -5,7 +5,7 @@
 
 .cover {
     align-items: center;
-    color: var(--text-color);
+    color: var(--color-gray-9);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;

client/components/heading.css

@@ -4,6 +4,7 @@
  */
 
 .heading {
+    color: var(--color-gray-9);
     display: grid;
     font-size: 2rem;
     grid-template-columns: 1fr auto 1fr;
@@ -13,6 +14,6 @@
 .heading::before,
 .heading::after {
     align-self: center;
-    border-top: 0.25rem double var(--text-color);
+    border-top: 0.25rem double var(--color-gray-9);
     content: '';
 }

client/index.css

@@ -5,7 +5,11 @@
 
 :root {
     --background-color: #e7d900;
-    --text-color: #111827;
+    --color-blue-6: #2563EB;
+    --color-gray-2: #E5E7EB;
+    --color-gray-5: #6B7280;
+    --color-gray-8: #27272A;
+    --color-gray-9: #111827;
 } 
 body {
     font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -60,19 +64,85 @@ a {
     width: 20rem;
 }
 .hero__heading {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     font-size: 2rem;
     line-height: 1.5;
     text-align: center;
     text-transform: capitalize;
 }
 .hero__subheading {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     font-size: 1.5rem;
     line-height: 1.5;
     text-align: center;
 }
 
+/*
+Prism theme
+Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
+*/
+pre {
+    background: var(--color-gray-8);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+    color: #FFF;
+    font-family: "Source Code Pro", monospace;
+    height: 100%;
+    line-height: 1.5;
+    margin: 0px;
+    overflow: auto;
+    padding: 1rem;
+}
+
+.token.tag,
+.token.class-name,
+.token.selector,
+.token.selector .class,
+.token.function {
+    color: #E879F9;
+}
+
+.token.attr-name,
+.token.keyword,
+.token.rule,
+.token.operator,
+.token.pseudo-class,
+.token.important {
+    color: #22D3EE;
+}
+
+.token.attr-value,
+.token.class,
+.token.string,
+.token.number,
+.token.unit,
+.token.color {
+    color: #BEF264;
+}
+
+.token.punctuation,
+.token.module,
+.token.property {
+    color: #BAE6FD;
+}
+
+.token.atapply .token:not(.rule):not(.important) {
+    color: inherit;
+}
+
+.language-shell .token:not(.comment) {
+    color: inherit;
+}
+
+.language-css .token.function {
+    color: inherit;
+}
+
+.token.comment {
+    color: #A1A1AA;
+}
+
 /* Responsive */
 @media (min-width: 640px) {
     .sidebar {

client/layouts/footer.css

@@ -7,7 +7,8 @@
     padding: 2rem 0;
 }
 .footer__about {
-    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    border-bottom: 1px solid var(--color-gray-2);
+    color: var(--color-gray-9);
     display: flex;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
@@ -17,7 +18,7 @@
 }
 .footer__social {
     margin-left: 0.5rem;
-    color: var(--text-color);
+    color: var(--color-gray-5);
 }
 .footer__grid {
     margin-left: -1rem;
@@ -37,7 +38,7 @@
     margin: 0.25rem 0;
 }
 .footer__product a {
-    color: var(--text-color);
+    color: var(--color-gray-5);
 }
 @media (min-width: 640px) {
     .footer__grid {

client/layouts/header.css

@@ -16,6 +16,6 @@
     margin-right: auto;
 }
 .header__nav a {
-    color: var(--text-color);
+    color: var(--color-gray-9);
     margin-left: 1rem;
 }

client/pages/homePage.css

@@ -15,12 +15,13 @@
     width: 50%;
 }
 .home__icon {
-    color: #1e1d6e;
+    color: var(--color-blue-6);
     margin-bottom: 1rem;
 }
 .home__title {
+    color: var(--color-gray-5);
     font-size: 1.5rem;
-    font-weight: 500;
+    font-weight: 600;
 }
 
 .home__patterns {
@@ -42,6 +43,7 @@
     z-index: 10;
 }
 .home__heading {
+    color: var(--color-gray-9);
     font-size: 4rem;
     font-weight: 600;
     margin-bottom: 1rem;
@@ -49,7 +51,7 @@
 .home__explore {
     background-color: var(--background-color);
     border-radius: 0.4rem;
-    color: var(--text-color);
+    color: var(--color-gray-9);
     font-size: 1.5rem;
     font-weight: 600;
     padding: 1rem 2rem;

client/placeholders/browserFrame.css

@@ -7,12 +7,14 @@
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.25rem;
 }
+
 .demo__live {
     height: 32rem;
 }
+
 .demo__css,
 .demo__html {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
     height: 16rem;
     overflow: auto;
 }