dark theme Solved: Dark Theme for DP

[KodeZwerg 54]

Hello Community,

 

i've been playing around with some live CSS editors but i am too unexperienced with that subject.

 

Can someone create for Tampermonkey something that i can use please?

(or explain me basics where i could learn the "how-to" on my own)

 

I would like to have Font font bright and Background dark.

My own tries end up in a mess. I badly need help 

Edited October 28, 2018 by Markus Kinzler
Changed Subject on request of thread starter

[KodeZwerg 54]

.nav-bar {
    color: #000000;
    background-color: #000000;
}
#elSearch input {
    color: #F0F0F0;
    background-color: #adadad;
}
.cForumHeader {
    color: #000000;
    background-color: #000000;
}
.ipsDataItem {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsDataItem_responsivePhoto {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsDataList.ipsDataList_zebra {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsDataItem_responsivePhoto {
    color: #F0F0F0;
    background-color: #000000;
}
.cForumMiniList_multiRoot {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsSideMenu_item {
    color: #F0F0F0;
    background-color: #000000;
}

CSS Code to darken many things on Main Page.

Absolute Alpha Status, first tries to do such.

The preview image contains wonderful Tampermonkey script by sakura/Neutral General.

[KodeZwerg 54]

.ipsPhotoPanel_notPhone {
    color: #F0F0F0;
    background-color: #000000;
}
.cPost_contentWrap {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsColumn.cAuthorPane {
    color: #F0F0F0;
    background-color: #000000;
}
.prettyprinted {
    color: #F0F0F0;
    background-color: #cfcaca;
}
.ipsCode {
    color: #F0F0F0;
    background-color: #cfcaca;
}
pre.prettyprint {
    color: #F0F0F0;
    background-color: #cfcaca;
}
.nav-bar {
    color: #000000;
    background-color: #000000;
}
.ipsComposeArea_withPhoto {
    color: #F0F0F0;
    background-color: #000000;
}
html .cke_wysiwyg_div {
    color: #F0F0F0;
    background-color: #cfcaca;
}
.ipsComposeArea_editor {
    color: #F0F0F0;
    background-color: #000000;
}
#elSearch input {
    color: #F0F0F0;
    background-color: #adadad;
}
.cForumHeader {
    color: #000000;
    background-color: #000000;
}
.ipsDataItem {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsDataItem_responsivePhoto {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsDataList.ipsDataList_zebra {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsDataItem_responsivePhoto {
    color: #F0F0F0;
    background-color: #000000;
}
.cForumMiniList_multiRoot {
    color: #F0F0F0;
    background-color: #000000;
}
.ipsSideMenu_item {
    color: #F0F0F0;
    background-color: #000000;
}

Second Version includes some more Items, still very ugly, use at own risk 🙂

[sakura 45]

Here an easy script for a dark theme, which seems to work pretty well (TamperMonkey):

// ==UserScript==
// @name         [DPE] Dark Theme
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://en.delphipraxis.net/*
// @grant        none
// ==/UserScript==

(function() {
    try{
        'use strict';

        const $ = jQuery;
        const stylesheet = document.styleSheets[document.styleSheets.length - 1];

        stylesheet.insertRule('BODY, HEADER, .ipsButtonBar, .ipsComment_meta, .ipsType_sectionHead, .ipsButton, .ipsQuote_citation, IMG, VIDEO, PRE, NAV.ipsBreadcrumb, PRE IMG, .ipsEmoji, .ipsTag, .ipsTag_prefix, .ipsBadge, UL.ipsPagination_mini { filter: invert(100%); }');
        stylesheet.insertRule('HEADER IMG { filter: invert(0%);');
        stylesheet.insertRule('PRE { background-color: #AAA !important');
        stylesheet.insertRule('article::before { filter: invert(100%); height: 3em; content: " "; display: block; }');
    }
    catch(e) {
    }
})();

 

... 🐈 ...

Edited October 28, 2018 by sakura

[sakura 45]

Previous script.

[KodeZwerg 54]

Works thousand times better than my first steps into dealing with Css.

You've been ranked up 🙂 

Thankyou Thankyou Thankyou

[sakura 45]

You are welcome, have done so much f****ing CSS in the last months, this was a easy one 😉

 

... 🐈 ...

[sakura 45]

Couple smaller improvements in previous post.

 

... 🐈 ...

[KodeZwerg 54]

I LOVE YOU.... erm... IT 🙂

Editor now got sweet color aswell, you rock!

[sakura 45]

Just now, KodeZwerg said:

I LOVE YOU.... erm... IT 🙂

Editor now got sweet color aswell, you rock!

I copied the header from the other script and forget to remove exclusions, which shouldn't be needed in this one.

 

... 🐈 ...

[Attila Kovacs 629]

https://darkreader.org

 

Edited October 28, 2018 by Attila Kovacs

[KodeZwerg 54]

@Attila Kovacs it even works with my Opera Browser (with Chrome support addon installed). Thankyou very much for that global on all Sites working feature!!!

I had no idea that such exist and even works straight out-of-box. Fantastic!

All my Dark Theme needs are total happy solved with your hint, cool plugin.

[John Kouraklis 94]

Guys, how do you enable this theme?

[David Hoyle 68]

I don’t know if this helps anyone but I’m currently viewing this with Firefox on my iPad with Firefox in Dark theme mode and Nighttime mode enabled and it looks pretty good. I’ll look to see if the desktop version can do this tomorrow.

[KodeZwerg 54]

Install that plugin (Dark Reader) and press on its button.

You see the germanized Version below.