Anzeige

Am Puls von Microsoft

Anzeige

Dark Theme für DrWindows.de

Revoltec

kennt sich schon aus
Servus,

ich bin täglich auf drWindows.de unterwegs und lese fleißig eure Artikel. Was mich persönlich etwas stört ist das helle Website Design, deshalb wollte ich fragen, ob ihr ein Dark Theme in Planung habt?
Bevor ihr das vorschlagt; die App ist für mich keine Option, da das Lesen im Browser für mich unkomplizierter ist.

Gruß,
Revo
 
Anzeige
Deine Frage kann ich dir leider nicht beantworten, aber ich habe per Stylus Dr.Windows angepasst. Wenn es dich interessiert, hier der Code:
Code:
/* Allgemeines Layout */
.p-body {background: #BBBABA;}
.block-container {
    color: #141414;
    background: #d3d3d3;
    border-width: 1px;
    border-style: solid;
    border-top-color: gray;
    border-right-color: gray;
    border-bottom-color: gray;
    border-left-color: gray;      
    border-radius: 4px; }

.block--messages .message-inner:last-of-type .message-cell:last-child {
    border-bottom-right-radius: 3px;
    color: #141414;
    background: #d3d3d3; }

.message-cell.message-cell--user, .message-cell.message-cell--action {
    position: relative;
    background: #d3d3d3;
    border-right: 1px solid #090909;
    min-width: 0; }

.link.link--external {color:#1874CD; font-weight: normal;}
.link.link--internal {color:#1874CD; font-weight: normal;}

.block-header {
    padding: 6px 10px;
    margin: 0;
    font-weight: 400;
    text-decoration: none;
    font-size: 20px;
    color: #ffffff;
    background: gray; }

.p-header {color: #bcdef5; background:#BBBABA; }
.p-nav {color: #fdfbfc; background: gray; }
.p-sectionLinks {
    font-size: 13px;
    color: #82d64b;
    background: gray;
    border-bottom: 1px solid #cbcbcb; }

.p-nav-list .p-navEl.is-selected .p-navEl-link {padding-right: 15px; background: cadetblue; }

.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 80%;
    max-height: 200px; }

/* Allgemeines Layout (2) */
.username.u-concealed {color:green !important;font-weight: bold;font-size: 19px;}
ul.p-breadcrumbs /* wenn deaktiviiert dann unten von 59px auf 40px setzen */ {
    position: sticky !important;
    top: 40px !important;
    z-index: 205 !important;
    margin-bottom: 0 !important;
    background-color: #D8D8D8 !important; }
.p-body-header {
    position: sticky !important;
    top: 59px !important;
    z-index: 205 !important;
    padding-bottom: 1px !important;
    margin-bottom: 0 !important;
    background-color: #D8D8D8 !important;
    border-bottom: #111 1px solid !important; }
.p-description .listInline::before {
    content: "Themenstarter:";
    font-weight: 400;
    color: #808080;
    margin-left: 10px; }
body[data-template="forum_list"] .p-body-header {
    position: sticky !important;
    top: 40px !important;
    z-index: 205 !important;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
    background-color: #D8D8D8 !important;
    border-bottom: #111 1px solid !important; }

.p-title-value {
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 400;
    min-width: 0;
    margin-right: auto;
    margin-left: 10px; }


/* Tooltipps (Vorschau) ausblenden */
.tooltip.tooltip--description
{display: none !important;}
.tooltip.tooltip--preview
{display: none !important;}
.tooltip--member {display: none !important;}


/* Farbe ungelesene Beiträge */
.node--unread
.node-icon i:before {color: brown}
.node--unread .node-title a {color: brown; font-weight: 600}
.is-unread .structItem-title a {color: brown; font-weight: 600}


/* Farbe Anhänge Toolbar */
.fancybox-button, .fancybox-button:visited, .fancybox-button:link {color: lightblue; font-size: 20px; }
.fancybox-button[disabled], .fancybox-button[disabled]:hover {color: lightblue; font-size: 20px; }


/* Farbe Zitat Box */
.fr-view blockquote {
    background: #F8ECE0;
    border: 1px solid #e7e7e7;
    border-left: 3px solid #f2930d;
    margin: .5em 0;
    padding: 6px 10px;
    fon.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 80%;
    max-height: 200px;
}t-size: 13px;
    display: flow-root; }


/* Farbe und Text in der Signatur */
.message-signature *{
font-style: normal!important;
font-family: Trebuchet MS !important;
color: cadetblue !important;
font-size: 14px !important;
font-weight: normal !important}


/* Farbe und Schriftgröße [Forum als gelesen markieren] */
.p-navEl-link {font: 19px Arial; }
.p-sectionLinks {color: #82d64b;border-color: grey }
.p-sectionLinks:hover a {color: #82d64b; }


/* Farbe neues Thema verfassen */
.button--cta.button.button {background-color: cadetblue; border: none}
.button.button--cta:not(.button--splitTrigger):hover, a.button.button--cta:not(.button--splitTrigger):hover{background-color: cadetblue;}


/* Farbe und Ausrichtung Forentitel */
.node-body a {color: black}
.structItem-title a {color: black}


/* Schriftfarbe Sidebar */
a {color: black;}
.block-minorHeader {color: #1b069e; }


/* Farbe User-Avatare ohne Bilder */
.avatar.avatar--default.avatar--default--dynamic, .avatar.avatar--default.avatar--default--text {
background-color: #4E4E4E !important; color: #fff !important; }


/* Größe und Farbe Unterforen-Titel */
.block-header {font-size: 17px; color: #ffffff; background: gray; }


/* Farbe für bearbeitetes Thema */
.message-lastEdit {
    margin-top: .5em;
    color: #f50606;
    font-size: 13px;
    text-align: left; }


/* Farbe gespeerte Threads */
.structItem-status--locked::before {
    color:red;
    font-size: 15px;
    font-weight: bold; }


/* Farbe [Lösung ansehen] */
a.threadSolutions-solutionJump {color:green; font-weight: bold !important;}

screenshot.1.jpeg
 
@Iskandar Vielen Dank für diesen großartigen Tipp!
Momentan bin ich das Tool etwas am testen und habe mir bereits eine Whitelist mit Seiten erstellt, welche dunkel eingefärbt werden sollen.
 
Mein primärer Browser ist SlimJet.
Der bringt schon von Hause aus eine Möglichkeit der Umschaltung von hell zu dunkel (invers) mit:
2021-03-09_20h22_02.png
 
Anzeige
Oben