EloCarry Tempest Dark Theme

[Tempest]

Still a work in progress, I know the EC team is making a dark mode UI but if you guys want to try out my version + provide feedback, I can have on-going revisions + updates to it until we get the release from the team. If you guys still prefer my version, I'll be making multi-colored themes once I've mastered the templating engine that EC uses for their forum.
 

Want to try out the Tempest Dark Theme without committing too much?
Try my 1 time preview code now, follow instructions please!

Spoiler

Go to EloCarry Main Page and then in your browser console, paste the code below into it to do a 1 time preview of Tempest Dark Theme

(function() {
    'use strict';

    const styles = document.createElement('style');
    const head = document.querySelector('head');
    styles.innerHTML = '.ipsNavBar_primary ul::before { display: none !important };';
    head.appendChild(styles);

    const ipsContainer = document.querySelector('.ipsLayout_container');
    const newMenu = document.createElement('div');
    const menu = document.querySelector('.ipsNavBar_primary');
    const userBar = document.querySelector('.user-bar');
    const banner = document.createElement('img');
    const focusWrap = document.querySelector('.focus-wrap')
    const allATags = document.querySelectorAll('a');
    const allThreadContent = document.querySelectorAll('.cPost_contentWrap');
    const itemControls = document.querySelectorAll('.ipsItemControls');
    const threadTitles = document.querySelectorAll('.ipsType_pageTitle');
    const allDropMenus = document.querySelectorAll('.ipsMenu.ipsMenu_normal');

    setTimeout(() => { // Callback queue
        const allWhiteBgAnchors = document.querySelectorAll('.ipsPagination_active');
        allWhiteBgAnchors.forEach(item => {
            item.children[0].style.color = 'black'
        })
    }, 0)

    allDropMenus.forEach(menu => {
        menu.style.background = '#15121b';
    });
    itemControls.forEach(item => {
        item.style.background = '#15121b';
    })
    threadTitles.forEach(title => {
        title.style.fontWeight = 'bold'
        title.style.color = '#fff'
    });
    allATags.forEach(anchor => {
        anchor.style.color = '#e4e4e4';
    })
    allThreadContent.forEach(content => {
        content.style.color = 'lightgrey'
    })

    focusWrap.style.background = '#15121b';
    userBar.style.zIndex = 0;
    newMenu.style.position = 'relative';
    menu.style.position = 'absolute';
    menu.style.bottom = 0;
    menu.style.right = 0;
    menu.style.width = '100%';
    menu.style.display = 'flex';
    menu.style.justifyContent = 'flex-end';
    banner.src = 'https://puu.sh/FjfRT/d5e31e9809.gif';
    banner.alt = 'banner';
    banner.onclick = () => {
        window.location.href = window.location.origin;
    }
    banner.style.width = '100%';
    banner.style.height = 'auto';
    newMenu.appendChild(menu);
    newMenu.appendChild(banner);
    ipsContainer.prepend(newMenu);
    document.getElementById('ipsLayout_header').remove();

})();

 

I love this! How do I make this work all the time for me?

1. For Chrome, download Tampermonkey extension
2. For Firefox, download Greasemonkey plugin (untested)
3. Click "Create a new script..."
4. Paste my code below
5. Save the file
6. Enjoy

The Tampermonkey Tempest Dark Theme script
 

Spoiler

// ==UserScript==
// @name         Tempest Dark Theme
// @namespace    https://elocarry.net/profile/489-tempest
// @version      0.1
// @description  Tempest Dark Theme
// @author       Tempest
// @match        https://elocarry.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const styles = document.createElement('style');
    const head = document.querySelector('head');
    styles.innerHTML = '.ipsNavBar_primary ul::before { display: none !important };';
    head.appendChild(styles);

    const ipsContainer = document.querySelector('.ipsLayout_container');
    const newMenu = document.createElement('div');
    const menu = document.querySelector('.ipsNavBar_primary');
    const userBar = document.querySelector('.user-bar');
    const banner = document.createElement('img');
    const focusWrap = document.querySelector('.focus-wrap')
    const allATags = document.querySelectorAll('a');
    const allThreadContent = document.querySelectorAll('.cPost_contentWrap');
    const itemControls = document.querySelectorAll('.ipsItemControls');
    const threadTitles = document.querySelectorAll('.ipsType_pageTitle');
    const allDropMenus = document.querySelectorAll('.ipsMenu.ipsMenu_normal');

    setTimeout(() => { // Callback queue
        const allWhiteBgAnchors = document.querySelectorAll('.ipsPagination_active');
        allWhiteBgAnchors.forEach(item => {
            item.children[0].style.color = 'black'
        })
    }, 0)

    allDropMenus.forEach(menu => {
        menu.style.background = '#15121b';
    });
    itemControls.forEach(item => {
        item.style.background = '#15121b';
    })
    threadTitles.forEach(title => {
        title.style.fontWeight = 'bold'
        title.style.color = '#fff'
    });
    allATags.forEach(anchor => {
        anchor.style.color = '#e4e4e4';
    })
    allThreadContent.forEach(content => {
        content.style.color = 'lightgrey'
    })

    focusWrap.style.background = '#15121b';
    userBar.style.zIndex = 0;
    newMenu.style.position = 'relative';
    menu.style.position = 'absolute';
    menu.style.bottom = 0;
    menu.style.right = 0;
    menu.style.width = '100%';
    menu.style.display = 'flex';
    menu.style.justifyContent = 'flex-end';
    banner.src = 'https://puu.sh/FjfRT/d5e31e9809.gif';
    banner.alt = 'banner';
    banner.onclick = () => {
        window.location.href = window.location.origin;
    }
    banner.style.width = '100%';
    banner.style.height = 'auto';
    newMenu.appendChild(menu);
    newMenu.appendChild(banner);
    ipsContainer.prepend(newMenu);
    document.getElementById('ipsLayout_header').remove();

})();

 

This took me a few minutes to make and it looks really good so far. Aside from changing the colors I also re-arranged the forum elements around. Its very new, its very fresh. I tried to make it as close as possible to the new Dark Theme coming from the EC team but this is just going to be the @Tempest temporary Dark UI Revamp. Shout out to @NitrogenX for the banner (he was the one who created it). I hope you all enjoy my take on the EC forum.

To do:
- Form controls
- Payment sections
- Quotation elements
- New Topic form controls

If possible, can we have other developers well versed in JavaScript take a look at my code and vet that it is good. Everything is designed to change the UI and change colors only. Please and thank you. Otherwise, please enjoy the Tempest Dark Theme!

[Tempest]

Update: With the Web 2.0 update, this no longer works but I'll leave it here for historical purposes :) goodjob on the UI guys!