I saw a nice lightning talk at the inovex office about new css features (back in the good old days without corona) - one of them was a new media query to detect light or dark mode preferences - and this is already pretty well supported
Long story short: i tested this on my website
@media (prefers-color-scheme: dark) {
/* swap colors */
}
Or just with a small sass mixin
@mixin darkmode {
@media (prefers-color-scheme: dark) {
@content
}
}
And if you want to know something about the preferences from javascript, this is also possible
...
I am pretty happy with my minimal blog layout - in the code it looks something like:
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
with the css code
#content-container {
display: flex;
}
#content {
flex: 1;
}
#sidebar {
max-width: 210px;
}
nothing too exciting…
While i’m writing several drafts, i had looong docker commands in pre tags, and it broke the layout - i don’t know why, but the pre tags didn’t want to break the lines. Everything was pushed out of all containers, even out of the max-width of 960 pixels on the body. Nothing seems to help, overflow, fixed width, everything was ignored.
...