Darkmodus für das Forum

Anzeige

Ja, das ist schon richtig.
Aber es gibt noch genug User, die sich mit PC Technik sehr wenig auskennen.
Die können gerade mal den Rechner hochfahren und alles Allgemeine benutzen und da hört es dann schon auf.


Hier mal ein Screenshot vom Forum mit dem angepassten Style:

 

Die kommen dann aber auch nichts in ein Forum.

Das ist zum Teil kaum lesbar.

 

Ich kann hier alles gut erkennen.
Liegt natürlich auch daran, wie der Monitor eingestellt ist.
Wenn ich den Dunkler drehe, dann kann man in der Tat weniger erkennen.
Es ist schon schwer einen Dunklen style zu erstellen, der gut auf vielen Monitor Setups gut lesbar ist.
Der eine hat den sehr hell und der andere ziemlich dunkel eingestellt.
Dann spielt noch der eingestellte Farbraum sowie die Farbtemperatur eine Rolle.
Es sind einfach zu viele Faktoren, die da reinspielen, um die Lesbarkeit allen gerecht zu werden.
Darum hat man sich wohl hier dazu entschieden den Kontrast Style Weiß und schwarz zu nutzen, da der überall lesbar ist.
Für meine Zwecke reicht mir der Dunkle Style.
Wer den Code haben will, zum Testen, kann ich den gerne Schicken.
So mal, wenn man den code hat ihn auch selber Passend auf seinen Monitorsetup anpassen kann.

 

Eben Du hast Deinen wohl sehr hell eingestellt weswegen Du mit den normalen Hellen Styl Deine Probleme hast. Ich habe meinen auf nidrigster Stufe (geht leider nicht noch dunkler).
Daher brauche ich auch keinen Darkmodus.

 

So hell ist der auch nicht eingestellt.
Ich nutze eine Warmweiße Einstellung sodass, das Weiß nicht ins Blaue geht, was dann richtig blendet.
Selbst die unterschiedlichen Texte in Grautöne kann ich hier noch ohne Anstrengung lesen.


Hier noch ein Bild vom Forum:


Ich hab es so eingestellt das die volle Bildschirmbreite genutzt wird und die nutzlose rechte Seite weg ist.

 

Weil der Monitor halt sehr hell eingestellt ist, sonst würde er ja bei Kaltweiß nicht blenden.
Das der Kontrast bei dem dunklen Hintergrund zur Farbe erheblich geringer ist liegt aber auf der Hand.
Auch ist eine helle Schrift auf dunklem Hintergrund immer schlechter lesbar wie umgekehrt.

Aber egal wenn es Dir so gefällt, dann ist ja alles gut.

 

Wann kommt denn jetzt endlich der Darkmode?

 

Spoiler: CSS Code Darkmode

Code:

@-moz-document url-prefix("https://forum.digitalfernsehen.de/")
    /* Quelltext hier eingeben... */
    {}

/*Volldarstellung auf volle Breite*/
.pageWidth {
    padding-right: 5px;
    padding-left: 5px;
    margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    box-sizing: border-box;
    min-width: 320px;
    max-width: 1800px;
}
.messageText {

    line-height: 1.2!important;
}
#superbanner,
#bodywrapper {
    width: 100% !important;
    background-color: rgb(35, 35, 36)!important;
    color: rgb(0, 0, 0)!important;
}

/* Farbe und aussehen des Forums */
#headerMover #header {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgb(0, 0, 0)!important;
}

/* Auswahltasten oben */
.navTabs {
    font-size: 11px;
    background-color: rgb(50, 50, 50);
    padding: 0 25px;
    border: 1px solid rgb(50, 50, 50);
    background: linear-gradient(rgb(50, 50, 50), rgb(157, 157, 157), rgb(50, 50, 50));
    height: 25px;
}

.navLink {
    background-color: #d5ddee00 !important;
}

.navTabs .navTab.selected .navLink {
    background-color: rgb(157, 157, 157) !important;
}

.navTabs .navTab.selected .navLink {
    position: relative;
    font-weight: bold;
    color: rgb(0, 0, 0);
    background-color: rgb(150, 150, 150);
    margin-top: -0.5px;
    border-bottom: 0.5px solid rgba(50, 50, 50, 0);
    text-shadow: 0px 0px 3px rgb(250, 247, 247);
    box-shadow: inset 0 1px 0 0 #000;
}


