Dark Mode for Elitepvpers

[speed.wtf]

appreciate it

[Meowmere]

Ty really cool design

[FlexiArts]

Vbulletin never renews itself like a grandfather. While other forum infrastructures support many themes, Vbulettin is still from the 2nd world war.

[paradise2k23]

thanks for this eyes are much better now

[BulletHoles444]

My eyes have been saved thank you

[OldMetin2]

it would be more nice if the administration will bring a black theme tho

[domo]

Very nice, this should be implemented

[Singleplayer™]

installed tempermonkey addon -> copy pasted the source -> every line error - doesnt works.

so this release seems to be only for web devs

[Tøken]

Would be very easy on the eyes.

[bzsstre]

Originally Posted by forfeitsol

Hello, my eyes was hurting from ePvp's light theme. Normally I'm using an extension called Dark Reader but it messing up ePvp so I decided to make my own. I just learn javascript so pretty sure you can loop every item by their color, but it's still a thing tho. I know, the style is the worst, everything is black, I can improve the design if you guys want.

Download any kind of userscript manager from your favorite browser extension market.

    var div = document.querySelectorAll("div");
    for (i = 0; i < div.length; i++) {
        div[i].style.backgroundColor = "black";
        div[i].style.color = "#fff";
    }

    var table = document.querySelectorAll("table");
    for (i = 0; i < table.length; i++) {
        table[i].style.backgroundColor = "black";
        table[i].style.color = "#fff";
    }

    var a = document.querySelectorAll("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].getAttribute('style') != 'color:BlueViolet;')
            a[i].setAttribute('style', 'color:White;');
    }

    var td = document.querySelectorAll("td");
    for (i = 0; i < td.length; i++) {
        td[i].setAttribute('style', 'background: black');
        td[i].style.color = "#fff";
    }

    alt2 = document.getElementsByClassName("alt2");
    for (i = 0; i < alt2.length; i++) {
        alt2[i].setAttribute('style', 'background: black;');
        alt2[i].style.color = "#fff";
    }

    strong = document.querySelectorAll("strong");
    for (i = 0; i < strong.length; i++) {
        strong[i].setAttribute('onmousehover', 'this.style.opacity = "70%";');
    }

    panel = document.getElementsByClassName("panel");
    for (i = 0; i < panel.length; i++) {
        panel[i].setAttribute('style', 'background: black !important');
    }

    li2 = document.querySelectorAll("li");
    for (i = 0; i < li2.length; i++) {
        li2[i].setAttribute('style', 'background: black !important; border: 1px solid #252525 !important;');
    }

    img = document.querySelectorAll("img");
    for (i = 0; i < img.length; i++) {
        if (img[i].classList.contains('fancybox-expandable') || img[i].classList.contains('fancybox-disabled'))
			if ((img[i].getAttribute('src')).substr(-1) != "?")
				img[i].setAttribute('style', 'filter: invert(1)');
    }
    
    pln = document.getElementsByClassName("pln");
    for (i = 0; i < pln.length; i++) {
        pln[i].setAttribute('style', 'color: wheat !important');
    }

const credit = document.createElement("li");
credit.innerHTML = "Dark Mode v1.02, by <a href='https://www.elitepvpers.com/forum/members/8325310-forfeitsol.html'>forfeitsol</a> ";

document.getElementById("userbaritems").appendChild(credit);

Preview:


Update Notes:

 Spoiler

v1.01:Color for bumped threads seperated from normal ones.
________
v1.02:Added support for images. If the image url has "?" end of it, the image colors won't inverted. For example;

Inverted for dark mode:

[IMG=expandable: 1]http://i.epvpimg.com/fRhvfab.png[/IMG]

Compatible for dark mode:

[IMG=expandable: 1]http://i.epvpimg.com/fRhvfab.png?[/IMG]

Nice work

[Zagith]

A good alternative to the default epvp theme. Thank you!

Originally Posted by Singleplayer™

installed tempermonkey addon -> copy pasted the source -> every line error - doesnt works.

so this release seems to be only for web devs

With some basic edits it works, this is the code that works with tempermonkey addon:

// ==UserScript==
//  [MENTION=286917]name[/MENTION]         New Userscript
//  [MENTION=1005418]namespace[/MENTION]    [url]http://tampermonkey.net/[/url]
//  [MENTION=1805674]Version[/MENTION]      0.1
//  [MENTION=3833773]Description[/MENTION]  try to take over the world!
//  [MENTION=1332190]author[/MENTION]       You
//  [MENTION=340885]match[/MENTION]        [url]https://www.elitepvpers.com/*[/url]
//  [MENTION=283894]icon[/MENTION]         [url]https://www.google.com/s2/favicons?sz=64&domain=elitepvpers.com[/url]
//  [MENTION=551144]grant[/MENTION]        none
// ==/UserScript==

