Skip to content

Commit 3c9d679

Browse files
halfrosthalfrost
authored
Merge pull request halfrost#57 from halfrost/dark_theme
Add dark theme
2 parents 91c5197 + 6f7e2e9 commit 3c9d679

File tree

11 files changed

+873
-1663
lines changed

11 files changed

+873
-1663
lines changed

‎website/content/menu/index.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@ headless: true
88
- [1.1 关于作者]({{< relref "/ChapterOne/#关于作者" >}})
99
- 1.2 预备知识
1010
- [第二章 算法专题]({{< relref "/ChapterTwo/_index.md" >}})
11-
- [2.1 Array]({{< relref "/ChapterTwo/Array.md" >}})
12-
- [2.2 String]({{< relref "/ChapterTwo/String.md" >}})
13-
- [2.3 Two Pointers ✅]({{< relref "/ChapterTwo/Two_Pointers.md" >}})
14-
- [2.4 Linked List ✅]({{< relref "/ChapterTwo/Linked_List.md" >}})
15-
- [2.5 Stack ✅]({{< relref "/ChapterTwo/Stack.md" >}})
16-
- [2.6 Tree]({{< relref "/ChapterTwo/Tree.md" >}})
17-
- [2.7 Dynamic Programming]({{< relref "/ChapterTwo/Dynamic_Programming.md" >}})
18-
- [2.8 Backtracking ✅]({{< relref "/ChapterTwo/Backtracking.md" >}})
19-
- [2.9 Depth First Search]({{< relref "/ChapterTwo/Depth_First_Search.md" >}})
11+
- [2.01 Array]({{< relref "/ChapterTwo/Array.md" >}})
12+
- [2.02 String]({{< relref "/ChapterTwo/String.md" >}})
13+
- [2.03 ✅ Two Pointers]({{< relref "/ChapterTwo/Two_Pointers.md" >}})
14+
- [2.04 ✅ Linked List]({{< relref "/ChapterTwo/Linked_List.md" >}})
15+
- [2.05 ✅ Stack]({{< relref "/ChapterTwo/Stack.md" >}})
16+
- [2.06 Tree]({{< relref "/ChapterTwo/Tree.md" >}})
17+
- [2.07 Dynamic Programming]({{< relref "/ChapterTwo/Dynamic_Programming.md" >}})
18+
- [2.08 ✅ Backtracking]({{< relref "/ChapterTwo/Backtracking.md" >}})
19+
- [2.09 Depth First Search]({{< relref "/ChapterTwo/Depth_First_Search.md" >}})
2020
- [2.10 Breadth First Search]({{< relref "/ChapterTwo/Breadth_First_Search.md" >}})
2121
- [2.11 Binary Search]({{< relref "/ChapterTwo/Binary_Search.md" >}})
2222
- [2.12 Math]({{< relref "/ChapterTwo/Math.md" >}})
2323
- [2.13 Hash Table]({{< relref "/ChapterTwo/Hash_Table.md" >}})
24-
- [2.14 Sort ✅]({{< relref "/ChapterTwo/Sort.md" >}})
25-
- [2.15 Bit Manipulation ✅]({{< relref "/ChapterTwo/Bit_Manipulation.md" >}})
26-
- [2.16 Union Find ✅]({{< relref "/ChapterTwo/Union_Find.md" >}})
27-
- [2.17 Sliding Window ✅]({{< relref "/ChapterTwo/Sliding_Window.md" >}})
28-
- [2.18 Segment Tree ✅]({{< relref "/ChapterTwo/Segment_Tree.md" >}})
29-
- [2.19 Binary Indexed Tree ✅]({{< relref "/ChapterTwo/Binary_Indexed_Tree.md" >}})
24+
- [2.14 ✅ Sort]({{< relref "/ChapterTwo/Sort.md" >}})
25+
- [2.15 ✅ Bit Manipulation]({{< relref "/ChapterTwo/Bit_Manipulation.md" >}})
26+
- [2.16 ✅ Union Find]({{< relref "/ChapterTwo/Union_Find.md" >}})
27+
- [2.17 ✅ Sliding Window]({{< relref "/ChapterTwo/Sliding_Window.md" >}})
28+
- [2.18 ✅ Segment Tree]({{< relref "/ChapterTwo/Segment_Tree.md" >}})
29+
- [2.19 ✅ Binary Indexed Tree]({{< relref "/ChapterTwo/Binary_Indexed_Tree.md" >}})
3030
- [第三章 一些模板]({{< relref "/ChapterThree/_index.md" >}})
3131
- [3.1 Segment Tree]({{< relref "/ChapterThree/Segment_Tree.md" >}})
3232
- [3.2 UnionFind]({{< relref "/ChapterThree/UnionFind.md" >}})

‎website/themes/book/assets/_custom.scss

+155
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,158 @@
11
/* You can add custom styles here. */
22

