Skip to content

Commit 5119706

Browse files
committed
Improve dark mode slightly
1 parent 57165b7 commit 5119706

File tree

2 files changed

+27
-3
lines changed

2 files changed

+27
-3
lines changed

src/scss/_c-list.scss

+6
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
width: 100%;
1313

1414
border-bottom: .1rem solid $color-gray-150;
15+
@media (prefers-color-scheme: dark) {
16+
border-color: $color-gray-700;
17+
}
1518

1619
&:last-child {
1720
border: none;
@@ -47,6 +50,9 @@
4750

4851
.c-list__first-line {
4952
color: $color-gray-900;
53+
@media (prefers-color-scheme: dark) {
54+
color: #FFF;
55+
}
5056
font-weight: 500;
5157
padding-bottom: .2rem;
5258
}

src/scss/_c-side-menu.scss

+21-3
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,41 @@
2121
@media (prefers-color-scheme: dark) {
2222
background: $color-gray-800;
2323
}
24+
color: $color-blue-600;
25+
@media (prefers-color-scheme: dark) {
26+
color: $color-blue-400;
27+
}
2428
}
2529

26-
.o-svg-icon {
30+
.c-icon {
2731
margin-right: 1.2rem;
2832
color: $color-gray-300;
33+
@media (prefers-color-scheme: dark) {
34+
color: $color-gray-600;
35+
}
2936
}
3037
}
3138

3239
.c-side-menu__item a:focus,
3340
.c-side-menu__item--active a {
3441
background: $color-gray-50;
42+
3543
@media (prefers-color-scheme: dark) {
3644
background: $color-gray-800;
3745
}
38-
color: $color-primary;
46+
47+
color: $color-blue-600;
48+
@media (prefers-color-scheme: dark) {
49+
color: $color-blue-400;
50+
}
51+
52+
53+
// @todo does this code make any sense? If it's SVG, it should be fill
3954
.o-svg-icon {
40-
color: $color-primary;
55+
color: $color-blue-600;
56+
@media (prefers-color-scheme: dark) {
57+
color: $color-blue-400;
58+
}
4159
}
4260
}
4361

0 commit comments

Comments
 (0)