[Improve] Support dark mode (#329)

docusaurus.config.js

@@ -78,7 +78,8 @@ const config = {
     hideOnScroll: false, // Whether to hide the sidebar on scroll
     colorMode: {
       defaultMode: "light",
-      disableSwitch: true,
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
     },
     navbar: {
       title: "Apache SeaTunnel",
@@ -247,7 +248,7 @@ const config = {
         },
       ],
       copyright: `
-            <div style="margin-top: 20px;background: #f4f8fa">
+            <div style="margin-top: 20px;">
                 <img style="height:50px;margin: 30px 0 10px;" alt="Apache Software Foundation" src="/image/asf_logo_wide.svg" />
                 <div style="border-top: 1px solid #ccc;min-height: 60px;line-height: 20px;text-align: center;font-family: Avenir-Medium;font-size: 14px;color: #999;display: flex;align-items: center;"><span>Copyright © 2021-${new Date().getFullYear()} The Apache Software Foundation. Apache SeaTunnel, SeaTunnel, and its feather logo are trademarks of The Apache Software Foundation.</span></div>
                 <div style="text-align: center;">

src/css/custom.css

@@ -59,3 +59,11 @@ html {
 .footer__link-item svg,.navbar__link svg {
   display: none;
 }
+
+.menu__link {
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+html[data-theme='dark']  img {
+  filter: brightness(.8) contrast(1.2)
+}

src/pages/home/index.less

@@ -18,7 +18,7 @@
   }
 
   &.slogan {
-    background-color: #fff;
+    //background-color: #fff;
     margin-top: -54px;
 
     .block {
@@ -27,7 +27,7 @@
   }
 
   &.feature {
-    background-color: rgba(219, 238, 253, 0.3);
+    //background-color: rgba(219, 238, 253, 0.3);
     .block {
       width: 80%;
     }
@@ -257,15 +257,15 @@
       }
 
       .item-title {
-        color: #333;
+        //color: #333;
         font-weight: 700;
         line-height: 32px;
         font-size: 20px;
         margin-top: 20px;
       }
 
       .item-desc {
-        color: #666666;
+        //color: #666666;
         line-height: 32px;
         font-size: 16px;
         font-weight: 400;
@@ -275,8 +275,8 @@
     }
 
     .feature_item:hover {
-      background-color: #fff;
-      box-shadow: 0 0 12px 0 rgb(0 15 32 / 10%);
+      //background-color: #fff;
+      //box-shadow: 0 0 12px 0 rgb(0 15 32 / 10%);
     }
   }
 
@@ -292,7 +292,7 @@
       .apache {
         font-size: 5rem;
         font-weight: lighter;
-        color: #0f1223;
+        //color: #0f1223;
         letter-spacing: 2px;
         white-space: nowrap;
         margin-right: 10px;
@@ -329,7 +329,7 @@
     .main_slogan {
       margin-bottom: 80px;
       font-size: 30px;
-      color: #0f1223;
+      //color: #0f1223;
       text-align: center;
       line-height: 32px;
       font-weight: 500;

src/styles/base.less

@@ -22,10 +22,10 @@ p {
 
 body {
   min-width: 1200px;
-  font-size: 14px;
-  color: #4A4A4A;
+  font-size: 15px;
+  //color: #4A4A4A;
   line-height: 26px;
-  background: #ffffff;
+  //background: #ffffff;
   font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 }