Skip to content

Commit c4be78a

Browse files
AaronOAaronO
committed
Merge pull request GitbookIO#506 from Nijikokun/feature/clarity-midnight
Clarity: Midnight Theme (Night)
2 parents e7309f7 + c52aecd commit c4be78a

File tree

4 files changed

+170
-55
lines changed

4 files changed

+170
-55
lines changed

‎theme/assets/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎theme/stylesheets/website/markdown.less‎

Lines changed: 84 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,57 +16,123 @@
1616
}
1717

1818
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal {
19-
color:@page-color-1;
19+
color: @page-color-1;
20+
21+
a {
22+
color: @page-link-color-1;
23+
}
24+
25+
h1,
26+
h2,
27+
h3,
28+
h4,
29+
h5,
30+
h6 {
31+
color: @page-heading-color-1;
32+
}
33+
34+
h1, h2 {
35+
border-color: @page-heading-border-color-1;
36+
}
37+
38+
h6 {
39+
color: @page-h6-color-1;
40+
}
41+
42+
hr {
43+
background-color: @page-hr-color-1;
44+
}
45+
46+
blockquote {
47+
border-color: @page-blockquote-border-color-1;
48+
}
2049

2150
pre, code {
22-
background: #fdf6e3;
23-
color: #657b83;
24-
border-color: darken(#fdf6e3, 15%);
51+
background: @page-pre-background-1;
52+
color: @page-pre-color-1;
53+
border-color: @page-pre-border-color-1;
2554

2655
@import "./highlight/sepia.less";
2756
}
2857

58+
.highlight {
59+
background-color: @page-highlight-background-1;
60+
}
61+
2962
table {
3063
th, td {
31-
border-color: darken(#fdf6e3, 25%);
64+
border-color: @page-table-header-border-color-1;
3265
}
3366

3467
tr {
35-
background: #fdf6e3;
36-
color: inherit;
37-
border-color: #444;
68+
color: @page-table-row-color-1;
69+
background-color: @page-table-row-background-1;
70+
border-color: @page-table-row-border-color-1;
3871
}
3972

4073
tr:nth-child(2n) {
41-
background-color: darken(#fdf6e3, 5%);
74+
background-color: @page-table-row-odd-background-1;
4275
}
4376
}
4477
}
4578

4679
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
47-
color:@page-color-2;
80+
color: @page-color-2;
81+
82+
a {
83+
color: @page-link-color-2;
84+
}
85+
86+
h1,
87+
h2,
88+
h3,
89+
h4,
90+
h5,
91+
h6 {
92+
color: @page-heading-color-2;
93+
}
94+
95+
h1, h2 {
96+
border-color: @page-heading-border-color-2;
97+
}
98+
99+
h6 {
100+
color: @page-h6-color-2;
101+
}
102+
103+
hr {
104+
background-color: @page-hr-color-2;
105+
}
106+
107+
blockquote {
108+
border-color: @page-blockquote-border-color-2;
109+
}
48110

49111
pre, code {
50-
background: black;
51-
color: #eaeaea;
52-
border-color: #000;
112+
color: @page-pre-color-2;
113+
background: @page-pre-background-2;
114+
border-color: @page-pre-border-color-2;
53115

54116
@import "./highlight/night.less";
55117
}
56118

119+
.highlight {
120+
background-color: @page-highlight-background-2;
121+
}
122+
57123
table {
58124
th, td {
59-
border-color: #444;
125+
border-color: @page-table-header-border-color-2;
60126
}
61127

62128
tr {
63-
background-color: black;
64-
color: #eaeaea;
65-
border-color: #444;
129+
color: @page-table-row-color-2;
130+
background-color: @page-table-row-background-2;
131+
border-color: @page-table-row-border-color-2;
66132
}
67133

68134
tr:nth-child(2n) {
69-
background-color: #222;
135+
background-color: @page-table-row-odd-background-2;
70136
}
71137
}
72138
}

‎theme/stylesheets/website/summary.less‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
width: @sidebar-width;
1212
color: @sidebar-color;
1313
background: @sidebar-background;
14-
border-right: 1px solid @sidebar-border;
14+
border-right: @sidebar-border-right;
1515

1616
.transition(left @sidebar-transition-duration ease);
1717

@@ -152,6 +152,7 @@
152152
.book-summary {
153153
color: @sidebar-color-1;
154154
background: @sidebar-background-1;
155+
border-right: @sidebar-border-right-1;
155156

156157
.book-search {
157158
background: @sidebar-search-background-1;
@@ -179,11 +180,13 @@
179180
a, span {
180181
color: @sidebar-link-color-1;
181182
background: @sidebar-link-background-1;
183+
font-weight: @sidebar-link-weight-1;
182184
}
183185

184186
&.active > a, a:hover {
185187
color: @sidebar-link-hover-color-1;
186188
background: @sidebar-link-hover-background-1;
189+
font-weight: @sidebar-link-hover-weight-1;
187190
}
188191
}
189192
}
@@ -197,6 +200,7 @@
197200
.book-summary {
198201
color: @sidebar-color-2;
199202
background: @sidebar-background-2;
203+
border-right: @sidebar-border-right-2;
200204

201205
.book-search {
202206
background: @sidebar-search-background-2;
@@ -224,11 +228,13 @@
224228
a, span {
225229
color: @sidebar-link-color-2;
226230
background: @sidebar-link-background-2;
231+
font-weight: @sidebar-link-weight-2;
227232
}
228233

229234
&.active > a, a:hover {
230235
color: @sidebar-link-hover-color-2;
231236
background: @sidebar-link-hover-background-2;
237+
font-weight: @sidebar-link-hover-weight-2;
232238
}
233239
}
234240
}

‎theme/stylesheets/website/variables.less‎

Lines changed: 78 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
@sidebar-breakpoint: 600px;
3232
@sidebar-color: hsl(207, 15%, 25%);
3333
@sidebar-background: #fafafa;
34-
@sidebar-border: @header-border;
34+
@sidebar-border-right: 1px solid @header-border;
3535

3636
@sidebar-nested-padding: 20px;
3737

@@ -40,7 +40,7 @@
4040
@sidebar-search-input-background: transparent;
4141
@sidebar-search-input-border-color: transparent;
4242

43-
@sidebar-divider-color: @sidebar-border;
43+
@sidebar-divider-color: @header-border;
4444

4545
@sidebar-link-color: @sidebar-color;
4646
@sidebar-link-background: transparent;
@@ -103,12 +103,12 @@
103103
@FontPath: '@{staticPath}/fonts';
104104
@fa-font-path: "@{FontPath}/fontawesome";
105105

106-
@s-font-size: 1.2rem;
107-
@m-font-size: 1.4rem;
108-
@l-font-size: 1.6rem;
109-
@xl-font-size: 2.2rem;
110-
@xxl-font-size: 4.0rem;
111-
@default-font-size: @l-font-size;
106+
@s-font-size: 1.2rem;
107+
@m-font-size: 1.4rem;
108+
@l-font-size: 1.6rem;
109+
@xl-font-size: 2.2rem;
110+
@xxl-font-size: 4.0rem;
111+
@default-font-size: @l-font-size;
112112

113113
/*
114114
,--------.,--.
@@ -123,76 +123,119 @@
123123
@header-background-1: transparent;
124124
@header-background-2: transparent;
125125
@header-button-color-1: #AFA790;
126-
@header-button-color-2: #7e888b;
126+
@header-button-color-2: hsl(230, 17%, 28%);
127127
@header-button-hover-color-1: #73553C;
128-
@header-button-hover-color-2: #C9C9C9;
128+
@header-button-hover-color-2: hsl(60, 100%, 98%);
129129
@header-button-hover-background-1: none;
130130
@header-button-hover-background-2: none;
131131
@header-dropdown-background-1: @sidebar-background-1;
132132
@header-dropdown-background-2: @sidebar-background-2;
133133

134134
// Body
135135
@body-background-1: #F3EACB;
136-
@body-background-2: #1d1f21;
136+
@body-background-2: hsl(228, 21%, 14%);
137137

138138
// Sidebar
139139
@sidebar-transition-duration: 250ms;
140140
@sidebar-color-1: #AFA790;
141-
@sidebar-color-2: hsl(207, 15%, 80%);
141+
@sidebar-color-2: hsl(226, 20%, 78%);
142142
@sidebar-background-1: #111;
143-
@sidebar-background-2: #111;
143+
@sidebar-background-2: hsl(229, 20%, 22%);
144+
@sidebar-border-right-1: @sidebar-border-right;
145+
@sidebar-border-right-2: none;
144146

145147
@sidebar-search-background-1: transparent;
146148
@sidebar-search-background-2: transparent;
147149
@sidebar-search-input-border-color-1: transparent;
148150
@sidebar-search-input-border-color-2: transparent;
149151

150152
@sidebar-divider-color-1: @sidebar-divider-color;
151-
@sidebar-divider-color-2: #1d1f21;
153+
@sidebar-divider-color-2: hsl(230, 19%, 19%);
152154

153155
@sidebar-link-color-1: #877F6A;
154-
@sidebar-link-color-2: hsl(207, 15%, 50%);
156+
@sidebar-link-color-2: hsl(226, 22%, 80%);
155157
@sidebar-link-background-1: transparent;
156158
@sidebar-link-background-2: transparent;
159+
@sidebar-link-weight-1: normal;
160+
@sidebar-link-weight-2: 600;
157161
@sidebar-link-hover-color-1: #704214;
158-
@sidebar-link-hover-color-2: hsl(207, 100%, 50%);
162+
@sidebar-link-hover-color-2: hsl(240, 5%, 96%);
159163
@sidebar-link-hover-background-1: transparent;
160-
@sidebar-link-hover-background-2: transparent;
164+
@sidebar-link-hover-background-2: hsl(233, 19%, 18%);
165+
@sidebar-link-hover-weight-1: normal;
166+
@sidebar-link-hover-weight-2: 600;
161167

162168
@sidebar-icon-color-1: hsl(120, 60%, 50%);
163169
@sidebar-icon-color-2: @sidebar-icon-color-1;
164170
@sidebar-link-completed-1: @sidebar-link-color-1;
165-
@sidebar-link-completed-2: @sidebar-link-color-2;
171+
@sidebar-link-completed-2: hsl(227, 13%, 44%);
166172
@sidebar-link-completed-weight-1: normal;
167-
@sidebar-link-completed-weight-2: normal;
173+
@sidebar-link-completed-weight-2: 600;
168174

169175
// Dropdown
170176
@dropdown-divider-color-1: @sidebar-divider-color-1;
177+
@dropdown-divider-color-2: @sidebar-divider-color-2;
178+
@dropdown-border-color-1: @sidebar-divider-color-1;
179+
@dropdown-border-color-2: @sidebar-divider-color-2;
171180
@dropdown-background-1: @sidebar-background-1;
181+
@dropdown-background-2: @sidebar-background-2;
182+
172183
@dropdown-button-color-1: @header-button-color-1;
173-
@dropdown-border-color-1: @sidebar-divider-color-1;
184+
@dropdown-button-color-2: hsl(228, 13%, 44%);
174185
@dropdown-button-hover-color-1: @header-button-hover-color-1;
175-
176-
@dropdown-divider-color-2: @sidebar-divider-color-2;
177-
@dropdown-background-2: @sidebar-background-2;
178-
@dropdown-button-color-2: @header-button-color-2;
179-
@dropdown-border-color-2: @sidebar-divider-color-2;
180-
@dropdown-button-hover-color-2: @header-button-hover-color-2;
186+
@dropdown-button-hover-color-2: hsl(240, 5%, 96%);
181187

182188
// Page
183-
@page-color-1: #704214;
184-
@page-color-2: #a4b1b1;
185-
@page-background-1: #F3EACB;
186-
@page-background-2: #1d1f21;
187-
188-
@bar-background-1: #F3EACB;
189-
@bar-background-2: #1d1f21;
189+
@page-color-1: #704214;
190+
@page-color-2: hsl(214, 29%, 80%);
191+
@page-background-1: @body-background-1;
192+
@page-background-2: @body-background-2;
193+
194+
@page-link-color-1: inherit;
195+
@page-link-color-2: hsl(193, 61%, 53%);
196+
197+
@page-heading-color-1: inherit;
198+
@page-heading-color-2: hsl(60, 100%, 99%);
199+
@page-heading-border-color-1: inherit;
200+
@page-heading-border-color-2: hsl(230, 17%, 26%);
201+
@page-h6-color-1: inherit;
202+
@page-h6-color-2: hsl(230, 17%, 26%);
203+
204+
@page-hr-color-1: inherit;
205+
@page-hr-color-2: hsl(230, 17%, 26%);
206+
207+
@page-blockquote-border-color-1: inherit;
208+
@page-blockquote-border-color-2: hsl(230, 17%, 26%);
209+
210+
@page-pre-color-1: #657b83;
211+
@page-pre-color-2: hsl(206, 43%, 73%);
212+
@page-pre-background-1: #fdf6e3;
213+
@page-pre-background-2: hsl(229, 20%, 22%);
214+
@page-pre-border-color-1: darken(#fdf6e3, 15%);
215+
@page-pre-border-color-2: hsl(229, 20%, 22%);
216+
@page-highlight-background-1: inherit;
217+
@page-highlight-background-2: hsl(233, 18%, 19%);
218+
219+
@page-table-header-border-color-1: darken(#fdf6e3, 25%);
220+
@page-table-header-border-color-2: hsl(230, 17%, 28%);
221+
@page-table-row-border-color-1: #444;
222+
@page-table-row-border-color-2: hsl(230, 17%, 28%);
223+
@page-table-row-color-1: inherit;
224+
@page-table-row-color-2: hsl(216, 24%, 77%);
225+
@page-table-row-background-1: #fdf6e3;
226+
@page-table-row-background-2: hsl(229, 19%, 22%);
227+
@page-table-row-odd-background-1: darken(#fdf6e3, 5%);
228+
@page-table-row-odd-background-2: hsl(229, 17%, 25%);
229+
230+
// Page Bar
231+
@bar-background-1: @page-background-1;
232+
@bar-background-2: @page-background-2;
190233

191234
// Navigation
192235
@navigation-color-1: @header-button-color-1;
193-
@navigation-color-2: @header-button-color-2;
236+
@navigation-color-2: hsl(224, 19%, 27%);
194237
@navigation-hover-color-1: @header-button-hover-color-1;
195-
@navigation-hover-color-2: @header-button-hover-color-2;
238+
@navigation-hover-color-2: hsl(60, 100%, 98%);
196239

197240
// Basics of a navbar
198241
@navbar-default-border-1: #d5d5d5;

0 commit comments

Comments
 (0)