.navTabs .navTab.selected .tabLinks {
    background-color: rgb(50, 50, 50);
    width: 100%;
    padding: 0;
    border: none;
    overflow: hidden;
    zoom: 1;
    position: absolute;
    left: 0px;
    top: 27px;
    height: 25px;
    background-position: 0px -25px;
}

.breadcrumb {
    font-size: 11px;
    background: rgb(50, 50, 50) url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    overflow: hidden;
    zoom: 1;
    max-width: 100%;
    height: 24px;
}

a:link,
a:visited {
    color: rgba(0, 0, 0, .48);
    text-decoration: underline
}
.breadcrumb .crust a.crumb {
    cursor: pointer;
    text-decoration: none;
    background-color: rgb(157, 157, 157);
    padding: 0 10px 0 18px;
    margin-bottom: -1px;
    border-bottom: 1px solid rgb(255, 0, 0);
    outline: 0 none;
    display: block;
    line-height: 24px;
}

.breadcrumb .crust .arrow {
    border: 12px solid transparent;
    border-right: 1px none black;
    border-left-color: rgb(50, 50, 50);
    -moz-border-right-colors: rgb(121, 119, 119);
    display: block;
    position: absolute;
    right: -12px;
    top: 0px;
    z-index: 50;
    width: 0px;
    height: 0px;
}


/* Hintergrundcolor */
#logo {
    background-color: rgb(57, 57, 57) !important;
    border-left: 1px solid #666 !important;
    border-right: 1px solid #666 !important;
    border-top: 1px solid #666 !important;
    width: calc(100% - 2px) !important;
}


#content .pageContent {
    background-color: rgb(70, 70, 70);
    padding: 10px 20px;
}

.secondaryContent {
    background: rgb(57, 57, 57) url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 10px;
    border-bottom: 1px solid rgb(255, 0, 0);
}

.secondaryContent a {
    color: rgb(0, 0, 0);
}
.sidebar .section .primaryContent h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3 {
    font-size: 12pt;
    color: rgb(245, 245, 245);
    padding-bottom: 2px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(255, 0, 0);
}

.footer .pageContent {
    font-size: 11px;
    color: rgb(60, 60, 60);
    background-color: rgb(50, 50, 50);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    zoom: 1;
}

.sectionMain {
    background-color: rgb(157, 157, 157);
    padding: 10px;
    margin: 10px auto;
    border: 1px solid rgb(255, 0, 0);
    border-radius: 10px;
}

.nodeList .categoryStrip {
    font-size: 11px;
    color: rgb(86, 86, 86);
    background: rgb(50, 50, 50) url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x top;
    padding: 5px 10px;
    margin: 3px auto 0;
    border-top: 1px solid #f00;
    border-bottom: 1px solid #f00;
    padding: 5px 10px;
    margin: 0;
    border-bottom-color: #f00;
    border-radius: 5px;
    min-height: 6px;
}

.breadcrumb .crust .arrow span {
    border: 12px solid rgba(0, 0, 0, 0);
    border-right: 1px none black;
    border-left-color: rgb(157, 157, 157);
    -moz-border-right-colors: rgb(144, 144, 144);
    display: block;
    position: absolute;
    left: -13px;
    top: -12px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
}
.breadcrumb {
    font-size: 11px;
    background: rgb(50, 50, 50) url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
    border: 1px solid rgb(255, 0, 0);
    border-radius: 5px;
    overflow: hidden;
    zoom: 5;
    max-width: 100%;
    height: 24px;
}
.breadcrumb .crust a.crumb {
    cursor: pointer;
    line-height: 23px;
}
.bbCodeQuote {
    border-color: #f00;
    overflow: auto;
}

.bbCodeQuote .attribution {
    color: #141414;
    background: rgb(50, 48, 48) url(styles/default/xenforo/gradients/form-button-white-25px.png) repeat-x top;
    border-bottom: 1px solid #f00;
}

