From 7dbffe6cd8e508b1dd025bf73b2f303b7963f542 Mon Sep 17 00:00:00 2001
From: iamayushdas <ayush24das@gmail.com>
Date: Sat, 10 Apr 2021 11:49:42 +0530
Subject: [PATCH 1/5] fix: darkMode enhanced

---
 website/src/css/customTheme.css | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 5d2d6132cdf2e..bc10f097ad1db 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -7,12 +7,18 @@
   --ifm-color-primary-dark: #a5a0a0;
   --ifm-color-primary-darker: #9a2521;
   --ifm-color-shadow--lw: #7f1e1b;
-
+  --ifn-color-title: #101827;
   --color-primary: #e8433e;
   --color-secondary: #4b5563;
   --color-secondary-bg: #f3f4f6;
 }
 
+html[data-theme='dark'] {
+  --color-secondary-bg: gray;
+  --ifm-color-dark: gray;
+  --ifn-color-title: gray;
+}
+
 body {
   font-family: "Inter", sans-serif;
 }
@@ -83,7 +89,7 @@ header h2 {
 .home-splash .title {
   font-size: 5rem;
   font-weight: 800;
-  color: #101827;
+  color: var(--ifn-color-title);
 }
 @media only screen and (min-device-width: 376px) and (max-device-width: 736px) {
   .home-splash .title {
@@ -106,14 +112,14 @@ header h2 {
 }
 
 .home-splash .subtitle {
-  color: #000000;
-  opacity: 0.58;
+  color: var(--ifm-color-dark);
+  opacity: 0.70;
   font-size: 1.2rem;
   width: 65%;
 }
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
   .home-splash .subtitle {
-    color: #000000;
+    color: var(--ifm-color-dark);
     opacity: 0.58;
     font-size: 1.2rem;
     width: 100%;
@@ -213,7 +219,7 @@ header h2 {
   flex-direction: column;
   justify-content: space-between;
   text-align: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--color-secondary-bg);
   margin: 8px;
   padding: 8px 18px;
   border-radius: 6px;
@@ -231,7 +237,7 @@ header h2 {
 }
 .events-section .event-item .event-title {
   font-weight: 500;
-  color: #000;
+  color: var(--ifm-color-dark);
   opacity: 0.88;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -240,14 +246,14 @@ header h2 {
   transition: all 0.3s;
 }
 .events-section .event-item .event-publish-time {
-  color: #000;
+  color: var(--ifm-color-dark);
   opacity: 0.58;
   font-size: 12px;
 }
 .events-section .event-item .event-read-button {
   margin-top: 16px;
   font-weight: 500;
-  color: #000;
+  color: var(--ifm-color-dark);
   opacity: 0.58;
   font-size: 12px;
   transition: all 0.3s;
@@ -307,7 +313,7 @@ header h2 {
   color: #ef4444;
 }
 .button.github {
-  background: #101827;
+  background: var(--ifm-color-dark);
   color: white;
   display: inline-flex;
   align-items: center;

From de25fe3ea1de4122680f4014fba98d85932842f5 Mon Sep 17 00:00:00 2001
From: iamayushdas <ayush24das@gmail.com>
Date: Sat, 10 Apr 2021 15:55:14 +0530
Subject: [PATCH 2/5] fix: darkMode enhanced

---
 website/src/css/customTheme.css | 46 +++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index bc10f097ad1db..e45ca48cc6554 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -3,20 +3,29 @@
   --ifm-color-primary-lighter: #d0312d;
   --ifm-color-primary-light: #f8f8fa;
   --ifm-color-primary: #e8433e;
-  --ifm-color-dark: #000000;
+  --ifm-color-dark: #000;
   --ifm-color-primary-dark: #a5a0a0;
   --ifm-color-primary-darker: #9a2521;
   --ifm-color-shadow--lw: #7f1e1b;
-  --ifn-color-title: #101827;
+  --color-title: #101827;
+  --color-github-button: #101827;
+  --color-github-button-hover: #000;
   --color-primary: #e8433e;
+  --color-subtitle: #000;
   --color-secondary: #4b5563;
   --color-secondary-bg: #f3f4f6;
+  --color-secondary-text: #444952;
+  --color-border: #eee;
 }
 
 html[data-theme='dark'] {
-  --color-secondary-bg: gray;
-  --ifm-color-dark: gray;
-  --ifn-color-title: gray;
+  --color-secondary-bg: #000;
+  --ifm-color-dark: #b0b0b0;
+  --color-title: #f0f0f0;
+  --color-subtitle: #f0f0f0;
+  --color-github-button: gray;
+  --color-secondary-text: #b0b0b0;
+  --color-border: #b0b0b0;
 }
 
 body {
@@ -89,7 +98,7 @@ header h2 {
 .home-splash .title {
   font-size: 5rem;
   font-weight: 800;
-  color: var(--ifn-color-title);
+  color: var(--color-title);
 }
 @media only screen and (min-device-width: 376px) and (max-device-width: 736px) {
   .home-splash .title {
@@ -112,8 +121,8 @@ header h2 {
 }
 
 .home-splash .subtitle {
-  color: var(--ifm-color-dark);
-  opacity: 0.70;
+  color: var(--color-subtitle);
+  opacity: 0.58;
   font-size: 1.2rem;
   width: 65%;
 }
@@ -219,7 +228,7 @@ header h2 {
   flex-direction: column;
   justify-content: space-between;
   text-align: left;
-  border: 1px solid var(--color-secondary-bg);
+  border: 1px solid var(--color-border);
   margin: 8px;
   padding: 8px 18px;
   border-radius: 6px;
@@ -237,7 +246,7 @@ header h2 {
 }
 .events-section .event-item .event-title {
   font-weight: 500;
-  color: var(--ifm-color-dark);
+  color: var(--color-subtitle);
   opacity: 0.88;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -246,14 +255,14 @@ header h2 {
   transition: all 0.3s;
 }
 .events-section .event-item .event-publish-time {
-  color: var(--ifm-color-dark);
+  color: var(--color-subtitle);
   opacity: 0.58;
   font-size: 12px;
 }
 .events-section .event-item .event-read-button {
   margin-top: 16px;
   font-weight: 500;
-  color: var(--ifm-color-dark);
+  color: var(--color-subtitle);
   opacity: 0.58;
   font-size: 12px;
   transition: all 0.3s;
@@ -290,11 +299,14 @@ header h2 {
 }
 .learn-how .hero__title {
   font-weight: 700;
-  color: black;
+  color: var(--color-subtitle);
   opacity: 0.84;
   font-size: 2.2rem;
   margin-bottom: 10px;
 }
+.learn-how .hero__subtitle{
+  color: var(--color-secondary-text);
+}
 
 /* button */
 .button {
@@ -313,7 +325,7 @@ header h2 {
   color: #ef4444;
 }
 .button.github {
-  background: var(--ifm-color-dark);
+  background: var(--color-github-button);
   color: white;
   display: inline-flex;
   align-items: center;
@@ -327,7 +339,7 @@ header h2 {
   margin: 0 12px 1px 0px;
 }
 .button.github:hover {
-  background: #000;
+  background: var(--color-github-button-hover);
 }
 .button-wrapper {
   margin: 0 -10px;
@@ -552,14 +564,14 @@ a:hover {
   padding: 5px 30px;
   border-style: solid;
   border-radius: 9px;
-  background: #111827;
+  background: var(--color-github-button);
   color: white;
   margin: 4px;
   text-decoration: none;
   transition: all 0.3s;
 }
 .news-button:hover {
-  background: black;
+  background: var(--color-github-button-hover);
   color: white;
   text-decoration: none;
 }

From 58754744e320b894f387a92bd837374fde132773 Mon Sep 17 00:00:00 2001
From: iamayushdas <ayush24das@gmail.com>
Date: Sun, 11 Apr 2021 11:39:31 +0530
Subject: [PATCH 3/5] fix: darkMode enhanced

---
 website/src/css/customTheme.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index e45ca48cc6554..3b03728c9c00c 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -19,11 +19,11 @@
 }
 
 html[data-theme='dark'] {
-  --color-secondary-bg: #000;
+  --color-secondary-bg: #121212;
   --ifm-color-dark: #b0b0b0;
   --color-title: #f0f0f0;
   --color-subtitle: #f0f0f0;
-  --color-github-button: gray;
+  --color-github-button: #121212;
   --color-secondary-text: #b0b0b0;
   --color-border: #b0b0b0;
 }

From 9d45847aad011efcc926b9bf5a91c28e19d2b282 Mon Sep 17 00:00:00 2001
From: iamayushdas <ayush24das@gmail.com>
Date: Mon, 12 Apr 2021 15:20:48 +0530
Subject: [PATCH 4/5] fix: darkMode enhanced

---
 website/src/css/customTheme.css            | 60 ++++++++++++++++++++++
 website/src/pages/docs.js                  |  7 ++-
 website/src/pages/downloads/ProjectCard.js | 21 ++++----
 website/src/pages/help.js                  |  1 +
 website/src/pages/team.js                  |  6 +--
 5 files changed, 76 insertions(+), 19 deletions(-)

diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 3b03728c9c00c..d6d9e526a925e 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -16,6 +16,16 @@
   --color-secondary-bg: #f3f4f6;
   --color-secondary-text: #444952;
   --color-border: #eee;
+  --color-downloads-subtitle: #374051;
+  --color-downloads-leftsidelinks: #4b5563;
+  --color-downloads-leftsidelink-hover: #111827;
+  --color-downloads-rightside-versioninfo: #6b7280;
+  --color-downloads-rightside-versioninfo-span: #374151;
+  --color-team-repocard: #374151;
+  --color-team-repocard-hover: #111827;
+  --color-docs-subtitle: #374151;
+  --color-docs-versioninfo: #4b5563;
+  --color-help-subtitle: #6b7280;
 }
 
 html[data-theme='dark'] {
@@ -26,6 +36,16 @@ html[data-theme='dark'] {
   --color-github-button: #121212;
   --color-secondary-text: #b0b0b0;
   --color-border: #b0b0b0;
+  --color-downloads-subtitle: #f0f0f0;
+  --color-downloads-leftsidelinks: #909397;
+  --color-downloads-leftsidelink-hover: #f0f0f0;
+  --color-downloads-rightside-versioninfo: #f0f0f0;
+  --color-downloads-rightside-versioninfo-span: #909397;
+  --color-team-repocard: #f0f0f0;
+  --color-team-repocard-hover: #909397;
+  --color-docs-subtitle: #f0f0f0;
+  --color-docs-versioninfo: #b0b0b0;
+  --color-help-subtitle: #f0f0f0;
 }
 
 body {
@@ -584,3 +604,43 @@ a:hover {
   color: var(--color-primary);
   text-align: center;
 }
+
+.downloads-subtitle {
+  color: var(--color-downloads-subtitle);
+}
+
+.downloads-leftsidelinks {
+  color: var(--color-downloads-leftsidelinks);
+}
+
+.downloads-leftsidelink:hover {
+  color: var(--color-downloads-leftsidelink-hover);
+}
+
+.downloads-versioninfo {
+  color: var(--color-downloads-rightside-versioninfo);
+}
+
+.downloads-versioninfo-span {
+  color: var(--color-downloads-rightside-versioninfo-span)
+}
+
+.team-repocard {
+  color: var(--color-team-repocard)
+}
+
+.team-repocard:hover {
+  color: var(--color-team-repocard-hover);
+}
+
+.docs-subtitle {
+  color: var(--color-docs-subtitle);
+}
+
+.docs-versioninfo {
+  color: var(--color-docs-versioninfo);
+}
+
+.help-page .card p {
+  color: var(--color-help-subtitle);
+}
diff --git a/website/src/pages/docs.js b/website/src/pages/docs.js
index e41b96989384e..f0bbd0fc9d6ab 100644
--- a/website/src/pages/docs.js
+++ b/website/src/pages/docs.js
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import "../css/customTheme.css";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
@@ -70,7 +71,6 @@ const Title = styled.div`
   }
 `;
 const Description = styled.div`
-  color: #374151;
   font-size: 1rem;
   margin-top: 0px;
   @media (max-width: 600px) {
@@ -94,7 +94,6 @@ const VersionInfo = styled.div`
   display: inline-flex;
   font-size: 1rem;
   margin-top: 1rem;
-  color: #4b5563;
   span {
     font-weight: 500;
   }
@@ -126,8 +125,8 @@ const ProjectCard = (props) => {
         <ShapeBeforeTitle color={color}>{shapeComponent}</ShapeBeforeTitle>
         {name}
       </Title>
-      <Description>{description}</Description>
-      <VersionInfo>
+      <Description className="docs-subtitle">{description}</Description>
+      <VersionInfo className="docs-versioninfo">
         Latest version&nbsp;<span>{version}</span>&nbsp;released at&nbsp;
         <span>{releaseDate}</span>
       </VersionInfo>
diff --git a/website/src/pages/downloads/ProjectCard.js b/website/src/pages/downloads/ProjectCard.js
index 6fea95461dc43..6c305dbf8e310 100644
--- a/website/src/pages/downloads/ProjectCard.js
+++ b/website/src/pages/downloads/ProjectCard.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
 import useOutsideClick from "../../hooks/useOutsideClick";
-
+import "../../css/customTheme.css";
 import IconInfo from "../../assets/icons/info.svg";
 import IconStar from "../../assets/icons/star.svg";
 import IconDocumentText from "../../assets/icons/document-text.svg";
@@ -68,9 +68,10 @@ const ProjectCard = (props) => {
           <ShapeBeforeTitle color={color}>{shapeComponent}</ShapeBeforeTitle>
           {name}
         </Title>
-        <Description>{description}</Description>
-        <LeftSideLinks>
+        <Description className="downloads-subtitle">{description}</Description>
+        <LeftSideLinks className="downloads-leftsidelinks">
           <LeftSideLink
+            className="downloads-leftsidelink"
             href={`https://github.com/${githubRepo}`}
             target="_blank"
             title="Stars"
@@ -78,6 +79,7 @@ const ProjectCard = (props) => {
             <IconStar /> {repoStats.stars}
           </LeftSideLink>
           <LeftSideLink
+            className="downloads-leftsidelink"
             href={`https://github.com/${githubRepo}/issues`}
             target="_blank"
             title="Issues"
@@ -85,6 +87,7 @@ const ProjectCard = (props) => {
             <IconInfo /> {repoStats.issues}
           </LeftSideLink>
           <LeftSideLink
+            className="downloads-leftsidelink"
             href={`https://github.com/${githubRepo}/blob/master/CHANGELOG.md`}
             target="_blank"
           >
@@ -93,10 +96,10 @@ const ProjectCard = (props) => {
         </LeftSideLinks>
       </LeftSide>
       <RightSide>
-        <VersionInfo>
-          Latest Version · <span>{version}</span>
+        <VersionInfo className="downloads-versioninfo">
+          Latest Version · <span className="downloads-versioninfo-span">{version}</span>
           <br />
-          Release Date · <span>{releaseDate}</span>
+          Release Date · <span className="downloads-versioninfo-span">{releaseDate}</span>
         </VersionInfo>
         <div>
           <Button
@@ -185,7 +188,6 @@ const Title = styled.a`
   }
 `;
 const Description = styled.div`
-  color: #374151;
   font-size: 1.2rem;
   margin-top: 0px;
   @media (max-width: 600px) {
@@ -208,7 +210,7 @@ const ShapeBeforeTitle = styled.span`
 const LeftSideLinks = styled.div`
   display: inline-flex;
   font-size: 1rem;
-  color: #4b5563;
+
   margin-top: 24px;
   & svg {
     height: 1rem;
@@ -224,7 +226,6 @@ const LeftSideLink = styled.a`
   transition: all 0.3s;
   color: inherit;
   &:hover {
-    color: #111827;
     text-decoration: none;
   }
 `;
@@ -294,11 +295,9 @@ const DropdownItem = styled.a`
   }
 `;
 const VersionInfo = styled.div`
-  color: #6b7280;
   text-align: right;
   font-size: 0.9rem;
   span {
-    color: #374151;
     font-weight: 500;
   }
   @media (max-width: 600px) {
diff --git a/website/src/pages/help.js b/website/src/pages/help.js
index ce7b6f2cb76b5..d684ec35b4df2 100644
--- a/website/src/pages/help.js
+++ b/website/src/pages/help.js
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import "../css/customTheme.css"
 import Layout from "@theme/Layout";
 import ChevronRight from "../assets/icons/chevron-right.svg";
 
diff --git a/website/src/pages/team.js b/website/src/pages/team.js
index 15933e60e92a0..05a6eb6da68df 100644
--- a/website/src/pages/team.js
+++ b/website/src/pages/team.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import GitHubLogo from "../assets/icons/github-logo.svg";
-
+import "../css/customTheme.css";
 import IconCode from "../assets/icons/code.svg";
 import IconStar from "../assets/icons/star.svg";
 import IconDatabase from "../assets/icons/database.svg";
@@ -99,14 +99,11 @@ const RepoCard = styled.a`
   padding: 1rem;
   margin: 8px;
   cursor: pointer;
-  color: #374151;
   transition: all 0.3s;
 
   &:hover {
     opacity: 0.98;
-    color: inherit;
     text-decoration: none;
-    color: #111827;
   }
 
   svg {
@@ -273,6 +270,7 @@ function Team(props) {
   const repoComponents = siteConfig.customFields.allRepos.map((repo) => {
     return (
       <RepoCard
+        className="team-repocard"
         href={`https://github.com/${repo}/graphs/contributors`}
         target="_blank"
         key={repo}

From c7d43fb6baea96d8671874cd5b25a10a610eaae9 Mon Sep 17 00:00:00 2001
From: iamayushdas <ayush24das@gmail.com>
Date: Wed, 14 Apr 2021 21:15:08 +0530
Subject: [PATCH 5/5] docs: update the architecture diagram

---
 website/src/pages/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 6e8decb6e5e50..f94be9ff4f246 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -102,7 +102,7 @@ const LearnHow = () => (
           <div className="col">
             <img
               className="image"
-              src="https://github.com/apache/apisix/blob/master/docs/assets/images/apisix.png?raw=true"
+              src="https://user-images.githubusercontent.com/40708551/114739080-323cc300-9d66-11eb-839a-f1f7331b9e8b.png"
               align="right"
               alt="apisix-description"
             />