Skip to content

Commit 97a403c

Browse files
wwaynewwayne
committed
demo: theme toggle
1 parent cf5928e commit 97a403c

File tree

5 files changed

+177
-86
lines changed

5 files changed

+177
-86
lines changed

‎demo/Single.js‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -423,33 +423,6 @@ export default class Single extends Component {
423423
Square
424424
</p>
425425
</div>
426-
{/* Theme */}
427-
<div className="field">
428-
Theme
429-
</div>
430-
<div className="opts">
431-
<p
432-
className={
433-
classnames("opt", { active: config.theme === "light" })}
434-
onClick={this.updateConfig.bind(this, "theme", "light")}
435-
>
436-
Light
437-
</p>
438-
<p
439-
className={
440-
classnames("opt", { active: config.theme === "dark" })}
441-
onClick={this.updateConfig.bind(this, "theme", "dark")}
442-
>
443-
Dark
444-
</p>
445-
<p
446-
className={
447-
classnames("opt", { active: config.theme === "system" })}
448-
onClick={this.updateConfig.bind(this, "theme", "system")}
449-
>
450-
Follow System
451-
</p>
452-
</div>
453426
</div>
454427
</div>
455428
);

‎demo/_iconfont.scss‎

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@font-face {
2-
font-family: "iconfont";
3-
src: url('//at.alicdn.com/t/font_2548800_mb67gaqaxlj.woff2?t=1622343175378') format('woff2'),
4-
url('//at.alicdn.com/t/font_2548800_mb67gaqaxlj.woff?t=1622343175378') format('woff'),
5-
url('//at.alicdn.com/t/font_2548800_mb67gaqaxlj.ttf?t=1622343175378') format('truetype');
2+
font-family: "iconfont"; /* Project id 2548800 */
3+
src: url('//at.alicdn.com/t/font_2548800_tjs06257nsi.woff2?t=1624869530590') format('woff2'),
4+
url('//at.alicdn.com/t/font_2548800_tjs06257nsi.woff?t=1624869530590') format('woff'),
5+
url('//at.alicdn.com/t/font_2548800_tjs06257nsi.ttf?t=1624869530590') format('truetype');
66
}
77

88
.iconfont {
@@ -12,10 +12,50 @@
1212
-moz-osx-font-smoothing: grayscale;
1313
}
1414

15-
.icon-color:before {
15+
.icon-Daytimemode:before {
16+
content: "\e771";
17+
}
18+
19+
.icon-nightmode:before {
20+
content: "\e773";
21+
}
22+
23+
.icon-Color:before {
1624
content: "\e660";
1725
}
1826

1927
.icon-github:before {
2028
content: "\e799";
2129
}
30+
31+
.icon-seleted:before {
32+
content: "\e763";
33+
}
34+
35+
.icon-copy:before {
36+
content: "\e66b";
37+
}
38+
39+
.icon-fullscreen-shrink:before {
40+
content: "\e676";
41+
}
42+
43+
.icon-fullscreen-expand:before {
44+
content: "\e675";
45+
}
46+
47+
.icon-arrow-down:before {
48+
content: "\e7b2";
49+
}
50+
51+
.icon-elipsis:before {
52+
content: "\e66e";
53+
}
54+
55+
.icon-add-select:before {
56+
content: "\e7b0";
57+
}
58+
59+
.icon-search:before {
60+
content: "\e7b3";
61+
}

‎demo/app.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export default class App extends Component {
1111
super(props);
1212
this.state = {
1313
currentTab: "single",
14-
config: genConfig({ hairColorRandom: true })
14+
config: genConfig({ hairColorRandom: true }),
15+
theme: window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches || "light"
1516
};
1617
}
1718

@@ -27,13 +28,19 @@ export default class App extends Component {
2728
});
2829
}
2930