33
// @import "plugins/numbered";
4+
/*
5+
* Dark Mode Toggle
6+
* Copyright (c) 2015 instructure-react
7+
* Forked from Dan Abramov's personal blog
8+
* https://github.com/gaearon/overreacted.io/blob/master/src/components/Toggle.css
9+
* MIT License
10+
**/
11+
12+
.js-toggle-wrapper {
13+
display: table;
14+
margin: 1rem 0 0 5px;
15+
flex: 1;
16+
}
17+
18+
.js-toggle {
19+
touch-action: pan-x;
20+
display: inline-block;
21+
position: relative;
22+
cursor: pointer;
23+
background-color: transparent;
24+
border: 0;
25+
padding: 0;
26+
-webkit-touch-callout: none;
27+
user-select: none;
28+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
29+
-webkit-tap-highlight-color: transparent;
30+
}
31+
32+
.js-toggle-screenreader-only {
33+
border: 0;
34+
clip: rect(0 0 0 0);
35+
height: 1px;
36+
margin: -1px;
37+
overflow: hidden;
38+
padding: 0;
39+
position: absolute;
40+
width: 1px;
41+
}
42+
43+
.js-toggle-track {
44+
width: 60px;
45+
height: 34px;
46+
padding: 0;
47+
// border-radius: 30px;
48+
// background-color: hsl(222, 14%, 7%);
49+
background-color: var(--body-background);
50+
transition: all 0.2s ease;
51+
}
52+
53+
.js-toggle-track-check {
54+
position: absolute;
55+
width: 17px;
56+
height: 17px;
57+
left: 5px;
58+
top: 0px;
59+
bottom: 0px;
60+
margin-top: auto;
61+
margin-bottom: auto;
62+
line-height: 0;
63+
opacity: 0;
64+
transition: opacity 0.25s ease;
65+
}
66+
67+
.js-toggle--checked .js-toggle-track-check {
68+
opacity: 1;
69+
transition: opacity 0.25s ease;
70+
}
71+
72+
.js-toggle-track-x {
73+
position: absolute;
74+
width: 17px;
75+
height: 17px;
76+
right: 5px;
77+
top: 0px;
78+
bottom: 0px;
79+
margin-top: auto;
80+
margin-bottom: auto;
81+
line-height: 0;
82+
opacity: 1;
83+
transition: opacity 0.25s ease;
84+
}
85+
86+
.js-toggle--checked .js-toggle-track-x {
87+
opacity: 0;
88+
}
89+
90+
.js-toggle-thumb {
91+
position: absolute;
92+
top: 1px;
93+
left: 1px;
94+
width: 30px;
95+
height: 32px;
96+
// border-radius: 50%;
97+
background-color: var(--gray-100);
98+
box-sizing: border-box;
99+
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
100+
transform: translateX(0);
101+
}
102+
103+
.js-toggle--checked .js-toggle-thumb {
104+
transform: translateX(26px);
105+
border-color: #19ab27;
106+
}
107+
108+
.js-toggle--focus .js-toggle-thumb {
109+
// box-shadow: 0px 0px 2px 3px rgb(255, 167, 196);
110+
box-shadow: 0px 0px 2px 3px #64CEAA;
111+
}
112+
113+
.js-toggle:active .js-toggle-thumb {
114+
box-shadow: 0px 0px 5px 5px #64CEAA;
115+
// box-shadow: 0px 0px 5px 5px rgb(255, 167, 196);
116+
}
117+
118+
.magic {
119+
display: flex;
120+
}
121+
122+
body.dark-mode,
123+
body.dark-mode main * {
124+
background: rgb(45, 45, 45);
125+
color: #f5f5f5;
126+
}
127+
128+
$theme-light: (
129+
gray-100: #f8f9fa,
130+
gray-200: #e9ecef,
131+
body-background: white,
132+
body-font-color: black,
133+
color-link: #05b,
134+
color-visited-link: #8440f1,
135+
icon-filter: none,
136+
);
137+
138+
$theme-dark: (
139+
gray-100: rgba(255, 255, 255, 0.1),
140+
gray-200: rgba(255, 255, 255, 0.2),
141+
body-background: #343a40,
142+
body-font-color: #e9ecef,
143+
color-link: #84b2ff,
144+
color-visited-link: #b88dff,
145+
icon-filter: brightness(0) invert(1),
146+
);
147+
148+
[data-theme="dark"] {
149+
@each $name, $value in $theme-dark {
150+
--#{$name}: #{$value};
151+
}
152+
}
153+
154+
[data-theme="light"] {
155+
@each $name, $value in $theme-light {
156+
--#{$name}: #{$value};
157+
}
158+
}

‎website/themes/book/assets/_defaults.scss

+38-38
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
11
// Used in layout
2-
$padding-1: 1px !default;
3-
$padding-4: 0.25rem !default;
4-
$padding-8: 0.5rem !default;
5-
$padding-16: 1rem !default;
2+
$padding-1: 1px ;
3+
$padding-4: 0.25rem ;
4+
$padding-8: 0.5rem ;
5+
$padding-16: 1rem ;
66

