sakura

Previous script.

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) {
    }
})();

... 🐈 ...

Included this into my Script. Thx.

... 🐈 ...

// ==UserScript==
// @name         [DPE] CSS Overrides
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://en.delphipraxis.net/*
// @exclude      *?do=edit
// @exclude      */discover/
// @grant        none
// ==/UserScript==

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

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

        // fluid list
        $('HEADER .logo').attr('style', 'height: auto;');
        $('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;');
        $('LI.ipsDataItem').attr('style', 'padding: 2px 0');
        $('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;');
        $('DIV.ipsDataItem_main').attr('style', 'padding: 0;');
        $('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;');

        $('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() {
            const href = $(this).attr('href');
            if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment');
        });

        // thread view
        const ipsPageHeader = $('DIV.ipsPageHeader');
        ipsPageHeader.attr('style', 'padding: 5px;');
        const topicControls = ipsPageHeader.next();
        const topicControlsLinks = topicControls.find('A');
        for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) {
            const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>');
            link.style = 'padding: 5px; line-height: 1.5em;';
            div.append(link);
            ipsPageHeader.prepend(div);
        }
        topicControls.remove();

        $('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;');
        $('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;');

        // Code
        $('PRE.ipsCode').attr('style', 'padding: 5px !important; font-size: small;');

        // Survey
        $(':root').attr('style', '--grid-gap: 0px;');
        $('span.ipsFaded').attr('style', 'margin-left: 5px;');

        stylesheet.insertRule('.ipsDataList.ipsDataList_zebra > .ipsDataItem { height: 45px; }');

        // scroll to start of content
        if (window.location.href.indexOf('?do') < 0) $('html,body').animate({scrollTop: $('#elContent').offset().top},'slow');

    }
    catch(e) {
    }
})();

... 🐈 ...

Added a small tidbit too: 

    // scroll to start of content
    if (window.location.href.indexOf('?do') < 0) $('html,body').animate({scrollTop: $('#elContent').offset().top},'slow');

See for a quick solution. 

 ... 🐈 ...

For those of you, using TamperMonkey in Chrome, I have created a small script, which, for now, will compact the design just a bit. Feel free to enhance/comment.

 

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

(function() {
    'use strict';

    // fluid list
    const $ = jQuery;

    $('HEADER .logo').attr('style', 'height: auto;');
    $('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;');
    $('LI.ipsDataItem').attr('style', 'padding: 2px 0');
    $('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;');
    $('DIV.ipsDataItem_main').attr('style', 'padding: 0;');
    $('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;');

    $('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() {
        const href = $(this).attr('href');
        if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment');
    });

    // thread view
    const ipsPageHeader = $('DIV.ipsPageHeader');
    ipsPageHeader.attr('style', 'padding: 5px;');
    const topicControls = ipsPageHeader.next();
    const topicControlsLinks = topicControls.find('A');
    for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) {
        const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>');
        link.style = 'padding: 5px; line-height: 1.5em;';
        div.append(link);
        ipsPageHeader.prepend(div);
    }
    topicControls.remove();

    $('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;');
    $('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;');

})();

... 🐈 ...

15 minutes ago, Luckie said:

Please do not mix topics.

Just asking who has mixed any topic. Can't find any off-topic here...

... 🐈 ...

Activity Streams elements - as the design itself in many places - are just to big for  fitting many on a page. And I have f***ing big screen running. 😄

... 🐈 ...

Hi,

at least when running the fluid design, a click on the topic title brings me to the top of the page. I'd like to see DP to scroll to the newest entry automatically, as in the German community.

... 🐈 ...

15 minutes ago, Luckie said:

Just use the ones of the old DP and modify them slightly.

Yeah, make'm green. 

... 🐈 ...

Works, however, I did like having both options behind different URIs, allowing to directly see it the way I want. But I can live with it.

... 🐈 ...

Missing, at least in Chrome on Windows, a fav icon 😉

... 🐈 ...

Thanks Daniel and everyone else working hard on it. Looking forward to see this design coming to the German community too.

... 🐈 ...

Thanks 🙂 

... 🐈 ...

Hi folks,

awesone! I love the new design, besides a few perks - like most things take tooo much space, it could be more compact.

However, I am missing the PORTAL from the German community, which is simply the best part of getting started. Hope it will be here soon too.

...🐈...