31+
toggleTheme() {
32+
const { theme } = this.state;
33+
const newTheme = theme === "light" && "dark" || "light";
34+
this.setState({
35+
theme: newTheme
36+
});
37+
}
38+
3039
render() {
31-
const { currentTab, config } = this.state;
40+
const { currentTab, config, theme } = this.state;
3241

3342
return (
34-
<div className={classnames("app", { appDark: config.theme === "dark", appSystemDark: config.theme === "system" })}>
35-
<a className="iconfont icon-github" href="https://github.com/chilllab/react-nice-avatar" />
36-
43+
<div className={classnames("app", theme)}>
3744
<header className="header">
3845
<div className="tabs">
3946
<div className={classnames("activeBg", currentTab)} />
@@ -48,6 +55,17 @@ export default class App extends Component {
4855
CASES
4956
</div>
5057
</div>
58+
59+
<div className="menu">
60+
<div
61+
className={classnames("themeToggle", theme)}
62+
onClick={this.toggleTheme.bind(this)}>
63+
<i className="iconfont icon-Daytimemode" />
64+
<i className="iconfont icon-nightmode" />
65+
</div>
66+
67+
<a className="iconfont icon-github" href="https://github.com/chilllab/react-nice-avatar" />
68+
</div>
5169
</header>
5270

5371
<div className="appContent">

‎demo/app.scss‎

Lines changed: 109 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,16 @@ p {
1717
margin: 0;
1818
}
1919

20-
.app {
21-
height: 100vh;
20+
@keyframes spin {
21+
from {
22+
transform: rotate(0deg);
23+
} to {
24+
transform: rotate(360deg);
25+
}
2226
}
2327

24-
.icon-github {
25-
position: fixed;
26-
padding: 1.5rem 2.5rem;
27-
top: 0;
28-
right: 0;
29-
color: $blue-purple;
30-
transition: all 0.25s ease-out;
31-
font-size: 2rem;
32-
text-decoration: none;
33-
z-index: 20;
34-
&:hover {
35-
text-shadow: 0 0 5px $blue-purple;
36-
}
28+
.app {
29+
height: 100vh;
3730
}
3831

3932
$headerHeight: 6rem;
@@ -84,6 +77,88 @@ $headerHeight: 6rem;
8477
}
8578
}
8679
}
80+
81+
& > .menu {
82+
position: absolute;
83+
right: 0;
84+
display: flex;
85+
align-items: center;
86+
.themeToggle {
87+
$sunYellow: #ffc83d;
88+
height: 2.3rem;
89+
width: 3rem;
90+
position: relative;
91+
overflow: hidden;
92+
display: flex;
93+
justify-content: center;
94+
cursor: pointer;
95+
&:after {
96+
content: "";
97+
position: absolute;
98+
left: 0;
99+
bottom: 0;
100+
right: 0;
101+
border-radius: 2rem;
102+
height: 2px;
103+
}
104+
&.light {
105+
&:after {
106+
background: transparentize($sunYellow, 0.8);
107+
box-shadow: 0 0 3px transparentize($sunYellow, 0.8);
108+
}
109+
.icon-Daytimemode {
110+
top: 0;
111+
transition: top 0.15s linear 0.15s;
112+
}
113+
.icon-nightmode {
114+
top: 3rem;
115+
transition: top 0.15s linear 0s;
116+
}
117+
}
118+
&.dark {
119+
&:after {
120+
background: transparentize($blue-purple, 0.8);
121+
box-shadow: 0 0 3px transparentize($blue-purple, 0.8);
122+
}
123+
.icon-Daytimemode {
124+
top: 3rem;
125+
transition: top 0.15s linear 0s;
126+
}
127+
.icon-nightmode {
128+
top: 0;
129+
transition: top 0.15s linear 0.15s;
130+
}
131+
}
132+
.iconfont {
133+
font-size: 1.8rem;
134+
display: inline-block;
135+
position: absolute;
136+
top: 3rem;
137+
&.icon-Daytimemode {
138+
animation: spin 20s linear infinite;
139+
color: $sunYellow;
140+
text-shadow: 0 0 5px transparentize($sunYellow, 0.5);
141+
}
142+
&.icon-nightmode {
143+
color: $blue-purple;
144+
text-shadow: 0 0 5px transparentize($blue-purple, 0.1);
145+
}
146+
}
147+
}
148+
149+
.icon-github {
150+
margin-left: 0.5rem;
151+
padding: 1.5rem 2.5rem 1.5rem 1.5rem;
152+
color: $blue-purple;
153+
transition: all 0.25s ease-out;
154+
font-size: 2rem;
155+
text-decoration: none;
156+
z-index: 20;
157+
&:hover {
158+
text-shadow: 0 0 5px $blue-purple;
159+
}
160+
}
161+
}
87162
}
88163

89164
.appContent {
@@ -156,7 +231,7 @@ $headerHeight: 6rem;
156231

157232
.info {
158233
margin-left: 10rem;
159-
padding-bottom: 10vh;
234+
padding: 1rem 0;
160235
overflow-y: auto;
161236
box-sizing: border-box;
162237
max-height: 100%;
@@ -367,40 +442,28 @@ $headerHeight: 6rem;
367442
}
368443

369444
// define Dark Mode css
370-
@mixin dark {
371-
.appDark{
372-
.header,
373-
.appContent {
374-
background: #000;
375-
color: #ffffffc2;
445+
.app.dark {
446+
.header,
447+
.appContent {
448+
background: #000;
449+
color: #ffffffc2;
376450

377-
}
378-
.singleSection {
379-
.info {
380-
.opts {
381-
.opt {
382-
border: 1px solid #b9bcc06b;
383-
color: #ffffffc2;
384-
}
385-
.active{
386-
color: $blue-purple;
387-
border-color: $blue-purple;
388-
}
451+
}
452+
.singleSection {
453+
.info {
454+
.opts {
455+
.opt {
456+
border: 1px solid #b9bcc06b;
457+
color: #ffffffc2;
458+
}
459+
.active{
460+
color: $blue-purple;
461+
border-color: $blue-purple;
389462
}
390463
}
391464
}
392-
.application {
393-
background-color: #fff;
394-
}
395465
}
396-
}
397-
398-
// use Dark Mode css
399-
@include dark;
400-
401-
// follow system
402-
@media (prefers-color-scheme: dark) {
403-
.appSystemDark{
404-
@include dark;
466+
.application {
467+
background-color: #fff;
405468
}
406469
}

‎src/index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,5 @@ export const genConfig = (userConfig = {}) => {
224224
// Background color
225225
response.bgColor = userConfig.bgColor || _pickRandomFromList(bgColor, { avoidList: [_hairOrHatColor, response.shirtColor] });
226226

227-
// Theme
228-
response.theme = userConfig.theme || "light";
229-
230227
return response;
231228
};

0 commit comments

Comments
 (0)