7-
$font-size-base: 16px !default;
8-
$font-size-12: 0.75rem !default;
9-
$font-size-14: 0.875rem !default;
10-
$font-size-16: 1rem !default;
7+
$font-size-base: 16px ;
8+
$font-size-12: 0.75rem ;
9+
$font-size-14: 0.875rem ;
10+
$font-size-16: 1rem ;
1111

12-
$border-radius: $padding-4 !default;
12+
$border-radius: $padding-4 ;
1313

1414
// Grayscale
15-
$white: #ffffff !default;
16-
$gray-100: #f8f9fa !default;
17-
$gray-200: #e9ecef !default;
18-
$gray-300: #dee2e6 !default;
19-
$gray-400: #ced4da !default;
20-
$gray-500: #adb5bd !default;
21-
$gray-600: #868e96 !default;
22-
$gray-700: #495057 !default;
23-
$gray-800: #343a40 !default;
24-
$gray-900: #212529 !default;
25-
$black: #000 !default;
26-
27-
$color-link: #05b !default;
28-
$color-visited-link: #8440f1 !default;
29-
30-
$body-background: white !default;
31-
$body-font-color: $black !default;
32-
$body-font-weight: normal !default;
33-
34-
$body-min-width: 20rem !default;
35-
$container-max-width: 80rem !default;
36-
37-
$header-height: 3.5rem !default;
38-
$menu-width: 16rem !default;
39-
$toc-width: 16rem !default;
40-
41-
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
15+
$white: #ffffff ;
16+
$gray-100: #f8f9fa ;
17+
$gray-200: #e9ecef ;
18+
$gray-300: #dee2e6 ;
19+
$gray-400: #ced4da ;
20+
$gray-500: #adb5bd ;
21+
$gray-600: #868e96 ;
22+
$gray-700: #495057 ;
23+
$gray-800: #343a40 ;
24+
$gray-900: #212529 ;
25+
$black: #000 ;
26+
27+
$color-link: #05b ;
28+
$color-visited-link: #8440f1 ;
29+
30+
$body-background: white ;
31+
$body-font-color: $black ;
32+
$body-font-weight: normal ;
33+
34+
$body-min-width: 20rem ;
35+
$container-max-width: 80rem ;
36+
37+
$header-height: 3.5rem ;
38+
$menu-width: 16rem ;
39+
$toc-width: 16rem ;
40+
41+
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width ;
4242

4343
// Hint colors
4444
$hint-colors: (
4545
info: #6bf,
4646
warning: #fd6,
4747
danger: #f66
48-
) !default;
48+
) ;
4949

50-
$icon-filter: none !default;
50+
$icon-filter: none ;

‎website/themes/book/assets/_main.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ html {
66

77
body {
88
min-width: $body-min-width;
9-
color: $body-font-color;
10-
background: $body-background;
9+
color: var(--body-font-color);
10+
background: var(--body-background);
1111

1212
letter-spacing: 0.33px;
1313
font-weight: $body-font-weight;
@@ -31,7 +31,7 @@ h5 {
3131

3232
a {
3333
text-decoration: none;
34-
color: $color-link;
34+
color: var(--color-link);
3535
}
3636

3737
img {
@@ -81,7 +81,7 @@ ul.pagination {
8181
}
8282

8383
.book-icon {
84-
filter: $icon-filter;
84+
filter: var(--icon-filter);
8585
}
8686

8787
.book-brand {
@@ -102,7 +102,7 @@ ul.pagination {
102102
nav {
103103
width: $menu-width;
104104
padding: $padding-16;
105-
background: $body-background;
105+
background: var(--body-background);
106106

107107
@include fixed;
108108
}
@@ -113,7 +113,7 @@ ul.pagination {
113113
}
114114

115115
a.active {
116-
color: $color-link;
116+
color: var(--color-link);
117117
}
118118

119119
a.collapsed {
@@ -174,8 +174,8 @@ ul.pagination {
174174
border: 0;
175175
border-radius: $border-radius;
176176

177-
background: $gray-100;
178-
color: $body-font-color;
177+
background: var(--gray-100);
178+
color: var(--body-font-color);
179179

180180
&:required + .book-search-spinner {
181181
display: block;
@@ -192,7 +192,7 @@ ul.pagination {
192192
height: $padding-16;
193193

194194
border: $padding-1 solid transparent;
195-
border-top-color: $body-font-color;
195+
border-top-color: var(--body-font-color);
196196
border-radius: 50%;
197197

198198
@include spin(1s);
@@ -271,7 +271,7 @@ ul.pagination {
271271
left: 0;
272272
padding: $padding-8 0;
273273

274-
background: $body-background;
274+
background: var(--body-background);
275275
box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
276276

277277
li img {

0 commit comments

Comments
 (0)