styles: adapt color-scheme: dark

Signed-off-by: Yue Yang <[email protected]>
chaos-mesh · Sep 25, 2023 · 32ed99a · 32ed99a
1 parent 6de1ff5
commit 32ed99a
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 21 deletions.
diff --git a/docusaurus-tailwind-v3/index.js b/docusaurus-tailwind-v3/index.js
@@ -2,12 +2,7 @@ module.exports = function () {
   return {
     name: 'docusaurus-tailwind-v3',
     configurePostCss(options) {
-      options.plugins.push(
-        require('postcss-import'),
-        require('tailwindcss/nesting'),
-        require('tailwindcss'),
-        require('autoprefixer') // Already exists in Docusaurus dependencies.
-      )
+      options.plugins.push(require('tailwindcss'), require('autoprefixer'))
 
       return options
     },

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -23,6 +23,9 @@ module.exports = {
   projectName: 'chaos-mesh.github.io', // Usually your repo name.
   trailingSlash: true,
   themeConfig: {
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
     image: '/img/chaos-mesh-social-preview.png',
     algolia: {
       appId: '3BY0S3HQX6',

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ChaosdFeatures.jsx b/src/components/ChaosdFeatures.jsx
@@ -39,7 +39,7 @@ export default function ChaosdFeatures() {
   return (
     <div className="tw-grid tw-grid-cols-3 tw-gap-8 tw-z-10">
       {iconList.map(({ name, Icon }) => (
-        <Card key={name} className="tw-flex tw-bg-base-200">
+        <Card key={name} className="tw-flex tw-bg-[#f2f2f2] dark:tw-bg-black">
           <Icon className="tw-min-w-8 tw-h-8 tw-select-none dark:tw-fill-white" />
         </Card>
       ))}

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -157,7 +157,7 @@ function Home() {
           </div>
         </div>
 
-        <div className="hero tw-relative">
+        <div className="hero">
           <div className="tw-container tw-mx-auto max-lg:tw-px-4">
             <div className="tw-max-w-[800px] tw-mx-auto tw-text-center">
               {/* TODO: add translation. */}
@@ -194,15 +194,14 @@ function Home() {
               <CodeGrid />
             </div>
           </div>
+        </div>
 
-          <div className="tw-absolute tw-left-0 tw-bottom-[-100px] lg:tw-bottom-[-500px] tw-w-full">
+        <div className="hero tw-relative">
+          <div className="tw-absolute tw-top-[-50px] tw-left-0 md:tw-top-[-100px] xl:tw-top-[-200px] tw-w-full">
             <img src="/img/home/curve-divider.svg" />
           </div>
-        </div>
-
-        <div className="hero tw-relative tw-z-10 tw-bg-transparent">
           <div className="tw-container tw-mx-auto max-lg:tw-px-4">
-            <div className="tw-flex tw-flex-col lg:tw-flex-row lg:tw-items-center tw-gap-8">
+            <div className="tw-relative tw-flex tw-flex-col lg:tw-flex-row lg:tw-items-center tw-gap-8">
               <div className="tw-flex-1">
                 <div className="xl:tw-w-[90%]">
                   {/* TODO: add translation. */}
@@ -287,7 +286,7 @@ function Home() {
                 <p>Join our contributors in building the future of Chaos Mesh.</p>
                 <Link
                   to="https://github.com/chaos-mesh/chaos-mesh"
-                  className="tw-btn tw-normal-case dark:tw-glass dark:hover:tw-text-white"
+                  className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
                 >
                   Star on GitHub
                 </Link>
@@ -298,13 +297,13 @@ function Home() {
                 <div className="tw-flex tw-gap-3">
                   <Link
                     to="https://github.com/chaos-mesh/chaos-mesh/issues"
-                    className="tw-btn tw-normal-case dark:tw-glass dark:hover:tw-text-white"
+                    className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
                   >
                     Issues
                   </Link>
                   <Link
                     to="https://github.com/chaos-mesh/chaos-mesh/discussions"
-                    className="tw-btn tw-normal-case dark:tw-glass dark:hover:tw-text-white"
+                    className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
                   >
                     Discussions
                   </Link>
@@ -315,7 +314,7 @@ function Home() {
                 <p>Connect with other users on our Slack channel (#project-chaos-mesh).</p>
                 <Link
                   to="https://slack.cncf.io"
-                  className="tw-btn tw-normal-case dark:tw-glass dark:hover:tw-text-white"
+                  className="tw-btn tw-bg-[#f2f2f2] tw-text-[#1f2937] hover:!tw-bg-[#e6e6e6] tw-normal-case dark:tw-glass dark:hover:!tw-bg-transparent dark:hover:tw-text-white"
                 >
                   Join Slack channel
                 </Link>

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -46,10 +46,10 @@
     box-shadow: 75px 75px 75px -25px rgba(0, 0, 0, 0.3);
     transform: perspective(750px) translate3d(0px, 0px, -250px) rotateX(5deg) rotateY(-5deg);
     transition: 0.3s ease-in-out transform;
+  }
 
-    &:hover {
-      transform: translate3d(0px, 0px, -250px);
-    }
+  .workflowsImg:hover {
+    transform: translate3d(0px, 0px, -250px);
   }
 
   [data-theme='dark'] .workflowsImg {