Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 43c993e

Browse files
kiner-tangyutingzhao1991
kiner-tang
and
yutingzhao1991
authoredSep 3, 2024··
feat(site): Optimize the official website theme switching effect (#1108)
* feat: 官网改版 * feat: 官网改版 * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update .dumi/theme/builtins/HomePage/index.tsx --------- Co-authored-by: 愚指导 <yutingzhao1991@gmail.com>
1 parent 59dc21e commit 43c993e

14 files changed

+552
-281
lines changed
 

‎.dumi/theme/builtins/HomePage/components/Banner/index.module.less

+32-14
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: block;
77
width: 3268px;
88
height: auto;
9-
min-height: 256px;
9+
min-height: 741px;
1010
margin-left: calc(50% - 1634px);
1111
}
1212
.wrap {
@@ -33,7 +33,7 @@
3333
padding-inline-start: 14px;
3434
margin-top: 12px;
3535
font-size: 32px;
36-
color: rgba(0, 0, 0, 0.85);
36+
color: var(--theme-slogan-color);
3737
opacity: 0.65;
3838
}
3939

@@ -58,18 +58,33 @@
5858
transition: opacity 0.2s;
5959
&:first-child {
6060
color: #fff;
61-
background-color: #8242ff;
61+
background-color: var(--theme-primary-color);
6262
}
6363
&:last-child {
64-
color: #8242ff;
65-
border: 1px solid #8242ff;
64+
color: var(--theme-primary-color);
65+
border: 1px solid var(--theme-primary-color);
6666
}
6767
&:hover {
6868
opacity: 0.8;
6969
}
7070
}
7171
}
7272
}
73+
&.darkTheme {
74+
.wrap {
75+
.btn {
76+
a {
77+
&:first-child {
78+
background-color: #794af5;
79+
}
80+
&:last-child {
81+
color: #fff;
82+
border: 1px solid rgba(255, 255, 255, 0.06);
83+
}
84+
}
85+
}
86+
}
87+
}
7388
}
7489

7590
[data-prefers-color='dark'] {
@@ -78,15 +93,17 @@
7893
filter: brightness(0.4) contrast(1.5) saturate(0.75);
7994
}
8095
}
81-
.titleImg {
82-
filter: brightness(0.8) contrast(1.5) saturate(5);
83-
}
84-
.slogan {
85-
color: #ccc !important;
86-
}
87-
.link {
88-
border-color: #ccc !important;
89-
color: #ccc !important;
96+
.wrap {
97+
.titleImg {
98+
filter: brightness(0.8) contrast(1.5) saturate(5);
99+
}
100+
.slogan {
101+
color: #ccc;
102+
}
103+
.link {
104+
border-color: #ccc;
105+
color: #ccc;
106+
}
90107
}
91108
}
92109