(function() {
    'use strict';
    var div = document.querySelectorAll("div");
    for (var i = 0; i < div.length; i++) {
        div[i].style.backgroundColor = "black";
        div[i].style.color = "#fff";
    }

    var table = document.querySelectorAll("table");
    for (i = 0; i < table.length; i++) {
        table[i].style.backgroundColor = "black";
        table[i].style.color = "#fff";
    }

    var a = document.querySelectorAll("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].getAttribute('style') != 'color:BlueViolet;')
        {a[i].setAttribute('style', 'color:White;');}
        }

        var td = document.querySelectorAll("td");
        for (i = 0; i < td.length; i++) {
            td[i].setAttribute('style', 'background: black');
            td[i].style.color = "#fff";
        }

        var alt2 = document.getElementsByClassName("alt2");
        for (i = 0; i < alt2.length; i++) {
            alt2[i].setAttribute('style', 'background: black;');
            alt2[i].style.color = "#fff";
        }

        var strong = document.querySelectorAll("strong");
        for (i = 0; i < strong.length; i++) {
            strong[i].setAttribute('onmousehover', 'this.style.opacity = "70%";');
        }

        var panel = document.getElementsByClassName("panel");
        for (i = 0; i < panel.length; i++) {
            panel[i].setAttribute('style', 'background: black !important');
        }

        var li2 = document.querySelectorAll("li");
        for (i = 0; i < li2.length; i++) {
            li2[i].setAttribute('style', 'background: black !important; border: 1px solid #252525 !important;');
        }

        var img = document.querySelectorAll("img");
        for (i = 0; i < img.length; i++) {
            if (img[i].classList.contains('fancybox-expandable') || img[i].classList.contains('fancybox-disabled'))
            {
                if ((img[i].getAttribute('src')).substr(-1) != "?")
                {
                    img[i].setAttribute('style', 'filter: invert(1)');
                }
            }
        }

        var pln = document.getElementsByClassName("pln");
        for (i = 0; i < pln.length; i++) {
            pln[i].setAttribute('style', 'color: wheat !important');
        }

       const credit = document.createElement("li");
        credit.innerHTML = "Dark Mode v1.02, by <a href='https://www.elitepvpers.com/forum/members/8325310-forfeitsol.html'>forfeitsol</a> ";

        document.getElementById("userbaritems").appendChild(credit);
    })();

Edit: EPvp replace @ as mention,
so where you read [MENTION], replace it with @ and remove [url] tags

[jobeth213]

Discord type color in Userscript chrome plugin:

// ==UserScript==
// [MENTION=286917]name[/MENTION]         New Userscript
// [MENTION=1005418]namespace[/MENTION]    [url]http://tampermonkey.net/[/url]
// [MENTION=1805674]Version[/MENTION]      0.1
// [MENTION=3833773]Description[/MENTION]  try to take over the world!
// [MENTION=1332190]author[/MENTION]       You
// [MENTION=340885]match[/MENTION]        [url]https://www.elitepvpers.com/*[/url]
// [MENTION=283894]icon[/MENTION]         [url]https://www.google.com/s2/favicons?sz=64&domain=elitepvpers.com[/url]
// [MENTION=551144]grant[/MENTION]        none
// ==/UserScript==

(function() {
    'use strict';
    var div = document.querySelectorAll("div");
    for (var i = 0; i < div.length; i++) {
        div[i].style.backgroundColor = "#313338";
        div[i].style.color = "#fff";
    }

    var table = document.querySelectorAll("table");
    for (i = 0; i < table.length; i++) {
        table[i].style.backgroundColor = "#313338";
        table[i].style.color = "#fff";
    }

    var a = document.querySelectorAll("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].getAttribute('style') != 'color:BlueViolet;')
        {a[i].setAttribute('style', 'color:White;');}
        }

        var td = document.querySelectorAll("td");
        for (i = 0; i < td.length; i++) {
            td[i].setAttribute('style', 'background: #313338');
            td[i].style.color = "#fff";
        }

        var alt2 = document.getElementsByClassName("alt2");
        for (i = 0; i < alt2.length; i++) {
            alt2[i].setAttribute('style', 'background: #313338;');
            alt2[i].style.color = "#fff";
        }

        var strong = document.querySelectorAll("strong");
        for (i = 0; i < strong.length; i++) {
            strong[i].setAttribute('onmousehover', 'this.style.opacity = "70%";');
        }

        var panel = document.getElementsByClassName("panel");
        for (i = 0; i < panel.length; i++) {
            panel[i].setAttribute('style', 'background: #313338 !important');
        }

        var li2 = document.querySelectorAll("li");
        for (i = 0; i < li2.length; i++) {
            li2[i].setAttribute('style', 'background: #313338 !important; border: 1px solid #252525 !important;');
        }

        var img = document.querySelectorAll("img");
        for (i = 0; i < img.length; i++) {
            if (img[i].classList.contains('fancybox-expandable') || img[i].classList.contains('fancybox-disabled'))
            {
                if ((img[i].getAttribute('src')).substr(-1) != "?")
                {
                    img[i].setAttribute('style', 'filter: invert(1)');
                }
            }
        }

        var pln = document.getElementsByClassName("pln");
        for (i = 0; i < pln.length; i++) {
            pln[i].setAttribute('style', 'color: wheat !important');
        }

       const credit = document.createElement("li");
        credit.innerHTML = "Dark Mode v1.02, by <a href='https://www.elitepvpers.com/forum/members/8325310-forfeitsol.html'>forfeitsol</a> ";

        document.getElementById("userbaritems").appendChild(credit);
    })();

[gaharasen]

this is great!

[Sifre]

Dark mode was the first thing I searched in my profile options. Thanks