.bbCodeQuote .quoteContainer {
    overflow: hidden;
    position: relative;
    font-style: italic;
    font-size: 9pt;
    background: rgb(117, 117, 117) url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x top;
    padding: 10px;
    border-radius: 4px;
}
.bbCodeBlock .type {
    font-size: 11px;
    font-family: trebuchet ms, Helvetica, Arial, sans-serif;
    color: #000;
    background: rgb(50, 50, 50) url(styles/default/xenforo/gradients/form-button-white-25px.png) repeat-x top;
    padding: 3px 8px;
    border-bottom: 1px solid #ff0404;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.bbCodeBlock {
    margin: 1em 140px 1em 0;
    border: 1px solid #ff0404;
    border-radius: 5px;
    overflow: auto;
}
.bbCodeBlock pre,
.bbCodeBlock .code {
    font-size: 10pt;
    font-family: Consolas, courier new, Courier, monospace;
    background: #bdb8b8 url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x top;
    padding: 10px;
    border-radius: 5px;
    word-wrap: normal;
    overflow: auto;
    line-height: 1.24;
    min-height: 30px;
    max-height: 500px;
    _width: 600px;
    direction: ltr;
}
a.callToAction span {
    font-weight: bold;
    font-size: 11px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #fff;
    background: rgb(0, 0, 0) url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x center -8px;
    padding: 0 15px;
    border-radius: 3px;
    display: block;
}

.node .nodeLastPost {
    background: rgb(50, 50, 50) url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x top;
    padding: 10px;
    border-bottom: 1px solid #f00;
    font-size: 11px;
    padding: 3px 10px;
    margin: 10px;
    border: 1px solid #000;
    border-radius: 3px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 14px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 210px;
    height: 28px;
}

.nodeList .forumNodeInfo,
.nodeList .linkNodeInfo,
.discussionListItem,
.searchResultsList .searchResult {
    background-color: rgb(157, 157, 157) !important;
}

.pairs dt,
.pairsInline dt,
.pairsRows dt,
.pairsColumns dt,
.pairsJustified dt {
    color: rgb(32, 32, 32);
}
.message .likesSummary {
    padding: 5px;
    margin-top: 10px;
    border: 1px solid #fb0202;
    border-radius: 5px;
}
.message .messageInfo {
    background-color: rgb(157, 157, 157);
    padding: 10px;
    margin-left: 140px;
    border: 1px solid #cecece;
    border-radius: 5px;
    zoom: 1;
}

.messageList .message {
    position: relative !important;
    box-shadow: inset 0 24px 0 0 rgb(50, 50, 50) !important;
    padding-top: 30px !important;
    padding-bottom: 10px !important;
}

.PageNav a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    background-color: rgb(100, 100, 100);
    border: 1px solid rgb(255, 0, 0);
    border-radius: 3px;
    text-align: center;
    width: 19px;
}

#QuickReply {
    background-color: #282828;
    padding: 10px;
    margin-left: 140px;
    border: 1px solid #716262;
    border-radius: 5px;
}

.redactor_toolbar {
    font-size: 0;
    background: rgb(157, 157, 157) url(styles/default/xenforo/gradients/form-button-white-25px.png) repeat-x top;
    padding: 0 0 0 2px;
    margin: 0;
    border-bottom: 1px solid #000;
    position: relative;
    left: 0;
    top: 0;
    line-height: 0;
    list-style: none;
    overflow: hidden;
}

.redactor_toolbar li.redactor_btn_group ul {
    background: rgb(80, 80, 80) url(styles/default/xenforo/gradients/form-button-white-25px.png) repeat-x top;
    padding: 1px;
    margin: 0;
    border: 1px solid #000;
    border-radius: 3px;
    overflow: hidden;
    *zoom: 1;
    box-shadow: 1px 1px 1px rgb(57, 57, 57);
}

.discussionListItem .stats dl {
    padding: 0 10px;
    border-left: 1px solid #f00;
    border-right: 1px solid #f00;
}

.discussionListItem .posterAvatar,
.discussionListItem .stats {
    background: rgb(70, 70, 70) url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x top;
}

.discussionList .sectionHeaders {
    font-size: 11px;
    color: #2f2f2f;
    background: rgb(190, 190, 190) url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x top;
    margin: 3px auto 0;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid rgb(157, 157, 157);
}

body .itemPageNav a {
    color: #606060;
    background: rgb(158, 158, 158) url(styles/default/xenforo/gradients/category-23px-light.png) repeat-x;
    margin: -1px 0;
    border: 1px solid rgb(115, 115, 115);
}
body .faint,
body a.faint,
body .faint a {
    color: rgb(0, 0, 0);
}
.textCtrl {
    font-size: 13px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #000;
    background: rgb(100, 100, 100) url('styles/default/xenforo/clear.png');
    padding: 3px;
    margin-bottom: 2px;
    border-width: 1px;
    border-style: solid;
    border-top-color: rgb(81, 81, 81);
    border-right-color: rgb(81, 81, 81);
    border-bottom-color: rgb(81, 81, 81);
    border-left-color: rgb(81, 81, 81);
    border-radius: 4px;
    outline: 0;
}
.formPopup {
    width: 250px;
    background-color: rgba(50, 50, 50, .14);
}
#QuickSearch {
    display: block;
    position: absolute;
    right: 20px;
    top: -18px;
    margin: 0;
    background-color: rgb(50, 50, 50);
    border-radius: 5px;
    padding-top: 5px;
    _padding-top: 3px;
    z-index: 7500;
}

