docs: complete dark mode

web-infra-dev · Aug 16, 2024 · cd5a408 · cd5a408
1 parent be6c838
commit cd5a408
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 36 deletions.
diff --git a/website/components/landingpage/Benchmark/index.module.scss b/website/components/landingpage/Benchmark/index.module.scss
@@ -7,7 +7,7 @@
 }
 
 .title {
-  color: var(--title-color);
+  color: var(--landingpage-title-color);
   text-align: center;
   /* Style 10 */
   font-family: 'Open Sans';
@@ -18,14 +18,14 @@
 }
 
 .desc {
-  color: var(--desc-color);
+  color: var(--landingpage-desc-color);
 }
 
 .bottomLink {
   display: block;
   margin-top: 16px;
   font-size: 16px;
-  color: var(--title-color);
+  color: var(--landingpage-title-color);
 
   &:hover {
     color: var(--rp-c-link);
@@ -44,7 +44,7 @@
   border-radius: 25px;
   border: 2px solid var(--orange-gradient, #ff8b00);
   // text
-  color: var(--title-color, #0b0c0e);
+  color: var(--landingpage-title-color, #0b0c0e);
   text-align: center;
   font-family: 'Open Sans';
   font-size: 16px;

diff --git a/website/components/landingpage/BuiltWithRspack/index.module.scss b/website/components/landingpage/BuiltWithRspack/index.module.scss
@@ -39,6 +39,8 @@
   align-items: flex-start;
   align-self: stretch;
 
+  filter: var(--landingpage-invert-filter);
+
   .logo {
     display: flex;
     padding: 48px 36px 48px 36px;

diff --git a/website/components/landingpage/BuiltWithRspack/index.tsx b/website/components/landingpage/BuiltWithRspack/index.tsx
@@ -1,4 +1,3 @@
-import { useDark } from 'rspress/runtime';
 import { Link } from 'rspress/theme';
 import { useI18n } from '../../../theme/i18n';
 import amazonLogo from './assets/amazon.svg';
@@ -11,15 +10,11 @@ import styles from './index.module.scss';
 
 const BuiltWithRsPack: React.FC = () => {
   const t = useI18n();
-  const isDark = useDark();
   return (
     <div className={styles.container}>
       <div className={styles.innerContainer}>
         <h2 className={styles.title}>{t('builtWithRspack')}</h2>
-        <div
-          className={styles.logos}
-          style={isDark ? { filter: 'brightness(100)' } : {}}
-        >
+        <div className={styles.logos}>
           <Link
             className={`${styles.logo} ${styles.bitDevContainer}`}
             href="https://bit.dev/"

diff --git a/website/components/landingpage/FullyFeatured/index.module.scss b/website/components/landingpage/FullyFeatured/index.module.scss
@@ -18,7 +18,7 @@
   gap: 32px;
 
   .title {
-    color: var(--title-color);
+    color: var(--landingpage-title-color);
     text-align: center;
     /* Style 10 */
     font-family: 'Open Sans';
@@ -29,7 +29,7 @@
   }
 
   .subtitle {
-    color: var(--desc-color);
+    color: var(--landingpage-desc-color);
     text-align: center;
     /* Style 11 */
     font-family: 'Open Sans';
@@ -63,6 +63,7 @@
   gap: 16px;
 
   .icon {
+    filter: var(--landingpage-invert-filter);
     display: flex;
     width: 32px;
     height: 32px;
@@ -78,7 +79,7 @@
     gap: 8px;
 
     .featureTitle {
-      color: var(--title-color);
+      color: var(--landingpage-title-color);
       font-family: 'Open Sans';
       font-size: 18px;
       font-style: normal;
@@ -87,7 +88,7 @@
     }
 
     .featureDescription {
-      color: var(--desc-color);
+      color: var(--landingpage-desc-color);
       font-family: 'Open Sans';
       font-size: 15px;
       font-style: normal;
@@ -109,7 +110,7 @@
   border-radius: 25px;
   border: 2px solid var(--orange-gradient, #ff8b00);
   // text
-  color: var(--title-color);
+  color: var(--landingpage-title-color);
   text-align: center;
   font-family: 'Open Sans';
   font-size: 16px;

diff --git a/website/components/landingpage/FullyFeatured/index.tsx b/website/components/landingpage/FullyFeatured/index.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useDark } from 'rspress/runtime';
 import { Link } from 'rspress/theme';
 import { useI18n, useI18nUrl } from '../../../theme/i18n';
 import arrow from './assets/arrow.svg';
@@ -109,7 +108,6 @@ const FullyFeatured = () => {
   ];
 
   const [isFolded, setIsFolded] = useState(true);
-  const isDark = useDark();
 
   return (
     <div className={styles.container}>
@@ -128,7 +126,6 @@ const FullyFeatured = () => {
                       src={icon}
                       alt={index.toString()}
                       className={styles.icon}
-                      style={isDark ? { filter: 'invert(1)' } : {}}
                     />
                     <div className={styles.featureContent}>
                       <h2 className={styles.featureTitle}>{title}</h2>

diff --git a/website/components/landingpage/Hero/index.module.scss b/website/components/landingpage/Hero/index.module.scss
@@ -40,7 +40,7 @@
 }
 
 .subtitle {
-  color: var(--title-color, #0b0c0e);
+  color: var(--landingpage-title-color, #0b0c0e);
   text-align: center;
   font-family: 'Open Sans';
   font-size: 50px;
@@ -50,7 +50,7 @@
 }
 
 .description {
-  color: var(--desc-color, #6b7075);
+  color: var(--landingpage-desc-color, #6b7075);
   text-align: center;
   /* Style 5 */
   font-family: 'Open Sans';
@@ -104,7 +104,7 @@
   border: 2px solid var(--orange-gradient, #ff8b00);
 
   // text
-  color: var(--title-color, #0b0c0e);
+  color: var(--landingpage-title-color, #0b0c0e);
   text-align: center;
   font-family: 'Open Sans';
   font-size: 16px;

diff --git a/website/components/landingpage/Hero/index.tsx b/website/components/landingpage/Hero/index.tsx
@@ -1,11 +1,9 @@
 import { useCallback } from 'react';
-import { useDark, useLang, useNavigate } from 'rspress/runtime';
+import { useNavigate } from 'rspress/runtime';
 import { useI18n, useI18nUrl } from '../../../theme/i18n';
 import styles from './index.module.scss';
 
 const Hero = () => {
-  const isDark = useDark();
-
   const tUrl = useI18nUrl();
   const t = useI18n();
 

diff --git a/website/components/landingpage/ToolStack/index.module.scss b/website/components/landingpage/ToolStack/index.module.scss
@@ -23,7 +23,7 @@
   gap: 32px;
   align-self: stretch;
   .title {
-    color: var(--title-color);
+    color: var(--landingpage-title-color);
     text-align: center;
 
     /* Style 10 */
@@ -35,7 +35,7 @@
   }
 
   .description {
-    color: var(--desc-color);
+    color: var(--landingpage-desc-color);
     text-align: center;
 
     /* Style 11 */
@@ -80,7 +80,7 @@
 }
 
 .toolTitle {
-  color: var(--title-color);
+  color: var(--landingpage-title-color);
   text-align: center;
   font-family: 'Open Sans';
   font-size: 22px;
@@ -90,7 +90,7 @@
 }
 
 .toolDescription {
-  color: var(--desc-color);
+  color: var(--landingpage-desc-color);
   text-align: center;
   font-family: 'Open Sans';
   font-size: 15px;

diff --git a/website/components/landingpage/WhyRspack/index.module.scss b/website/components/landingpage/WhyRspack/index.module.scss
@@ -95,7 +95,7 @@
     gap: 8px;
 
     .featureTitle {
-      color: var(--title-color);
+      color: var(--landingpage-title-color);
       font-family: 'Open Sans';
       font-size: 18px;
       font-style: normal;
@@ -104,7 +104,7 @@
     }
 
     .featureDescription {
-      color: var(--desc-color);
+      color: var(--landingpage-desc-color);
       font-family: 'Open Sans';
       font-size: 16px;
       font-style: normal;

diff --git a/website/components/landingpage/index.module.scss b/website/components/landingpage/index.module.scss
@@ -1,7 +1,8 @@
 :global {
   html:not(.dark) {
-    --title-color: #0b0c0e;
-    --desc-color: #6b7075;
+    --landingpage-title-color: #0b0c0e;
+    --landingpage-desc-color: #6b7075;
+    --landingpage-invert-filter: none;
 
     --why-rspack-card-stroke: #e6e8ea;
     --why-rspack-card-gradient: var(
@@ -14,8 +15,10 @@
   }
 
   html.dark {
-    --title-color: white;
-    --desc-color: #c6cacd;
+    --landingpage-title-color: white;
+    --landingpage-desc-color: #c6cacd;
+
+    --landingpage-invert-filter: invert(1);
 
     --why-rspack-card-stroke: #23272f;
     --why-rspack-card-gradient: var(

diff --git a/website/components/landingpage/index.tsx b/website/components/landingpage/index.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useMemo } from 'react';
-import { useDark } from 'rspress/runtime';
 import BackgroundUrl from './Background.simple.png';
 import { Benchmark } from './Benchmark';
 import BuiltWithRspack from './BuiltWithRspack';