docs: various enhancements across /docs workspace (#31921)

Signed-off-by: hainenber <dotronghai96@gmail.com>

docs/src/pages/community.tsx

@@ -86,7 +86,7 @@ const communityLinks = [
 ];
 
 const StyledJoinCommunity = styled('section')`
-  background-color: var(--ifm-off-section-background);
+  background-color: var(--ifm-background-color);
   border-bottom: 1px solid var(--ifm-border-color);
   .list {
     max-width: 540px;
@@ -118,7 +118,7 @@ const StyledJoinCommunity = styled('section')`
   .description {
     font-size: 14px;
     line-height: 20px;
-    color: var(--ifm-secondary-text);
+    color: var(--ifm-font-base-color);
     margin-top: -8px;
     margin-bottom: 23px;
     ${mq[1]} {
@@ -143,22 +143,6 @@ const StyledCalendarIframe = styled('iframe')`
   }
 `;
 
-const StyledNewsletterIframe = styled('iframe')`
-  display: block;
-  max-width: 1080px;
-  width: calc(100% - 40px);
-  height: 285px;
-  margin: 30px auto 20px;
-  border: 0;
-  @media (max-width: 1200px) {
-    height: 380px;
-  }
-  @media (max-width: 679px) {
-    height: 680px;
-    margin-top: 15px;
-  }
-`;
-
 const StyledLink = styled('a')`
   display: inline-flex;
   align-items: center;
@@ -224,8 +208,8 @@ const Community = () => {
                     </a>
                   }
                   title={
-                    <a className="title" href={url} target="_blank">
-                      {title}
+                    <a href={url} target="_blank">
+                      <p className="title" style={{marginBottom: 0}}>{title}</p>
                     </a>
                   }
                   description={<p className="description">{description}</p>}

docs/src/pages/index.tsx

@@ -207,7 +207,6 @@ const StyledFeaturesList = styled('ul')`
   .item {
     text-align: left;
     border: 1px solid var(--ifm-border-color);
-    background-color: #ffffff;
     border-radius: 10px;
     overflow: hidden;
     display: flex;
@@ -230,7 +229,6 @@ const StyledFeaturesList = styled('ul')`
     }
     .title {
       font-size: 24px;
-      color: var(--ifm-primary-text);
       margin: 10px 0 0;
       ${mq[1]} {
         font-size: 23px;
@@ -240,7 +238,6 @@ const StyledFeaturesList = styled('ul')`
     .description {
       font-size: 17px;
       line-height: 23px;
-      color: var(--ifm-secondary-text);
       margin: 5px 0 0;
       ${mq[1]} {
         font-size: 16px;

docs/src/styles/custom.css

@@ -69,3 +69,15 @@ ul.dropdown__menu svg {
   --ifm-code-padding-vertical: 3px;
   --ifm-code-padding-horizontal: 5px;
 }
+
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-font-base-color: #bbb5ac;
+  --ifm-border-color: #797063;
+}

docs/src/styles/main.less

@@ -114,7 +114,6 @@ a > span > svg {
 .navbar {
   font-size: 14px;
   font-weight: 400;
-  background-color: #fff;
   transition: all 0.5s;
 
   .get-started-button {
@@ -190,7 +189,7 @@ a > span > svg {
 .navbar .DocSearch {
   --docsearch-text-color: #187384;
   --docsearch-muted-color: #187384;
-  --docsearch-searchbox-background: #fff;
+  --docsearch-searchbox-background: var(--ifm-navbar-background-color);
   border: 1px solid #187384;
   border-radius: 10px;