From 93df95bfc052ce2a9cedb017d589daa1a9c36bf7 Mon Sep 17 00:00:00 2001
From: Paul Copplestone <pcopplestone@gmail.com>
Date: Wed, 2 Dec 2020 14:20:43 +0800
Subject: [PATCH] Adjusts colors

---
 www/components/AdminAccess/index.tsx          |  2 +-
 www/components/BuiltWithSupabase/index.tsx    |  4 +-
 www/components/Button.tsx                     |  2 +-
 www/components/Card.tsx                       | 34 ++++-------
 www/components/CaseStudies/benchmark.tsx      |  6 +-
 www/components/CaseStudies/index.tsx          |  4 +-
 www/components/Features/index.tsx             |  2 +-
 www/components/Footer/index.tsx               |  9 ++-
 www/components/Hero.tsx                       |  8 +--
 .../MadeForDevelopers/CodeExamples.tsx        | 60 +++++++++----------
 www/components/MadeForDevelopers/index.tsx    |  4 +-
 www/components/Nav/FlyOut.tsx                 | 15 +++--
 www/components/Nav/index.tsx                  |  2 +-
 www/components/UI/SectionHeader.tsx           | 10 ++--
 www/data/CodeEditorTheme.js                   | 30 +++++-----
 www/tailwind.config.js                        | 29 ++++++---
 16 files changed, 109 insertions(+), 112 deletions(-)

