Skip to content

Commit 9ff500e

Browse files
committed
dark mode: dim images
As per the guidance provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-dark-mode-images wht this commit we tone down the images in dark mode, applying techniques to filter background images as described in https://css-tricks.com/apply-a-filter-to-a-background-image/. Signed-off-by: Johannes Schindelin <[email protected]>
1 parent 148a592 commit 9ff500e

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

assets/sass/dark-mode.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,35 @@
3333
$main-bg: #333333;
3434
$bg-color: #2a2a2aff;
3535
$sidebar-bg-color: #3d3d3a;
36+
37+
:root#{$theme} {
38+
div#masthead {
39+
background: transparent;
40+
}
41+
42+
div#masthead::before {
43+
content: "";
44+
width: 100%;
45+
height: 295px;
46+
@include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
47+
position: absolute;
48+
filter: brightness(.4) contrast(1.6);
49+
z-index: -1;
50+
}
51+
52+
img {
53+
filter: brightness(.6) contrast(1.2);
54+
}
55+
56+
a.subtle-button {
57+
background-image: linear-gradient(#555555, #777777);
58+
border-top: solid 1px #333333;
59+
border-right: solid 1px #333333;
60+
border-bottom: solid 1px #333333;
61+
border-left: solid 1px #333333;
62+
@include box-shadow(none);
63+
}
64+
}
3665
}
3766

3867
:root#{$theme} {

0 commit comments

Comments
 (0)