@@ -98,6 +115,7 @@
98115
object-position: center;
99116
margin-left: 0;
100117
width: 100%;
118+
min-height: 256px;
101119
}
102120
.wrap {
103121
width: calc(100% - 40px);

‎.dumi/theme/builtins/HomePage/components/Banner/index.tsx

+22-9
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
1-
import React from 'react';
1+
import React, { useContext } from 'react';
2+
import classNames from 'classnames';
23
// @ts-ignore
34
import { Link, useIntl } from 'dumi';
45

6+
import { ThemeContext } from '../ThemeContext';
57
import styles from './index.module.less';
68

79
export const Banner: React.FC = () => {
810
const intl = useIntl();
11+
const {
12+
curTheme: { bannerBg, color, darkLogo, darkSloganColor, name },
13+
} = useContext(ThemeContext);
14+
15+
const themeStyle: React.CSSProperties = {
16+
'--theme-primary-color': color,
17+
'--theme-slogan-color': darkSloganColor || 'rgba(0, 0, 0, 0.85)',
18+
} as React.CSSProperties;
919

1020
return (
11-
<div className={styles.bannerContainer}>
12-
<img
13-
draggable={false}
14-
className={styles.bgImg}
15-
src="https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*664qTJ8PpR8AAAAAAAAAAAAADlrGAQ/original"
16-
alt="banner"
17-
/>
21+
<div
22+
className={classNames(styles.bannerContainer, {
23+
[styles.darkTheme]: name === 'Dark',
24+
})}
25+
style={themeStyle}
26+
>
27+
<img draggable={false} className={styles.bgImg} src={bannerBg} alt="banner" />
1828
<div className={styles.wrap}>
1929
<img
2030
draggable={false}
2131
className={styles.titleImg}
22-
src="https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*5kc-Ro7c1H8AAAAAAAAAAAAADlrGAQ/original"
32+
src={
33+
darkLogo ||
34+
'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*5kc-Ro7c1H8AAAAAAAAAAAAADlrGAQ/original'
35+
}
2336
alt="title"
2437
/>
2538
<div className={styles.slogan}>

‎.dumi/theme/builtins/HomePage/components/Features/index.module.less

+8-25
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
:global(.dark) {
2-
.container {
3-
background-color: #000;
4-
.item {
5-
background-color: #222;
6-
}
7-
}
8-
}
9-
101
.container {
112
width: 1332px;
123
margin: 0 auto;
@@ -16,12 +7,12 @@
167
gap: 24px;
178
box-sizing: border-box;
189
padding: 24px;
19-
background: #fff;
10+
background-color: var(--theme-container-bg);
2011
border-radius: 24px;
2112
position: relative;
2213
z-index: 2;
2314
.item {
24-
background: #fbfafc;
15+
background: var(--theme-item-bg);
2516
border-radius: 24px;
2617
word-break: break-word;
2718
flex: 1;
@@ -34,7 +25,7 @@
3425
Arial,
3526
sans-serif;
3627
.title {
37-
color: rgba(0, 0, 0, 0.85);
28+
color: var(--theme-text-color);
3829
font-size: 24px;
3930
font-size: 24px;
4031
font-weight: 500;
@@ -43,12 +34,13 @@
4334
white-space: nowrap;
4435
}
4536
.desc {
46-
color: rgba(0, 0, 0, 0.45);
37+
color: var(--theme-text-color);
4738
font-size: 16px;
4839
font-style: normal;
4940
font-weight: 400;
5041
line-height: 24px;
5142
height: 96px;
43+
opacity: 0.5525;
5244
}
5345
.preview {
5446
width: 360px;
@@ -57,23 +49,12 @@
5749
}
5850
}
5951

60-
[data-prefers-color='dark'] {
61-
.item {
62-
.title {
63-
color: rgba(255, 255, 255, 0.85);
64-
}
65-
.desc {
66-
color: rgba(255, 255, 255, 0.45);
67-
}
68-
}
69-
}
70-
7152
// 移动端预览时采用垂直布局展示每个 item
7253
@media screen and (max-width: 767px) {
7354
.container {
7455
flex-direction: column;
7556
align-items: center;
76-
width: 90%;
57+
width: 100%;
7758
background: #fff;
7859
box-sizing: border-box;
7960
.item {
@@ -87,9 +68,11 @@
8768
.title {
8869
white-space: normal;
8970
font-size: 24px;
71+
color: var(--theme-text-color);
9072
}
9173
.desc {
9274
font-size: 14px;
75+
color: var(--theme-text-color);
9376
}
9477
.preview {
9578
width: 100%;

‎.dumi/theme/builtins/HomePage/components/Features/index.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import { useContext } from 'react';
2+
import { useTheme } from 'antd-style';
13
import { useIntl } from 'dumi';
24

5+
import { ThemeContext } from '../ThemeContext';
36
import styles from './index.module.less';
47

58
type FeatureType = {
@@ -32,8 +35,16 @@ export const Features: React.FC = () => {
3235
},
3336
];
3437

38+
const { curTheme } = useContext(ThemeContext);
39+
const token = useTheme();
40+
const themeStyle: React.CSSProperties = {
41+
'--theme-text-color': curTheme.name === 'Dark' ? token.colorWhite : token.colorTextBase,
42+
'--theme-container-bg': curTheme.name === 'Dark' ? '#222' : '#fff',
43+
'--theme-item-bg': curTheme.name === 'Dark' ? '#303030' : '#fbfafc',
44+
} as React.CSSProperties;
45+
3546
return (
36-
<div className={styles.container}>
47+
<div className={styles.container} style={themeStyle}>
3748
{features.map((feature) => (
3849
<div className={styles.item} key={feature.title}>
3950
<div className={styles.title}>{feature.title}</div>

‎.dumi/theme/builtins/HomePage/components/ShowCase/index.module.less

+20-23
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
.container {
22
overflow: hidden;
3-
background-color: #fbfafc;
43
padding: 67px 0;
54
position: relative;
65
.headTitle {
76
font-size: 38px;
87
margin: 0 0 24px 0;
98
text-align: center;
109
font-weight: 700;
10+
color: var(--theme-text-color);
1111
}
1212

1313
.desc {
1414
text-align: center;
15+
color: var(--theme-text-color);
1516
}
1617

1718
.componentList {
@@ -34,16 +35,16 @@
3435
}
3536
.cardBg {
3637
position: relative;
37-
background: #f7f5ff;
38-
background-image: radial-gradient(circle at 94% 97%, #eee5ff 0%, rgba(236, 233, 255, 0) 53%);
38+
background: var(--theme-item-bg);
3939
border-radius: 16px;
4040
padding: 40px 36px;
4141
margin: 0 10px;
4242
.title {
4343
display: block;
4444
font-size: 16px;
4545
margin: 0 0 42px 0;
46-
color: rgba(0, 0, 0, 0.85);
46+
font-weight: 600;
47+
color: var(--theme-text-color);
4748
}
4849
}
4950

@@ -112,25 +113,21 @@
112113
[data-prefers-color='dark'] {
113114
.container {
114115
background-color: #050709;
115-
}
116-
.connectContainer {
117-
background-color: #050709 !important;
118-
}
119-
.cardBg {
120-
background: #222 !important;
121-
background-image: radial-gradient(
122-
circle at 94% 97%,
123-
#000 0%,
124-
rgba(233, 240, 255, 0) 53%
125-
) !important;
126-
.title {
127-
color: rgba(255, 255, 255, 0.85) !important;
116+
.componentList {
117+
.connectContainer {
118+
background-color: #050709;
119+
}
120+
.cardBg {
121+
background: #222;
122+
background-image: radial-gradient(
123+
circle at 94% 97%,
124+
#000 0%,
125+
rgba(233, 240, 255, 0) 53%
126+
) !important;
127+
.title {
128+
color: rgba(255, 255, 255, 0.85);
129+
}
130+
}
128131
}
129132
}
130-
.footerDesc {
131-
color: rgba(255, 255, 255, 0.85) !important;
132-
}
133-
.footerText {
134-
color: rgba(255, 255, 255, 0.45) !important;
135-
}
136133
}

‎.dumi/theme/builtins/HomePage/components/ShowCase/index.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import { useContext } from 'react';
12
import { Carousel } from 'antd';
3+
import { useTheme } from 'antd-style';
24
import classNames from 'classnames';
35
import { useIntl } from 'dumi';
46

7+
import { ThemeContext } from '../ThemeContext';
58
import Connect from './Connect';
69
import CryptoInput from './CryptoInput';
710
import styles from './index.module.less';
@@ -11,17 +14,17 @@ import PayPanel from './PayPanel';
1114
export const ShowCase: React.FC = () => {
1215
const intl = useIntl();
1316

14-
const caseList = (
15-
<>
16-
<Connect />
17-
<NFTCard />
18-
<PayPanel />
19-
<CryptoInput />
20-
</>
21-
);
17+
const token = useTheme();
18+
const { curTheme } = useContext(ThemeContext);
19+
const themeStyle: React.CSSProperties = {
20+
'--theme-item-bg': curTheme.showCaseItemBg,
21+
'--theme-text-color': curTheme.name === 'Dark' ? token.colorWhite : token.colorTextBase,
22+
} as React.CSSProperties;
23+
24+
const caseList = [<Connect />, <NFTCard />, <PayPanel />, <CryptoInput />];
2225

2326
return (
24-
<div className={styles.container}>
27+
<div className={styles.container} style={themeStyle}>
2528
<h3 className={styles.headTitle}>{intl.formatMessage({ id: 'app.docs.site.case.title' })}</h3>
2629
<div className={styles.desc}>
2730
{intl.formatMessage({ id: 'app.docs.site.case.description' })}
There was a problem loading the remainder of the diff.

0 commit comments

Comments
 (0)
Please sign in to comment.