Raw Source Toggle Dropdown

• Minified Source

dæli / BDOWhaleTracker Dark Mode

// ==UserScript==
// @name         BDOWhaleTracker Dark Mode
// @namespace    https://github.com/JoJoMayer
// @version      0.1
// @description  Let darkness reign!
// @author       Discord: dæli#5197
// @license MIT
// @match        https://bdowhaletracker.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    // change these values to customize colors
    const primaryBackground = 'rgb(53, 54, 58)';
    const secondaryBackground = 'rgb(32, 33, 36)';
    const fontColor = 'rgba(238,238,238)';
    
//-- adjust html structure --//
    // wrap markets with div to allow side by side positioning
    const tableWrapper = document.createElement('div');
    tableWrapper.classList.add('tableWrapper');

    const markets = document.querySelectorAll('body .market');

    const content = document.querySelector('.content');
    content.appendChild(tableWrapper);

    [...markets].forEach(el => tableWrapper.appendChild(el));

    // thats a nasty "table" for last update ;)
    const lastUpdates = document.querySelectorAll('.header > div:not(.top-spacer)');

    // box em in!
    const updateBox = document.createElement('div');
    updateBox.classList.add('updateBox');

    [...lastUpdates].forEach(el => {
        el.style = '';
        updateBox.appendChild(el);
    });
    document.querySelector('.header').appendChild(updateBox);

//-- adjust styles --//

    // dont blame me!
    // blame google! (also I wanted to try something different ;)

    //create new stylesheet
    const style = document.createElement('style');

    style.innerHTML =
        'html {' +
            `color: ${fontColor};` +
            `background-color: ${primaryBackground};` +
            'font-family: roboto,sans-serif;' +
        '}' +
        '.content {' +
		    'max-width: unset;' +
	    '}' +
        '.content > * {' +
		    'max-width: 580px;' +
            'margin-right:auto;' +
            'margin-left:auto;' +
	    '}' +
        '.header {' +
		    'max-width: unset;' +
            'text-align: center;' +
            'background-color: unset;' +
	    '}' +
        '.header .top-spacer {' +
            'border-top: 6px solid #006400;' +
	    '}' +
        '.header a {' +
		    `color: ${fontColor};` +
	    '}' +
        '.header .updateBox {' +
            'display: flex;' +
            'justify-content: space-between;' +
		    'max-width: 300px;' +
            'margin-left: auto;' +
            'margin-right: auto;' +
	    '}' +
        '.tableWrapper {' +
		    'display: flex;' +
            'max-width: 1150px;' +
            'justify-content: space-between;' +
	    '}' +
        '.market {' +
		    `background-color: ${secondaryBackground};` +
		    'padding: 5px;' +
            'border-radius: 20px 20px 2px 2px;' +
            'width: 550px;' +
	    '}' +
        '.market {' +
		    'background-color: rgb(32, 33, 36);' +
		    'padding: 5px;' +
            'border-radius: 20px 20px 2px 2px;' +
            'margin-bottom: unset;' +
	    '}' +
        'th,' +
        'tr:last-of-type {' +
            'border-bottom: 1px solid white;' +
        '}'

    // add new stylesheet
    document.querySelector('head').appendChild(style);
})();