Skip to content

Commit 3ead9ed

Browse files
committed
dark-mode: use a not-too-dark color for navbar links
The links in the navigation bar are supposed to be colored dark gray unless the current page is in the corresponding section. In dark mode, however, it must be a bit lighter than the very dark background. So let's stop hard-coding that color and override it accordingly in dark mode with a nice, pleasant light gray. Signed-off-by: Johannes Schindelin <[email protected]>
1 parent 84f7e0f commit 3ead9ed

File tree

2 files changed

+4
-1
lines changed

2 files changed

+4
-1
lines changed

assets/sass/dark-mode.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
$aside-font-color: lighten($font-color, 20%);
77
$light-font-color: #9a9994;
88
$link-color: #0388a6;
9+
$nav-link-color: #413932;
910
$fixed-width-font-color: #4e443c;
1011
$button-bg-color: #dfddd554;
1112
$button-bg-hover-color: #fafafae5;
@@ -24,6 +25,7 @@
2425
$aside-font-color: darken($font-color, 10%);
2526
$light-font-color: #bdbbb0;
2627
$link-color: #d7834f;
28+
$nav-link-color: #979594;
2729
$fixed-width-font-color: #afa7a0;
2830
$button-bg-hover-color: #dfddd599;
2931
$base-border-color: #b3b2a7;
@@ -94,6 +96,7 @@
9496
--light-font-color-darker-55: #{darken($light-font-color, 55%)};
9597
--light-font-color-lighter-20: #{lighten($light-font-color, 20%)};
9698
--link-color: #{$link-color};
99+
--nav-link-color: #{$nav-link-color};
97100
--link-hover-color: #{lighten($link-color, 10%)};
98101
--fixed-width-font-color: #{$fixed-width-font-color};
99102
--button-bg-color: #{$button-bg-color};

assets/sass/layout.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ aside nav ul {
142142
margin-bottom: 0.5em;
143143

144144
a {
145-
color: #413932;
145+
color: var(--nav-link-color);
146146

147147
&.active, &:hover {
148148
color: var(--orange);

0 commit comments

Comments
 (0)