#DiscussionListOptionsHandle a {
    font-size: 11px;
    color: #000;
    background-color: rgb(86, 86, 86);
    padding: 0 20px;
    margin: 0 auto;
    border: 1px solid #f00;
    border-top: 1px #000;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: inline-block;
    outline: 0;
    position: relative;
    right: -50%;
}
.sectionFooter {

    font-size: 11px;
    color: rgb(0, 0, 0);
    background: rgb(170, 168, 168) url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 4px 10px;
    border-bottom: 1px solid rgb(255, 0, 0);
    line-height: 16px;
}

/* Memberlist */
.primaryContent {
    background-color: rgb(175, 175, 175);
    padding: 10px;
    border-bottom: 1px solid rgb(255, 0, 0);
}
.tabs {
    font-size: 11px;
    background: rgb(74, 74, 74) url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
    padding: 0 10px;
    border-bottom: 1px solid rgb(255, 0, 0);
    word-wrap: normal;
    min-height: 23px;
    _height: 23px;
    display: table;
    width: 100%;
    *width: auto;
    box-sizing: border-box;
}
.tabs li a,
.tabs.noLinks li {
    color: rgb(20, 20, 20);
    text-decoration: none;
    background: rgb(26, 25, 25) url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
    padding: 0 8px;
    margin-right: -1px;
    margin-bottom: -1px;
    border: 1px solid rgb(255, 0, 0);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: inline-block;
    line-height: 22px;
    cursor: pointer;
    outline: 0 none;
    white-space: nowrap;
    word-wrap: normal;
    height: 22px;
}
.tabs li.active a,
.tabs.noLinks li.active {
    background-color: rgb(174, 174, 174);
    padding-bottom: 1px;
    border-bottom: 1px none #f00;
}

/* Profilpage - Konto */
.profilePage .tabs.mainTabs {
    padding: 0 20px;
    margin-top: -23px;
    min-height: 23px;
    height: auto;
    position: relative;
    background: rgb(157, 157, 157);
}

.profilePage .tabs.mainTabs li.active a {
    background-color: rgb(157, 157, 157);
}

.redactor_box {
    font-size: 0;
    border: 1px solid #f00;
    line-height: 0;
    position: relative;
    overflow: hidden;
}
.button.primary {
    background-color: rgb(175, 175, 175);
}
.heading,
.xenForm .formHeader {
    font-weight: bold;
    font-size: 11pt;
    color: rgb(245, 245, 245);
    background-color: rgb(50, 50, 50);
    padding: 5px 10px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgb(157, 157, 157);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.button {
    font-style: normal;
    font-size: 12px;
    font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);
    background: rgb(156, 156, 159) url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
    padding: 0px 6px;
    border: 1px solid rgb(255, 0, 0);
    border-top-color: rgb(255, 0, 0);
    border-bottom-color: rgb(255, 0, 0);
    border-radius: 7px;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgb(200, 200, 210);
    outline: none;
    line-height: 21px;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    height: 23px;
}

Vom Forenadmin höchstwahrscheinlich leider nie.
Den Darkmode muss man sich selbst erstellen und mit dem FF Plugin Stylus aktivieren.
Da dieses Forum auf XenForo basiert, kann man sich den Stylescode (CSS Basiert) dort herunterladen und anpassen.
Ich hab hier in diesen Thread einen Code veröffentlicht, den kann jeder frei verwenden und auf seine Bedürfnisse anpassen.

 

@yoshi2001: Die URL-Autoverlinkung hat deine erste Zeile unbrauchbar gemacht. Es müsste

Code:

@-moz-document url-prefix("https://forum.digitalfernsehen.de/")

heißen.

 

Ok so genau kenne ich mich mit den Feinheiten vom CSS code noch nicht aus.
Ich hab den Style auch nur 1:1 übernommen und einiges angepasst.

Das Forum macht daraus einen Anklickbaren link.

Ich hab es im vorherigen Beitrag noch mal geändert und das Ganze in einen Codetag mit Spoiler gesetzt.
Jetzt wird das Ganze nicht mehr von der Forensoftware beeinflusst.