diff --git a/www/components/AdminAccess/index.tsx b/www/components/AdminAccess/index.tsx
index 6956ee2748f..0ccb8ad0c98 100644
--- a/www/components/AdminAccess/index.tsx
+++ b/www/components/AdminAccess/index.tsx
@@ -6,7 +6,7 @@ const AdminAccess = () => {
   const [tabId, setTabId] = useState('tabTableEditor')
 
   return (
-    <div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-24">
+    <div className="py-16 bg-gray-50 dark:bg-dark-700 overflow-hidden lg:py-24">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto max-w-7xl">
           <div className="relative items-center">
diff --git a/www/components/BuiltWithSupabase/index.tsx b/www/components/BuiltWithSupabase/index.tsx
index 3494c668cdb..7f6fde6b1ca 100644
--- a/www/components/BuiltWithSupabase/index.tsx
+++ b/www/components/BuiltWithSupabase/index.tsx
@@ -4,9 +4,9 @@ import ProjectExamples from "data/ProjectExamples.json"
 
 const BuiltExamples = () => {
   return (
-    <div className="relative bg-gray-50 dark:bg-dark-400 pt-12 pb-16">
+    <div className="relative bg-gray-50 dark:bg-dark-600 pt-12 pb-16">
       <div className="absolute inset-0">
-        <div className="mx-auto bg-white dark:bg-dark-400 w-full h-1/3 sm:h-2/3 lg:h-1/2"></div>
+        <div className="mx-auto bg-white dark:bg-dark-600 w-full h-1/3 sm:h-2/3 lg:h-1/2"></div>
       </div>
       <div className="container mx-auto px-8 sm:px-16 xl:px-20 relative">
         <div className="mx-auto max-w-7xl">
diff --git a/www/components/Button.tsx b/www/components/Button.tsx
index f075e658678..458ce97d967 100644
--- a/www/components/Button.tsx
+++ b/www/components/Button.tsx
@@ -19,7 +19,7 @@ const Button = (props: Props) => {
 
   const colorClass = type === 'primary'
     ? 'px-3 py-2 shadow-sm  border border-transparent text-white bg-brand-600 hover:bg-brand-700 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
-    : 'text-brand-600 bg-none'
+    : 'text-brand-700 bg-none'
   
   const textClass = type === 'primary'
     ? 'font-medium left-3 group-hover:left-0'
diff --git a/www/components/Card.tsx b/www/components/Card.tsx
index 18b59ee0d03..4fe7bc98930 100644
--- a/www/components/Card.tsx
+++ b/www/components/Card.tsx
@@ -49,46 +49,36 @@ const Card = (props: Props) => {
   })
 
   return (
-    <a href={url} target="_blank" className="flex flex-col rounded-md shadow-lg overflow-hidden relative transition transform hover:-translate-y-1">
+    <a
+      href={url}
+      target="_blank"
+      className="flex flex-col rounded-md hover:shadow-2xl overflow-hidden relative transition transform hover:border-black dark:hover:border-green-300 border-2 border-black"
+    >
       <div className="flex-shrink-0 dark:bg-dark-500">
-        <img
-          className="h-64 w-full object-cover"
-          src={imgUrl}
-          alt={title}
-        />
+        <img className="h-64 w-full object-cover" src={imgUrl} alt={title} />
       </div>
-      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-200">
+      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-700 border-t-2 border-black">
         <div className="flex-1">
           {/* {icons && (
             <div className="-mt-12 mb-6 flex -space-x-3">
               {iconMarkup}
             </div>
           )} */}
-          <p className="text-sm font-medium capitalize text-gray-600 dark:text-dark-100">
-            {type}
-          </p>
+          <p className="text-sm font-medium capitalize text-gray-600 dark:text-dark-300">{type}</p>
           <div className="block mt-2">
             {/* {logoUrl && <img src={logoUrl} className="h-9 my-4" />} */}
             {title && <p className="text-xl text-gray-900 dark:text-white">{title}</p>}
-            <p className="mt-3 text-base text-gray-500 dark:text-dark-100">
-              {description}
-            </p>
+            <p className="mt-3 text-base text-gray-500 dark:text-dark-300">{description}</p>
           </div>
         </div>
         {type === 'Case Study' && postMeta.name.length > 0 && (
           <div className="mt-6 flex items-center">
             <div className="flex-shrink-0">
               <span className="sr-only">{postMeta.name}</span>
-              <img
-                className="h-10 w-10 rounded-full"
-                src={postMeta.avatarUrl}
-                alt=""
-              />
+              <img className="h-10 w-10 rounded-full" src={postMeta.avatarUrl} alt="" />
             </div>
             <div className="ml-3">
-              <p className="text-sm font-medium text-gray-900 dark:text-white">
-                {postMeta.name}
-              </p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">{postMeta.name}</p>
               <div className="flex space-x-1 text-sm text-gray-500 dark:text-dark-100">
                 <time dateTime="2020-03-16">{postMeta.publishDate}</time>
                 <span aria-hidden="true">&middot;</span>
@@ -97,7 +87,7 @@ const Card = (props: Props) => {
             </div>
           </div>
         )}
-        { ctaText && <Button className="mt-5" type="secondary" text={ctaText} url={url} /> }
+        {/* {ctaText && <Button className="mt-5" type="secondary" text={ctaText} url={url} />} */}
       </div>
     </a>
   )
diff --git a/www/components/CaseStudies/benchmark.tsx b/www/components/CaseStudies/benchmark.tsx
index 20a71f3b86b..0fa0c2db4aa 100644
--- a/www/components/CaseStudies/benchmark.tsx
+++ b/www/components/CaseStudies/benchmark.tsx
@@ -3,13 +3,13 @@ import Button from 'components/Button'
 const Benchmark = () => {
   return (
     <div className="mt-6 lg:mt-16 max-w-lg mx-auto lg:max-w-none lg:mx-0">
-      <div className="bg-dark-300 grid gap-4 items-center shadow-lg rounded-md grid-cols-1 lg:grid-cols-12 overflow-auto">
+      <div className="bg-white grid gap-4 items-center rounded-md grid-cols-1 lg:grid-cols-12 overflow-auto dark:bg-black border-black border-2">
         <div className="col-span-1 lg:col-span-10 flex items-center flex-col lg:flex-row">
           <img className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14 hidden lg:block" src="images/benchmark.svg" />
           <img className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14 lg:hidden" src="images/benchmark--mobile.svg" />
           <div className="px-12 py-5 lg:px-0 lg:py-0">
-            <p className="text-xl text-white">Record breaking speed and reliability</p>
-            <p className="text-gray-400 dark:text-dark-100 mt-2">
+            <p className="text-xl dark:text-white">Record breaking speed and reliability</p>
+            <p className="text-gray-700 dark:text-dark-300 mt-2">
               <span className="block">Supabase is already enterprise level and we’re blown away by the speed!</span>
               <span className="block">Sign up for our public benchmark release and we’ll email it to you</span>
             </p>
diff --git a/www/components/CaseStudies/index.tsx b/www/components/CaseStudies/index.tsx
index d75995400f1..c74f7183377 100644
--- a/www/components/CaseStudies/index.tsx
+++ b/www/components/CaseStudies/index.tsx
@@ -5,9 +5,9 @@ import CaseStudiesData from "data/CaseStudies.json"
 
 const CaseStudies = () => {
   return (
-    <div className="relative bg-gray-50 dark:bg-dark-400 pb-20">
+    <div className="relative bg-gray-50 dark:bg-dark-600 pb-20">
       <div className="absolute inset-0">
-        <div className="mx-auto bg-white dark:bg-dark-300 h-1/5 sm:h-2/5 w-full"></div>
+        <div className="mx-auto bg-white dark:bg-dark-700 h-1/5 sm:h-2/5 w-full"></div>
       </div>
       <div className="container relative mx-auto px-8 sm:px-16 xl:px-20 lg:py-8">
         <div className="relative max-w-7xl mx-auto">
diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx
index 8c320864bf0..82f6a51f52a 100644
--- a/www/components/Features/index.tsx
+++ b/www/components/Features/index.tsx
@@ -34,7 +34,7 @@ const Features = () => {
   })
 
   return (
-    <div className="bg-gray-50 dark:bg-dark-400 overflow-hidden py-12">
+    <div className="bg-gray-50 dark:bg-dark-600 overflow-hidden py-12">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto max-w-7xl">
           <SectionHeader
diff --git a/www/components/Footer/index.tsx b/www/components/Footer/index.tsx
index 61dc8cd574e..39a0faf460e 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -61,7 +61,7 @@ const Footer = (props: Props) => {
   )
 
   return (
-    <footer className="bg-white dark:bg-dark-500" aria-labelledby="footerHeading">
+    <footer className="bg-white dark:bg-dark-600" aria-labelledby="footerHeading">
       <h2 id="footerHeading" className="sr-only">
         Footer
       </h2>
@@ -73,7 +73,6 @@ const Footer = (props: Props) => {
               src={darkMode ? 'images/logo-dark.png' : 'images/logo-light.png'}
               alt="Supabase"
             />
-            <p className="text-gray-500 text-base sr-only">Any description</p>
             <div className="flex space-x-6">
               <a
                 href="https://twitter.com/supabase_io"
@@ -85,7 +84,7 @@ const Footer = (props: Props) => {
                 </svg>
               </a>
 
-              <a href="https://github.com/supabase" className="text-gray-400 hover:text-gray-500">
+              <a href="https://github.com/supabase" className="text-gray-300 hover:text-gray-400">
                 <span className="sr-only">GitHub</span>
                 <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                   <path
@@ -102,7 +101,7 @@ const Footer = (props: Props) => {
               {FooterLinks.map((segment: any) => {
                 return (
                   <div key={`footer_${segment.title}`}>
-                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-200 tracking-wider uppercase">
+                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-300 tracking-wider uppercase">
                       {segment.title}
                     </h3>
                     <ul className="mt-4 space-y-4">
@@ -133,7 +132,7 @@ const Footer = (props: Props) => {
           </div>
         </div>
         <div className="mt-12 border-t border-gray-200 dark:border-dark-300 pt-8 flex justify-between">
-          <p className="text-base text-gray-400 dark:text-dark-200">&copy; Supabase Inc</p>
+          <p className="text-base text-gray-400 dark:text-dark-300">&copy; Supabase Inc</p>
           <div className="flex items-center">
             <SunEmoji />
             <button
diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index 022964f3a2c..b09a6753d47 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -3,7 +3,7 @@ import Button from 'components/Button'
 
 const Hero = () => {
   return (
-    <div className="relative bg-dark-500 overflow-hidden">
+    <div className="relative bg-dark-700 overflow-hidden">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto max-w-7xl">
           <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
@@ -40,16 +40,16 @@ const Hero = () => {
                       <span className="md:block">The Open Source</span>
                       <span className="text-brand-600 ml-2 md:ml-0 md:block">Firebase Alternative</span>
                     </h1>
-                    <p className="mt-5 text-base text-gray-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                    <p className="mt-5 text-base text-dark-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                       Create your new project backend in less than 2 minutes with easy to use Postgres Database and Authentication.
                     </p>
-                    <p className="mt-3 text-base text-dark-100">
+                    <p className="mt-3 text-base text-dark-400">
                       Storage and serverless functions coming soon
                     </p>
 
                     <Button className="mt-10 py-3" text="Start your project" url="#"/>
 
-                    <p className="mt-8 text-sm text-gray-400 tracking-wide sm:mt-10">
+                    <p className="mt-8 text-sm text-dark-400 tracking-wide sm:mt-10">
                       backed by
                     </p>
                     <div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">
diff --git a/www/components/MadeForDevelopers/CodeExamples.tsx b/www/components/MadeForDevelopers/CodeExamples.tsx
index f8080c63f5b..56a20bf03af 100644
--- a/www/components/MadeForDevelopers/CodeExamples.tsx
+++ b/www/components/MadeForDevelopers/CodeExamples.tsx
@@ -75,37 +75,33 @@ const CodeExamples = () => {
 
   return (
     <div className="grid grid-cols-12 gap-2 xl:gap-8">
-      <div className="col-span-12 text-center lg:col-span-3 lg:hidden">
-        {buttons}
-      </div>
+      <div className="col-span-12 text-center lg:col-span-3 lg:hidden">{buttons}</div>
       <div className="col-span-12 lg:col-span-9">
-        <div className="rounded-md rounded-b-lg bg-dark-600">
+        <div className="rounded-md rounded-b-lg bg-dark-600 dark:bg-dark-700">
           <div className="p-2 pl-5 flex justify-between items-center">
-          <p className="text-sm truncate mr-2 sm:text-base text-dark-100">
-            {
-              // @ts-ignore
-              examples[example].description
-            }
-          </p>
-          <CopyToClipboard
-            text={
-              // @ts-ignore
-              examples[example].code[lang]
-            }
-            onCopy={() => setCopied(true)}
-          >
-            <button
-              type="button"
-              className="inline-flex items-center px-2.5 py-1.5 border border-dark-300 shadow-sm text-xs font-medium rounded text-dark-100 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            <p className="text-sm truncate mr-2 sm:text-base text-dark-100">
+              {
+                // @ts-ignore
+                examples[example].description
+              }
+            </p>
+            <CopyToClipboard
+              text={
+                // @ts-ignore
+                examples[example].code[lang]
+              }
+              onCopy={() => setCopied(true)}
             >
-              <span className="hidden sm:block">
-                {copied ? 'Copied!' : 'Copy code'}
-              </span>
-              <span className="block sm:hidden">
-                {copied ? <CopiedIcon /> : <ClipboardIcon />}
-              </span>
-            </button>
-          </CopyToClipboard>
+              <button
+                type="button"
+                className="inline-flex items-center px-2.5 py-1.5 border border-dark-300 shadow-sm text-xs font-medium rounded text-dark-100 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                <span className="hidden sm:block">{copied ? 'Copied!' : 'Copy code'}</span>
+                <span className="block sm:hidden">
+                  {copied ? <CopiedIcon /> : <ClipboardIcon />}
+                </span>
+              </button>
+            </CopyToClipboard>
           </div>
           <SyntaxHighlighter
             // startingLineNumber={3}
@@ -118,11 +114,11 @@ const CodeExamples = () => {
               fontSize: 12,
               lineHeight: 1.2,
               borderTop: '1px solid #393939',
-              background: '#181818'
+              background: '#181818',
             }}
             showLineNumbers
             lineNumberContainerStyle={{
-              paddingTop: '128px'
+              paddingTop: '128px',
             }}
             lineNumberStyle={{
               minWidth: '48px',
@@ -141,9 +137,7 @@ const CodeExamples = () => {
           </SyntaxHighlighter>
         </div>
       </div>
-      <div className="col-span-12 text-center hidden lg:col-span-3 lg:block">
-        {buttons}
-      </div>
+      <div className="col-span-12 text-center hidden lg:col-span-3 lg:block">{buttons}</div>
     </div>
   )
 }
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 62a4b60b0e9..6f1cbdcab25 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -7,7 +7,7 @@ import DeveloperFeatures from 'data/DeveloperFeatures.json'
 
 const MadeForDevelopers = () => {
   return (
-    <div className="py-16 bg-gray-50 dark:bg-dark-400 overflow-hidden lg:py-16">
+    <div className="py-16 bg-gray-50 dark:bg-dark-600 overflow-hidden lg:py-16">
       <div className="container mx-auto px-8 sm:px-16  xl:px-20">
         
         <div className="grid grid-cols-12">
@@ -32,7 +32,7 @@ const MadeForDevelopers = () => {
 
                 {DeveloperFeatures.map((feature: any, idx: number) => {
                   const blockClass = idx !== DeveloperFeatures.length - 1
-                    ? 'col-span-12 mb-10 sm:mb-0 sm:col-span-3 sm:border-r-2 sm:border-gray-200 sm:pr-4 md:pr-6 dark:border-dark-200'
+                    ? 'col-span-12 mb-10 sm:mb-0 sm:col-span-3 sm:border-r-2 sm:border-gray-200 sm:pr-4 md:pr-6 dark:border-dark-500'
                     : 'col-span-12 sm:col-span-3'
 
                   return (
diff --git a/www/components/Nav/FlyOut.tsx b/www/components/Nav/FlyOut.tsx
index 84d3a08d0f9..fbeacfc2de5 100644
--- a/www/components/Nav/FlyOut.tsx
+++ b/www/components/Nav/FlyOut.tsx
@@ -80,7 +80,7 @@ const FlyOut = () => {
       >
         <span>Product</span>
         <svg
-          className="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150"
+          className="ml-2 h-5 w-5 text-gray-300 group-hover:text-gray-300 transition ease-in-out duration-150"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
@@ -117,8 +117,8 @@ const FlyOut = () => {
             }}
           >
             <div className="absolute inset-0 flex sm:flex-col lg:flex-row" aria-hidden="true">
-              <div className="bg-white dark:bg-dark-400 sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full"></div>
-              <div className="bg-gray-50 dark:bg-dark-300 sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full"></div>
+              <div className="bg-white dark:bg-dark-600 sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full"></div>
+              <div className="bg-gray-50 dark:bg-dark-500 sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full"></div>
               {/* <div className="bg-gray-50 dark:bg-dark-300 md:hidden lg:block lg:w-1/2"></div> */}
             </div>
             <div className="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
@@ -134,9 +134,12 @@ const FlyOut = () => {
                     Latest news
                   </h3>
                   <ul className="mt-6 space-y-6">
-                    {CaseStudiesData.map((caseStudy: any, idx:number) => (
+                    {CaseStudiesData.map((caseStudy: any, idx: number) => (
                       <li className="flow-root" key={`flyout_case_${idx}`}>
-                        <a href={caseStudy.url} className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150">
+                        <a
+                          href={caseStudy.url}
+                          className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150"
+                        >
                           <div className="hidden sm:block flex-shrink-0">
                             <img
                               className="w-32 h-20 object-cover rounded-md"
@@ -159,7 +162,7 @@ const FlyOut = () => {
                 </div>
                 <div className="mt-6 text-sm font-medium">
                   <a
-                    href="#"
+                    href="/blog"
                     className="text-gray-600 hover:text-gray-500 dark:text-brand-600 dark:hover:text-brand-700 transition ease-in-out duration-150"
                   >
                     View all posts <span aria-hidden="true">&rarr;</span>
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 1feaea1d9a5..2a26836ef7d 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -127,7 +127,7 @@ const Nav = (props: Props) => {
   )
 
   return (
-    <nav className="bg-white dark:bg-dark-500 z-50 shadow-lg sticky">
+    <nav className="bg-white dark:bg-dark-700 z-50 sticky">
       <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0">
         
         <HamburgerButton toggleFlyOut={() => setOpen(true)} />
diff --git a/www/components/UI/SectionHeader.tsx b/www/components/UI/SectionHeader.tsx
index e5f58b584b1..2979ef025e8 100644
--- a/www/components/UI/SectionHeader.tsx
+++ b/www/components/UI/SectionHeader.tsx
@@ -1,19 +1,19 @@
 const SectionHeader = (props :any) => {
   return (
-    <div className={"grid grid-cols-12 gap-1 sm:gap-8 " + props.className}>
+    <div className={'grid grid-cols-12 gap-1 sm:gap-8 ' + props.className}>
       <div className="relative py-12 col-span-12">
-        <span className="block mb-6 text-sm tracking-widest uppercase text-gray-400 font-mono">
+        <span className="block mb-6 text-sm tracking-widest uppercase text-gray-600 font-mono dark:text-gray-300">
           {props.subtitle}
         </span>
-        <h2 className="text-gray-900 dark:text-white text-3xl md:text-4xl lg:text-5xl">
+        <h2 className="text-black dark:text-white text-3xl md:text-4xl lg:text-5xl">
           {props.title}
           {props.title_alt && (
-            <span className="text-gray-600 dark:text-gray-400 inline">{props.title_alt}</span>
+            <span className="text-gray-600 dark:text-gray-300 inline">{props.title_alt}</span>
           )}
         </h2>
         <div>
           {props.paragraph && (
-            <p className="mt-3 mx-auto text-xl text-gray-400 dark:text-gray-200 sm:mt-4">
+            <p className="mt-3 mx-auto text-xl text-gray-600 dark:text-gray-300 sm:mt-4">
               {props.paragraph}
             </p>
           )}
diff --git a/www/data/CodeEditorTheme.js b/www/data/CodeEditorTheme.js
index d9b51c7b9d4..d49ec0d1da1 100644
--- a/www/data/CodeEditorTheme.js
+++ b/www/data/CodeEditorTheme.js
@@ -46,52 +46,52 @@ const monokaiCustomTheme = {
     "color": "#bf79db"
   },
   "hljs-string": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-bullet": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-subst": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-title": {
-    "color": "#05b560",
+    "color": "#3ECF8E",
     "fontWeight": "bold"
   },
   "hljs-section": {
-    "color": "#05b560",
+    "color": "#3ECF8E",
     "fontWeight": "bold"
   },
   "hljs-emphasis": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-type": {
-    "color": "#05b560",
+    "color": "#3ECF8E",
     "fontWeight": "bold"
   },
   "hljs-built_in": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-builtin-name": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-selector-attr": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-selector-pseudo": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-addition": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-variable": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-template-tag": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-template-variable": {
-    "color": "#05b560"
+    "color": "#3ECF8E"
   },
   "hljs-comment": {
     "color": "#75715e"
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index d0e52e26e85..6148f249cb1 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -38,15 +38,26 @@ module.exports = {
         },
         // Joshen TODO: At the end just rearrange the values
         dark: {
-          100: '#828282',
-          200: '#424242',
-          300: '#3A3A3A',
-          400: '#292929',
-          500: '#202020',
-          600: '#1E1E1E',
-          700: '#181818',
-          800: '#101010',
-          900: '#000000',
+          100: '#eeeeee',
+          200: '#e0e0e0',
+          300: '#bbbbbb',
+          400: '#666666',
+          500: '#444444',
+          600: '#2a2a2a',
+          700: '#1f1f1f',
+          800: '#181818',
+          900: '#0f0f0f',
+        },
+        gray: {
+          100: '#eeeeee',
+          200: '#e0e0e0',
+          300: '#bbbbbb',
+          400: '#666666',
+          500: '#444444',
+          600: '#2a2a2a',
+          700: '#1f1f1f',
+          800: '#181818',
+          900: '#0f0f0f',
         },
       },
       spacing: {