Skip to content

Commit 425606a

Browse files
alex-kinokonalex-kinokon
authored
Dark mode (#4068)
* Create dark.scss * Update index.scss * Update dark.scss * Add dark colors to search and mobile sidebar * Update dark.scss
1 parent 06aa320 commit 425606a

File tree

2 files changed

+189
-1
lines changed

2 files changed

+189
-1
lines changed

‎src/styles/dark.scss

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
@media (prefers-color-scheme: dark) {
2+
body {
3+
background-color: #121212;
4+
color: #e0e0e0;
5+
}
6+
.navigation,
7+
.navigation__inner,
8+
.splash-viz {
9+
background-color: #101619;
10+
}
11+
.navigation-sub {
12+
background-color: #222;
13+
}
14+
.splash__section--dark {
15+
background-color: #202020;
16+
}
17+
.markdown {
18+
h1, h2, h3, h4, h5, h6 {
19+
color: #9ab3c0;
20+
}
21+
code, tt {
22+
text-shadow: none;
23+
}
24+
blockquote {
25+
border-left-color: #343434;
26+
color: #a3a3a3;
27+
}
28+
blockquote.tip {
29+
background-color: #192429;
30+
color: #7da2b4;
31+
}
32+
blockquote.warning {
33+
background-color: #27220a;
34+
color: #a49d83;
35+
}
36+
blockquote.todo {
37+
background-color: #402b1f;
38+
color: #998478;
39+
}
40+
hr {
41+
background-color: #343434;
42+
}
43+
th {
44+
background-color: #121212;
45+
border-color: #252525;
46+
}
47+
tr,
48+
tr:last-child {
49+
border-color: #252525;
50+
}
51+
tr:nth-child(2n) {
52+
background-color: #202020;
53+
}
54+
td {
55+
border-color: #252525;
56+
}
57+
pre {
58+
background-color: #131b1f;
59+
}
60+
a code {
61+
color: #69a8ee;
62+
&:hover {
63+
color: #82b7f6;
64+
}
65+
}
66+
}
67+
.sidebar-item__title,
68+
.sidebar-item__anchor a {
69+
color: #b8b8b8;
70+
}
71+
.navigation-sub__link--active {
72+
color: #dcdcdc;
73+
}
74+
.gitter__button {
75+
background: #1c3b39;
76+
}
77+
.sponsors__content,
78+
.footer__inner {
79+
border-color: #252525;
80+
}
81+
.sponsors__content:hover {
82+
background-color: #272727;
83+
}
84+
a,
85+
.navigation-sub__link,
86+
button.as-link {
87+
color: #69a8ee;
88+
}
89+
.page-links__gap {
90+
color: #999;
91+
}
92+
.sidebar-item__toggle,
93+
.sidebar-item--disabled .sidebar-item__toggle {
94+
color: #69a8ee;
95+
}
96+
.sidebar-item__anchor a:hover,
97+
.navigation-sub__link:hover,
98+
a:hover {
99+
color: #82b7f6;
100+
}
101+
.site {
102+
background: #121212 !important;
103+
}
104+
.sidebar__docs-version {
105+
border-color: #252525;
106+
color: #b8b8b8;
107+
}
108+
.contributor .contributor__name {
109+
background-color: #121212;
110+
color: #9ab3c0;
111+
}
112+
.placeholder h2,
113+
.placeholder p {
114+
background-color: #252525;
115+
&:after {
116+
background: linear-gradient(90deg, #252525, #121212, #252525);
117+
}
118+
}
119+
120+
// Search
121+
.algolia-autocomplete {
122+
.ds-dropdown-menu [class^="ds-dataset-"] {
123+
background: #121212;
124+
}
125+
.algolia-docsearch-suggestion {
126+
background-color: #121212;
127+
.algolia-docsearch-suggestion--content:before {
128+
background: #343434;
129+
}
130+
}
131+
.algolia-docsearch-suggestion--category-header {
132+
background: #121212;
133+
color: #dfdfdf;
134+
}
135+
.algolia-docsearch-suggestion--title {
136+
color: #dfdfdf;
137+
}
138+
.ds-suggestion:nth-child(n + 2)
139+
.algolia-docsearch-suggestion--category-header,
140+
.algolia-docsearch-suggestion__secondary,
141+
.algolia-docsearch-suggestion--category-header {
142+
border-color: #343434;
143+
}
144+
145+
.algolia-docsearch-suggestion__secondary
146+
.algolia-docsearch-suggestion--subcategory-column {
147+
color: #a3a3a3;
148+
.algolia-docsearch-suggestion--highlight {
149+
color: #69a8ee;
150+
}
151+
}
152+
153+
.ds-dropdown-menu
154+
.ds-suggestion.ds-cursor
155+
.algolia-docsearch-suggestion--content {
156+
background-color: #1f2629 !important;
157+
}
158+
.algolia-docsearch-suggestion--highlight {
159+
background-color: #2b353e;
160+
color: #7791bf;
161+
}
162+
.algolia-autocomplete .aa-suggestion-title-separator {
163+
color: #929191;
164+
}
165+
}
166+
167+
// Mobile
168+
.sidebar-mobile__content {
169+
background-color: #121212;
170+
}
171+
.sidebar-mobile__section-header {
172+
color: #cadbe6;
173+
}
174+
.sidebar-mobile__page {
175+
color: #a3a3a3;
176+
}
177+
.sidebar-mobile__page--active,
178+
.sidebar-mobile__page:active {
179+
background-color: #222424;
180+
}
181+
.sidebar-mobile__content
182+
div:not(:first-of-type)
183+
.sidebar-mobile__section-header {
184+
border-color: #343434;
185+
}
186+
}

‎src/styles/index.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,6 @@ button.as-link {
5151
.token.prefix.inserted, .token.prefix.deleted {
5252
user-select: none;
5353
}
54-
}
54+
}
55+
56+
@import 'dark';

0 commit comments

Comments
 (0)