Im Frontend ändert sich mein Blog nur noch marginal. Jedoch musste ich mich aufgrund von Änderungen im Sourcecode von WordPress für ein anderes Theme entscheiden. Zuvor hatte ich ein Theme von einem deutschen bekannten Entwicklerpaar gekauft, aber leider endet hier der Support doch recht schnell. Auch Bugfixes, welche ich einmal auf Github eingereicht hatte, wurden erst nach zwei Jahren (🦉really?!?!) eingepflegt. Es ist eher ein „Aus den Augen, aus dem Sinn“-Coding und ich würde hier kein Geld mehr investieren.
Jedoch habe ich mich nun für ein weit genutztes Projekt entschieden. Der Wechsel auf ein neues Theme bringt auch Änderungen in den Klassen mit sich. Dementsprechend musste ich jetzt auch den Code für den Darkmode anpassen. Eine einfache Funktion für die Anpassung der Farben im Darkmode fehlt ungünstigerweise in vielen Themes.
Neben den Klassen wurde noch die Helligkeit der Bilder angepasst. Eine Helligkeit von 70 % empfand ich als augenschonend
Mit der Farbe der Einbettung des Codes im Darkmode bin ich noch nicht so richtig zufrieden 🤷
/* Dark */
@media (prefers-color-scheme: dark) {
body {
background: #23282d;
color: #eee;
}
.inside-page-header,
.one-container .container,
.separate-containers .comments-area,
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation {
background-color: #23282d;
}
#page,
.footer-widgets,
.site-header,
content {
background: #23282d;
color: #eee;
}
.main-navigation,
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items,
.main-navigation .menu-toggle,
.main-navigation ul ul {
background: #23282d;
color: #cca26a;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
color: white;
background-color: #23282d;
}
.main-navigation .main-nav ul ul li a {
color: grey;
}
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
color: #efefef;
background-color: grey;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
color: #efefef;
background-color: #23282d;
}
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus,
.main-navigation .main-nav ul li.search-item.active > a,
.main-navigation .menu-bar-items .search-item.active > a {
color: black;
background-color: lightgrey;
}
#reply-title,
.comment-form-comment,
.comment-notes,
.entry-title,
.textwidget,
.widget-title,
h1,
h2,
h3,
h4,
h5,
h6 .entry-header a {
color: #cca26a !important;
}
.comment-author-link {
color: #a5862a;
}
pre.wp-block-code {
background-color: #c4c4ad;
}
#comments p {
color: #cca26a !important;
}
form#commentform textarea#comment {
background: #d0cfcf;
}
Element {}
form#commentform input#author,
form#commentform input#email,
form#commentform input#url {
background: #6c6c6c;
}
@media (prefers-color-scheme: dark) {
body {
background: #23282d;
color: #eee;
}
#page,
content {
background: #23282d;
color: #eee;
}
#reply-title,
.comment-form-comment,
.comment-notes,
.entry-header a,
.entry-title,
.textwidget,
.widget-title {
color: #cca26a !important;
}
.comment-author-link {
color: #a5862a;
}
pre.wp-block-code {
background-color: #a4a46e;
}
#comments p {
color: #cca26a !important;
}
form#commentform textarea#comment {
background: #d0cfcf;
}
Element {}
form#commentform input#author,
form#commentform input#email,
form#commentform input#url {
background: #6c6c6c;
}
.scrim,
wp-lightbox-overlay {
background-color: black !important;
}
.attachment-full.size-full.wp-post-image,
.wp-block-image img {
filter: brightness(70%)
}