Merge pull request #539 from nullptr-z/dev

fix: 明暗主题展示不明显问题

Author: ChenlingasMx

website/src/assets/github.svg

@@ -1,6 +1,7 @@
 .warpper {
   background: white;
   border-top: 1px solid #e1e4e8;
+  width: 100%;
 }
 
 .inner {
@@ -79,3 +80,8 @@
     margin: 0 5px;
   }
 }
+
+html[data-color-mode*='dark'] .warpper {
+  border-top: 1px solid #032438;
+  background: var(--color-theme-bg);
+}

website/src/component/Footer/index.module.less

@@ -10,7 +10,7 @@
 }
 
 html[data-color-mode*='dark'] .warpper {
-  background-color: #0d1117;
+  background-color: var(--color-theme-bg);
   border-bottom: 1px solid #032438;
 }
 
@@ -25,9 +25,10 @@ html[data-color-mode*='dark'] .warpper {
 .menus {
   display: flex;
 
+  span,
   a {
     transition: all 0.3s;
-    color: #333;
+    color: var(--color-fg-default);
     border-radius: 3px;
     padding: 2px 8px 2px 8px;
     display: flex;
@@ -39,12 +40,12 @@ html[data-color-mode*='dark'] .warpper {
   }
 
   :global(.active),
+  span:hover,
   a:hover {
     background: #00000017;
     color: #0366d6;
   }
 }
-
 .logo {
   display: flex;
   align-items: center;
@@ -74,3 +75,9 @@ html[data-color-mode*='dark'] .warpper {
     font-weight: 300;
   }
 }
+
+html[data-color-mode*='dark'] {
+  :global(.github) {
+    fill: white;
+  }
+}

website/src/component/Header/index.module.less

@@ -22,6 +22,7 @@ export default function Header(props: HeaderProps) {
   if (enableStyle) {
     style.background = '#f7f7f7';
   }
+
   return (
     <header className={styles.warpper} style={style}>
       <div className={styles.inner}>
@@ -43,7 +44,9 @@ export default function Header(props: HeaderProps) {
             Web 组件
           </a>
           <NavLink to="/team">团队</NavLink>
-          <dark-mode permanent style={{ display: 'flex', alignItems: 'center' }} />
+          <span>
+            <dark-mode permanent />
+          </span>
           <a target="__blank" href="https://github.com/uiwjs/react-native-uiw">
             <Github />
           </a>

website/src/component/Header/index.tsx

@@ -4,7 +4,7 @@ import { BackTop, Circle, Icon } from 'uiw';
 import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
 import CodeLayout from 'react-code-preview-layout';
 import { useRef } from 'react';
-import Footer from './Footer';
+import Footer from '../Footer';
 
 const Wrapper = styled.div`
   width: 100%;

website/src/component/Preview/index.js

@@ -3,7 +3,7 @@
   position: relative;
 
   a {
-    color: #5a5a5a;
+    color: var(--color-fg-default);
     transition: all 0.3s;
     margin-left: 10px;
     display: flex;
@@ -39,7 +39,7 @@
   padding: 5px 0;
   margin-left: 10px;
   margin-bottom: 10px;
-  color: #bdbdbd;
+  color: #8a8686;
   border-bottom: 1px solid #eaeaea;
 }
 

website/src/component/SubMenus/index.module.less

@@ -4,6 +4,15 @@
   background: linear-gradient(60deg, #393e48c4 0%, #dfe2e5 100%);
   color: white;
 }
+html[data-color-mode*='dark'] .header {
+  background: linear-gradient(10deg, #393e48c4 0%, var(--color-theme-bg) 80%);
+  color: rgb(255, 255, 255);
+  h2,
+  p,
+  a:hover {
+    text-shadow: 1px 3px 5px cornflowerblue;
+  }
+}
 
 .headerContent {
   padding-top: 140px;
@@ -25,6 +34,7 @@
   }
   p {
     padding-top: 52px;
+    font-size: 25px;
   }
 }
 .innerHeader {
@@ -64,6 +74,23 @@
   }
 }
 
+html[data-color-mode*='dark'] .waves {
+  :global(.parallax) {
+    & > use:nth-child(1) {
+      fill: #0d1117b5;
+    }
+    & > use:nth-child(2) {
+      fill: #0d111783;
+    }
+    & > use:nth-child(3) {
+      fill: #0d11173c;
+    }
+    & > use:nth-child(4) {
+      fill: var(--color-theme-bg);
+    }
+  }
+}
+
 @keyframes move-forever {
   0% {
     transform: translate3d(-90px, 0, 0);

website/src/pages/home/index.module.less

@@ -5,6 +5,10 @@
   background: #f7f7f7;
 }
 
+html[data-color-mode*='dark'] .warpper {
+  background: var(--color-theme-bg);
+}
+
 .article {
   min-height: 60vh;
   padding-top: 26px;