Da nox noch am offiziellen Dark Mode für das neue Design arbeitet, hab ich mich in Anbetracht meiner schmerzenden Augen mal daran gemacht, einen kleinen vorübergehenden Dark Mode zu basteln.
Um ihn auch zu nutzen, folgt einfach folgenden Schritten:
- Installiere das Plugin Stylus für deinen Browser:
- Klicke auf das Stylus-Icon, das in der Menüleiste deines Browsers auftauchen sollte und wähle "Write style for" wie hier zu sehen:
- Im sich nun öffnenden Fenster klickst du jetzt auf "Import" auf der linken Seite:
- Es öffnet sich ein Pop-Up, in welches du den Code von unten im Beitrag hinein kopierst und mit "Overwrite Style" bestätigst:
- Fertig! Enjoy Dark-Mode im neuen Design
CSS
/* Allgemein */
body {
color: #ededed;
}
.main > div {
background-color: #141d27;
}
a,
.boxesSidebarLeft .tagList li a,
.boxesSidebarRight .tagList li a {
color: #ddd;
}
a:hover,
.boxesSidebarLeft .tagList li a,
.boxesSidebarRight .tagList li a:hover {
color: #fff;
}
a.externalURL::after {
content: "\f08e";
}
/* Font Awesome */
.icon,
.fa {
color: #bbb;
}
/* Dashboard */
.contentHeader,
.boxHeadline {
color: #da4b00;
}
.section .sectionTitle {
color: #ededed;
}
.containerList > li:hover {
background-color: #283546;
}
/* Footer */
#add_footer.layoutBoundary {
background-color: #283546;
}
/* Sidebar */
.boxesSidebarLeft .box:not(.boxBorderless),
.boxesSidebarRight .box:not(.boxBorderless) {
background-color: #283546;
color: #efefef;
}
.boxesSidebarLeft a,
.boxesSidebarRight a {
color: #eee;
}
.addInbox {
color: #ededed;
}
/* Foren/Themenübersicht */
.contentHeader .contentHeaderDescription {
color: #ddd;
}
.datetime {
color: #ccc;
}
.tabularListRow:not(.tabularListRowHead) {
background-color: #141d27;
}
.wbbBoardList .wbbBoard:hover,
.tabularListRow:not(.tabularListRowHead):hover {
background-color: #283546;
}
.wbbBoardList .wbbBoardDescription {
color: rgb(146, 159, 172);
}
/* Thread */
.messageSidebar,
.dialogContainer > .dialogContent {
background-color: #283546;
}
.messageSidebar::after {
border-top: 20px solid #262f3c;
}
.messageSidebar dl.dataList > dt,
.messageSidebar dl.dataList > dt a,
.messageSidebar dl.dataList > dd,
.messageSidebar dl.dataList > dd a,
.messageSidebar a {
color: #ddd;
}
.messageSidebar dl.dataList > dt:hover a,
.messageSidebar dl.dataList > dd:hover a,
.messageSidebar a:hover {
color: #fff;
}
.dialogContainer > .dialogContent .dialogFormSubmit {
background-color: #262f3c;
}
.messageGroupStarter .messageSidebar .plain.dataList::before {
color: #ededed;
background-color: #283546;
}
.messageSidebar + .messageContent {
background-color: #283546;
}
.embeddedAttachmentLink,
.embeddedImageLink {
background-color: #262f3c;
}
.redactor-layer,
.shoutbox .redactor-layer {
background-color: #293547;
color: #ededed;
}
.redactor-layer pre {
background-color: #262f3c !important;
color: #ddd !important;
}
.redactor-layer pre:not(.redactorCalcHeight)::before,
.redactor-layer pre.woltlabHtml::before {
color: #eee;
}
.messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active {
background-color: #262f3c;
}
dl:not(.plain) > dd > small:not(.innerError):not(.innerInfo):not(.innerSuccess):not(.innerWarning) {
color: #ededed;
}
.quoteBox,
.redactor-layer woltlab-quote {
background-color: #262f3c;
}
woltlab-quote:not(.redactorCalcHeight)::before,
.redactor-layer woltlab-spoiler:not(.redactorCalcHeight)::before,
.quoteBoxIcon > .quoteBoxQuoteSymbol::before {
color: #ccc;
}
.redactor-layer woltlab-spoiler {
background-color: #141d27;
}
.message .quoteBox > .toggleButton,
.message .quoteBox.collapsed > .toggleButton,
.message.messageSidebarOrientationLeft .quoteBox > .toggleButton,
.message.messageSidebarOrientationLeft .quoteBox.collapsed > .toggleButton,
.codeBox > .toggleButton,
.codeBox.collapsed > .toggleButton {
background-color: #141d27;
box-shadow: 0px 1px 0px rgb(34, 50, 68) inset;
border-top: 10px solid #141d27
}
.codeBox > div {
box-shadow: 4.1em 0px 0px #141d27 inset, 4.2em 0px 0px #262f3c inset;
background-color: #262f3c;
}
.codeBox > div > .codeBoxCode > code .codeBoxLine > a::before {
color: #ccc;
}
.message {
background-color: #293547;
padding: 20px;
}
.messageTitle {
color: #ddd;
}
.message.messageReduced {
background-color: #283546;
}
.messageReduced .messageHeader {
color: #ddd;
}
.wbbThreadPostList.messageList .modificationLogEntry .message.messageReduced .messageTitle a {
color: #ddd !important;
}
.boxesSidebarLeft small a,
.boxesSidebarRight small a,
.boxesSidebarLeft .dimmed a,
.boxesSidebarRight .dimmed a {
color: #ddd;
}
.boxesSidebarLeft a:hover,
.boxesSidebarRight a:hover {
color: #da4b00;
}
.messageBody > .messageText table tr > td {
background-color: #262f3c !important;
}
.messageBody > .messageText table tr:hover > td {
background-color: #141d27 !important;
}
.boxesFooterBoxes .layoutBoundary::before {
content: "";
display: block;
margin-left: -20px;
border-top: 50px solid rgba(218, 75, 0, 1);
border-left: 0px solid transparent;
border-right: 3000px solid transparent;
height: 0;
}
.messageFooterNote a {
color: #aaa;
}
.gist .blob-code-inner {
overflow: visible;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
font-size: 12px;
color: #ddd;
word-wrap: normal;
white-space: pre;
}
.gist .blob-num::before {
content: attr(data-line-number);
color: #ddd;
}
.gist .gist-meta {
padding: 10px;
overflow: hidden;
font: 12px -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
color: #ddd;
background-color: #262f3c;
border-radius: 0 0 3px 3px;
}
.gist .gist-meta a {
font-weight: 600;
color: #da4b00;
text-decoration: none;
border: 0;
}
.gist .gist-data {
overflow: auto;
word-wrap: normal;
color: #ddd;
background-color: #262f3c;
border-bottom: 1px solid #ddd;
border-radius: 3px 3px 0 0;
}
.gist .markdown-body .highlight pre,
.gist .markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #141d27;
border-radius: 3px;
color: #ddd;
}
.gist .pl-s .pl-s1,
.gist .pl-smi {
color: #ddd;
}
.quoteBoxTitle {
color: #ccc;
}
.inputItemList,
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: #262f3c;
border: 1px solid #141d27;
color: #ddd;
}
.inputItemList:focus,
.inputItemList:hover,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="url"]:hover {
background-color: #293547;
border: 1px solid #141d27;
color: #ddd;
}
/* Artikel */
.articleList > li {
background-color: #293547;
}
.articleList > li:hover {
background-color: #262f3c;
}
h3.articleListTitle {
color: #ededed !important;
}
.section.articleTeaserContainer,
.section .articleImage,
.section.articleContent {
background-color: #141d27 !important;
}
.embeddedAttachmentLink:hover,
.embeddedImageLink:hover {
background-color: #293547;
}
.articleNavigation .previousArticleButton > a,
.articleNavigation .nextArticleButton > a {
color: #ededed;
}
.articleNavigation .previousArticleButton > a .articleNavigationArticleTitle,
.articleNavigation .nextArticleButton > a .articleNavigationArticleTitle {
color: #ccc !important;
}
/* Downloads */
.filebaseFileList .filebaseFileCard {
background-color: #262f3c;
}
.filebaseFileList .filebaseFileFooter {
background-color: #293547;
}
/* Moderationsbereich */
.message.messageReduced {
background-color: #262f3c;
}
.messageHeaderBox > .messageTitle a {
color: #ddd !important;
}
/* Shoutbox */
.shoutbox.modernDesign .shoutboxEntry .shoutboxMessage {
background-color: #293547;
color: #ededed;
}
.shoutbox.modernDesign .shoutboxEntry.isOwner .shoutboxMessage .externalURL,
.shoutboxEntry.isOwner a {
color: #293547;
}
.shoutbox.modernDesign .shoutboxContentFooter .icon {
color: #ddd;
}
Alles anzeigen
Hinweis: Sollte jemand noch Stellen finden, die ich übersehen habe und deshalb noch im Light-Mode sind, bitte einmal hier im Beitrag melden. Am besten mit Link
Sofern ich das CSS update, geb ich hier Bescheid
Zum updaten, einfach bei Schritt 2 beginnen, nur auf das Stift-Symbol neben dem bereits aktivierten Style anklicken, die restlichen Schritte sind identisch
Viel Spaß!