Jump to content
KodeZwerg

Solved: Dark Theme for DP

Recommended Posts

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 :classic_cheerleader:

Edited by Markus Kinzler
Changed Subject on request of thread starter

Share this post


Link to post
.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.

Forums - Delphi-PRAXiS [en] – Opera - 28_10.jpg

Share this post


Link to post
.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 🙂

Share this post


Link to post

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 by sakura
  • Thanks 1

Share this post


Link to post

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

You've been ranked up 🙂 

Thankyou Thankyou Thankyou

Share this post


Link to post

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

 

... 🐈 ...

  • Haha 1

Share this post


Link to post

Couple smaller improvements in previous post.

 

... 🐈 ...

  • Thanks 1

Share this post


Link to post
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.

 

... 🐈 ...

Share this post


Link to post

@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.

  • Like 1

Share this post


Link to post

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.

  • Like 1

Share this post


Link to post

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

You see the germanized Version below.

Solved_ Dark Theme for DP - Community Management - Delphi-PRAXiS [en] – Opera - 28_10.jpg

Solved_ Dark Theme for DP - Community Management - Delphi-PRAXiS [en] – Opera - 28_10 002.jpg

  • Like 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×