Skip to content

Commit 0730714

Browse files
PeiXiaoMengmhpei
PeiXiaoMeng
and
mhpei
authored
feat: 增加暗夜模式 (#1795)
* feat: 添加支持暗夜模式 * feat: 添加支持暗夜模式 --------- Co-authored-by: mhpei <mhpei@gaojihealth.com>
1 parent a68519b commit 0730714

12 files changed

Lines changed: 216 additions & 28 deletions

File tree

‎packages/taro-ui-docs/app.jsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,40 @@ class App extends React.Component {
1212
constructor(...args) {
1313
super(...args)
1414
this.state = {
15-
visible: false
15+
visible: false,
16+
mode: 'light',
1617
}
1718
}
1819
componentDidMount() {
20+
const _mode = localStorage.getItem('mode')
1921
this.setState({
20-
visible: true
22+
visible: true,
23+
mode: _mode || 'light',
2124
})
2225
}
2326

2427
shouldComponentUpdate() {
2528
return true
2629
}
2730

31+
handleMode() {
32+
const _mode = this.state.mode
33+
const modeVal = _mode === 'light' ? 'dark' : 'light'
34+
this.setState({
35+
mode: modeVal
36+
}, () => {
37+
localStorage.setItem('mode', modeVal)
38+
})
39+
}
40+
2841
render() {
42+
const { mode } = this.state
43+
2944
return (
30-
<div className='wrapper' style={{ backgroundColor: '#F8FAFF' }}>
45+
<div className='wrapper' style={{ backgroundColor: mode === 'light' ? '#F8FAFF' : '#434242' }}>
3146
<Switch>
3247
<Route path='/' exact component={Index} />
33-
<Route path='/docs' component={Docs} />
48+
<Route path='/docs' render={() => <Docs handleMode={this.handleMode.bind(this)} />} />
3449
<Route path='/guide' component={Guide} />
3550
</Switch>
3651
</div>

‎packages/taro-ui-docs/assets/dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/taro-ui-docs/assets/light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/taro-ui-docs/assets/style/dark.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
h1, h2, h3, h4, h5, h6 {
2+
color: #fff;
3+
}
4+
5+
.dark-style-docs-20140517 {
6+
color: '#fff';
7+
}
8+
9+
p {
10+
color: #fff;
11+
}
12+
13+
li {
14+
color: #fff;
15+
}
16+
17+
code {
18+
color: #3F536E;
19+
}
20+
21+
span {
22+
color: #3F536E;
23+
}
24+
25+
a {
26+
color: #fff;
27+
}

‎packages/taro-ui-docs/assets/style/docs.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
5454
overflow: hidden;
5555
}
5656

57+
.darkbox {
58+
background-color: #23272f;
59+
}
60+
5761
/**
5862
* Component - Preview & Code sample
5963
*/

‎packages/taro-ui-docs/components/header/index.jsx‎

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,40 @@
11
import React from 'react'
22
import classnames from 'classnames'
33
import { Link, NavLink, withRouter } from 'react-router-dom'
4+
import { DARK_KEY_SINGLE } from '../../utils/const'
45
import taroUILogo from '../../assets/logo-taro.png'
6+
import darkImg from '../../assets/dark.svg'
7+
import lightImg from '../../assets/light.svg'
58
import './style.scss'
69

710
class PageHeader extends React.Component {
811
constructor(...args) {
912
super(...args)
1013
this.state = {
11-
toggle: true
14+
toggle: true,
15+
mode: 'light',
1216
}
1317
}
18+
19+
componentDidMount() {
20+
const _mode = localStorage.getItem('mode')
21+
const style = localStorage.getItem('dark-style');
22+
const isCurrentStyle = style && ~style.indexOf(DARK_KEY_SINGLE) && !~style.indexOf('<style')
23+
24+
if (_mode) {
25+
this.setState({
26+
mode: _mode
27+
})
28+
29+
if (_mode === 'dark' && isCurrentStyle) {
30+
const styleTag = document.createElement('style');
31+
styleTag.type = 'text/css';
32+
styleTag.innerHTML = style;
33+
document.head.appendChild(styleTag);
34+
}
35+
}
36+
}
37+
1438
toggleMenu() {
1539
const _toggle = this.state.toggle
1640
this.setState({
@@ -23,13 +47,52 @@ class PageHeader extends React.Component {
2347
goToSource(e) {
2448
e.preventDefault()
2549
}
50+
handleChange() {
51+
const _mode = this.state.mode
52+
const modeVal = _mode === 'light' ? 'dark' : 'light'
53+
const { handleMode } = this.props
54+
const styles = Array.from(document.querySelectorAll('style'));
55+
const style = localStorage.getItem('dark-style');
56+
const isCurrentStyle = style && ~style.indexOf(DARK_KEY_SINGLE) && !~style.indexOf('<style')
57+
58+
if (modeVal === 'light') {
59+
styles.forEach(style => {
60+
if (~style.outerHTML.indexOf(DARK_KEY_SINGLE)) {
61+
const newStyle = style.outerHTML.replace(/<style>/g, '').replace(/<\/style>/g, '').replace(/<style type="text\/css">/, '')
62+
localStorage.setItem('dark-style', newStyle)
63+
style.remove()
64+
}
65+
});
66+
}
67+
68+
if (modeVal === 'dark' && isCurrentStyle) {
69+
const styleTag = document.createElement('style');
70+
styleTag.type = 'text/css';
71+
styleTag.innerHTML = style;
72+
document.head.appendChild(styleTag);
73+
}
74+
75+
if (modeVal === 'dark' && !isCurrentStyle) {
76+
require('../../assets/style/dark.scss');
77+
}
78+
79+
this.setState({
80+
mode: modeVal,
81+
}, () => {
82+
localStorage.setItem('mode', modeVal)
83+
handleMode && handleMode()
84+
})
85+
}
2686

2787
render() {
28-
const { collapse, style } = this.props
29-
const { toggle } = this.state
88+
const { collapse, style, themeMode } = this.props
89+
const { toggle, mode } = this.state
90+
const darktheme = themeMode && mode === 'dark' && 'darktheme' // 暗黑模式bg
91+
const darktext = themeMode && mode === 'dark' && 'darktext' // 暗黑模式text color
92+
3093
return (
3194
<header
32-
className={classnames('page-header', { collapse })}
95+
className={classnames('page-header', { collapse, darktheme })}
3396
style={style}
3497
id='J-page-header'
3598
>
@@ -38,7 +101,7 @@ class PageHeader extends React.Component {
38101
<div className='logo'>
39102
<Link to='/'>
40103
<img className='logo-img' src={taroUILogo} />
41-
<span>Taro UI</span>
104+
<span className={classnames('', { darktext })}>Taro UI</span>
42105
</Link>
43106
</div>
44107
<i className='icon icon-menu nav-icon' onClick={this.toggleMenu} />
@@ -50,6 +113,7 @@ class PageHeader extends React.Component {
50113
<ul className='navbar'>
51114
<li>
52115
<NavLink
116+
className={classnames('', { darktext })}
53117
activeClassName='router-link-active'
54118
to='/docs/introduction'
55119
>
@@ -58,6 +122,7 @@ class PageHeader extends React.Component {
58122
</li>
59123
<li>
60124
<NavLink
125+
className={classnames('', { darktext })}
61126
activeClassName='router-link-active'
62127
to='/docs/resource'
63128
>
@@ -68,15 +133,31 @@ class PageHeader extends React.Component {
68133
<a
69134
href='https://nervjs.github.io/taro-ui-theme-preview/'
70135
target='__blank'
136+
className={classnames('', { darktext })}
71137
>
72138
主题生成器
73139
</a>
74140
</li>
75141
<li>
76-
<a href='https://aotu.io/' target='__blank'>
142+
<a
143+
href='https://aotu.io/'
144+
target='__blank'
145+
className={classnames('', { darktext })}
146+
>
77147
关于我们
78148
</a>
79149
</li>
150+
{
151+
themeMode && <li>
152+
<a onClick={this.handleChange.bind(this)}>
153+
{
154+
mode === 'light'
155+
? <img className="nav-icon" src={darkImg} />
156+
: <img className="nav-icon" src={lightImg} />
157+
}
158+
</a>
159+
</li>
160+
}
80161
</ul>
81162
</div>
82163
</div>

‎packages/taro-ui-docs/components/header/style.scss‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,34 @@ $header-height: 80px;
3232
padding: 0 50px;
3333

3434
.nav-left .logo span {
35-
color: #1D1D1F;
35+
color: #23272f;
36+
}
37+
38+
.nav-left .logo .darktext {
39+
color: rgb(246 247 249);
3640
}
3741

3842
.nav-right .navbar {
3943
margin-right: 0;
4044
}
4145

4246
.navbar a {
43-
color: #1D1D1F;
47+
color: #23272f;
48+
}
49+
50+
.navbar .darktext {
51+
color: rgb(246 247 249);
52+
}
53+
54+
.navbar .router-link-active {
55+
color: $brand-blue-500;
4456
}
4557
}
4658
}
59+
60+
&.darktheme {
61+
background-color: #23272f;
62+
}
4763
}
4864

4965
.nav-container {
@@ -120,6 +136,10 @@ $header-height: 80px;
120136
display: inline-block;
121137
}
122138
}
139+
140+
&.darktext {
141+
color: $brand-blue-500;
142+
}
123143
}
124144

125145
li {
@@ -138,13 +158,21 @@ $header-height: 80px;
138158
cursor: not-allowed;
139159
}
140160
}
161+
162+
.nav-icon {
163+
width: 24px;
164+
height: 24px;
165+
position: absolute;
166+
top: 50%;
167+
margin-top: -12px;
168+
}
141169
}
142170

143171
.btn-language {
144172
display: inline-block;
145173
margin: 0 24px;
146174
padding: 2px 12px;
147-
border: 1px solid #1d1d1f;
175+
border: 1px solid #23272f;
148176
border-radius: 2px;
149177
cursor: pointer;
150178
transition: color 0.3s, border 0.3s;

‎packages/taro-ui-docs/components/sidebar/index.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,20 +31,21 @@ class Sidebar extends React.Component {
3131
}
3232

3333
render() {
34-
const { data: items } = this.props
34+
const { data: items, mode } = this.props
35+
const darktext = mode === 'dark' ? 'darktext' : ''
3536

3637
return (
3738
<nav className='at-nav'>
3839
{items.map(item => (
3940
<div key={item.title}>
40-
<h2 className='at-nav__title'>{item.title}</h2>
41+
<h2 className={classnames('at-nav__title', { darktext })}>{item.title}</h2>
4142
<ul className='at-nav__items'>
4243
{item.items &&
4344
item.items.map((navItem, index) => (
4445
<li className='at-nav__item' key={index}>
4546
<NavLink
4647
exact
47-
className='at-nav__page'
48+
className={classnames('at-nav__page', { darktext })}
4849
activeClassName='router-link-exact-active router-link-active'
4950
to={{
5051
pathname: `/${item.name.toLowerCase()}/${navItem.name.toLowerCase()}`
@@ -59,7 +60,7 @@ class Sidebar extends React.Component {
5960
item.groups.map((group, idx) => (
6061
<li className='at-nav__item active' key={idx}>
6162
<a
62-
className='at-nav__group'
63+
className={classnames('at-nav__group', { darktext })}
6364
onClick={this.toggleMenu.bind(this, idx)}
6465
>
6566
{group.title}
@@ -82,13 +83,13 @@ class Sidebar extends React.Component {
8283
{group.items.map(navItem => (
8384
<li className='at-nav__child-item' key={navItem.name}>
8485
<NavLink
85-
className='at-nav__component'
86+
className={classnames('at-nav__component', { darktext })}
8687
activeClassName='router-link-exact-active router-link-active'
8788
to={`/docs/${navItem.name.toLowerCase()}`}
8889
replace
8990
>
9091
{navItem.name}
91-
<span>{navItem.title}</span>
92+
<span className={classnames('', { darktext })}>{navItem.title}</span>
9293
</NavLink>
9394
</li>
9495
))}

‎packages/taro-ui-docs/components/sidebar/style.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
overflow: auto;
1414
}
1515

16+
.darkbox {
17+
background-color: #23272f;
18+
}
19+
1620
/**
1721
* Navigation
1822
*/
@@ -119,6 +123,10 @@
119123
}
120124
}
121125

126+
.darktext {
127+
color: #fff !important;
128+
}
129+
122130
&__component {
123131
display: block;
124132
position: relative;

0 commit comments

Comments
 (0)