☰

K12 Dark Mode Remastered

Makes the k12 pages a little easier on the eyes ;)

目前為 2022-01-06 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         K12 Dark Mode Remastered
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  Makes the k12 pages a little easier on the eyes ;)
// @author       Chase Davis
// @match        *://*.k12.com/*
// @match        *://*.brightspace.com/*
// @match        *://*.api.brightspace.com/*
// @icon         https://www.google.com/s2/favicons?domain=k12.com
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document.start
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
jQuery(function($) {
let first = GM_getValue('firsttime?');
//let first = undefined;
let pst = GM_getValue('preset');
let bg = GM_getValue('background');
let bg2 = GM_getValue('background2');
let acc = GM_getValue('accent');
let txt = GM_getValue('textcolor');
let img = GM_getValue('image');
let fnt = GM_getValue('font');
var i;
var ch;

console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)



// Create menu HTML
let preselect = ["","","","","",""];
preselect[pst] = " selected "
let fontselect = ["","","","",""]
fontselect[fnt] = " selected "

let menu = `
<div class="menuItem" id="menuBlock" style="display: none; width: 100%; height: 100%; background-color: #00000090 !important; z-index: 9998;">
    <div class="menuItem" id="menuMain" style="text-align: center; padding: 16px; border-radius: 16px; left: 5%; top: 5%; display: none; width: 90%; height: 90%; z-index: 9999;">
        <h1 class="menuDialog" style="border-radius: 8px;">K12 Dark Mode Customization Menu</h1><hr><br>
        <div class="menuItem menuDialog" id="themeSelect" style="text-align: center; padding: 8px; border-radius: 8px; float: left; display: none; width: 20%; height: fit-content; position: relative;">
            <h2 class="menuDialog">Theme</h2><hr>
            <div class="spacer">
                Preset:
                <select id="themebox" class="menuDialog" style="width: 90%; height: 20%;">
                    <option value="0"`+preselect[0]+`>Dark</option>
                    <option value="1"`+preselect[1]+`>Extra Dark</option>
                    <option value="2"`+preselect[2]+`>Light</option>
                    <option value="3"`+preselect[3]+`>True Blue</option>
                    <option value="4"`+preselect[4]+`>Contrast</option>
                    <option value="5"`+preselect[5]+`>Custom</option>
                </select>
            </div><hr>

            <div class="spacer" style="padding: 4px;">
                Font:
                <select id="fnt" class="menuDialog" style="width: 90%; height: 20%;">
                    <option value="0"`+fontselect[0]+`>Arial</option>
                    <option value="1"`+fontselect[1]+`>Monospace</option>
                    <option value="2"`+fontselect[2]+`>Comic Sans</option>
                    <option value="3"`+fontselect[3]+`>Bold</option>
                    <option value="4"`+fontselect[4]+`>Icons</option>
                </select>
            </div>
            <div class="spacer">
                Background Image:
                <input id="img" class="menuDialog" style="width: 100%" value=`+img+`></input>
            </div>
            <div class="spacer">
                Background:
                <input id="bg" class="menuDialog" style="width: 100%" value=`+bg+`></input>
            </div>
            <div class="spacer">
                Secondary:
                <input id="bg2" class="menuDialog" style="width: 100%" value=`+bg2+`></input>
            </div>
            <div class="spacer">
                Accent:
                <input id="acc" class="menuDialog" style="width: 100%" value=`+acc+`></input>
            </div>
            <div class="spacer">
                Text Color:
                <input id="txt" class="menuDialog" style="width: 100%" value=`+txt+`></input>
            </div>

        </div>
    </div>
</div>
`;



// Define Functions
function setup() {

        alert('Welcome to K12 Dark Mode! Press Tab to bring up the new menu! \n\nRefresh the page to activate the script.');
        GM_setValue('firsttime?',false);

        let pst = 0
        GM_setValue('preset',pst);
        let bg = '#404040';
        GM_setValue('background',bg);
        let bg2 = '#606060';
        GM_setValue('background2',bg2);
        let acc = '#004674';
        GM_setValue('accent',acc);
        let txt = '#b0b0b0';
        GM_setValue('textcolor',txt);
        let img = 'https://parade.com/wp-content/uploads/2021/11/new-year-wishes.jpg';
        GM_setValue('image',img);
        let fnt = 1;
        GM_setValue('font',fnt);

};

function makeCSS(background, background2, accent, textcolor, image, font) {
    let css = `
    <style id="K12DMR_CSS">

        * {
            background-color: `+background+` !important;
            font-family: `+font+` !important;
            color: `+textcolor+` !important;
            transition: background-color 1s ease;
        }

        th {
            background-color: `+background+` !important;
        }

        @keyframes fadeIn {
            0% {opacity:0;}
            100% {opacity:1;}
        }

        .menuItem {
            animation: fadeIn 1s;
            font-family: `+font+` !important;
            color: `+textcolor+` !important;
            position: fixed;
            transition: background-color 1s ease;
        }

        .menuDialog {
            background-color: `+background2+` !important;
        }

        #menuMain {
            background: linear-gradient(180deg, `+background+`, `+accent+`)
        }

        .spacer {
            background-color: `+background+` !important;
            padding: 6px;
            border-radius: 8px;
        }

        #side-nav {
            background: linear-gradient(180deg, `+background+` 10%, `+accent+`)
        }

        #side-nav * {
            background-color: #00000000 !important;
        }

        table {
            background: `+background2+` !important;
        }

        #content-area {
            background-color: #00000000 !important;
        }

        #wallpaper {
            background: url(`+image+`) !important;
            background-size: cover !important;
            background-position: center center !important;
            z-index: 0 !important;
        }

        .d2l-image-banner-overlay {
            background-image: url(`+image+`) !important;
            background-size: cover !important;
            background-position: center center !important;
        }

        #background-chooser {
            display: none !important;
        }

        .credit-photo {
            display: none !important;
        }

        .cards-container {
            background-color: #00000000 !important;
        }

        .grid-sizer {
            background-color: #00000000 !important;
        }

        .item {
            background: linear-gradient(180deg, `+background+`, `+background2+`);
            border-radius: 12px;
            border: 4px solid `+accent+`;
        }

        .item * {
            background-color: #00000000 !important;
        }

        .card-info {
            background-color: `+background2+` !important;
        }


        .grade {
            background-color: `+background+` !important;
        }

        .component-group {
            background-color: #00000000 !important;
        }

        .widget-panel {
            border: 4px solid `+accent+` !important;
        }

        #components {
            background-color: #00000000 !important;
        }

        [id*="sidebar-nav-item"] {
            border-top: 1px solid `+accent+` !important;
            border-bottom: 1px solid `+accent+` !important;
        }

        .goto {
            background-color: `+accent+` !important;
        }

        .d2l-navigation-s-main-wrapper * {
            background-color: `+accent+` !important;
        }

        .d2l-navigation-s-main-wrapper {
            background-color: `+accent+` !important;
        }

        .d2l-branding-navigation-background-color {
            background-color: `+accent+` !important;
        }

        .d2l-widget {
            background-color: `+background2+` !important;
        }

        .d2l-widget * {
            background-color: `+background2+` !important;
        }

        .d2l-collapsepane-header {
            background: none !important;
        }

        .d2l-box {
            background: none !important;
        }

        .d2l-twopanelselector-side {
            background: linear-gradient(315deg, `+background+`, `+accent+`) !important;
        }

        .d2l-twopanelselector-side * {
            background: none !important;
        }

        .d2l-input-focus {
            background: `+background2+` !important;
        }

        .d2l-twopanelselector-main {
            background: `+background2+` !important;
        }

        .d2l-twopanelselector-main * {
            background: none !important;
        }

        img {
            filter: invert(1) !important;
        }

    </style>
    `;

    if (document.getElementById('K12DMR_CSS') == undefined) {
        $('head').append(css);
    } else {
        $('#K12DMR_CSS').remove();
        $('head').append(css);
    }

};

function toggleMenu() {
    if (document.getElementById('menuBlock').style.display == 'none') {
        console.log('toggle menu on');
        let divs = $('.menuItem')
        for (i = 0; i<divs.length; i++) {
             divs[i].style.display = 'block';
        }
    } else {
        console.log('toggle menu off');
        let divs = $('.menuItem');
        for (i = 0; i<divs.length; i++) {
             divs[i].style.display = 'none';
        }
    }
};

function onKeyDown(evt) {
    if (evt.keyCode == 9) {
        toggleMenu();
    }
    if (evt.keyCode == 81) {
        setup();
        console.log('setup triggered')
    }
}
document.addEventListener('keydown', onKeyDown, true);


// Now do the things
$('body').append(menu);
if (first == undefined) {setup()} else {
makeCSS(bg, bg2, acc, txt, img, fnt);
    setTimeout(function(){try{document.querySelector('#header-title-h2').innerHTML = 'Welcome, '+document.querySelector('#user-name').innerHTML+'. Press Tab to open customization menu.'}catch(err){console.log('Could not manipulate welcome text.')}},1000)
};



// Menu sensory

// Theme selector
document.querySelector('#themebox').addEventListener('change', (event) => {// When preset theme changes
    let ch = document.querySelector('#themebox').value
    ch = parseInt(ch)

    let bgs = ["#404040", "#202020", "#fdfdfd", "#303940", "#000000", bg];// Colors for presets
    let bg2s = ["#606060", "#404040", "#d0d0d0", "#505960", "#404040", bg2];
    let accs = ["#004674", "#004674", "#004674", "#004684", "#606060", acc];
    let txts = ["#b0b0b0", "#c0c0c0", "#404040", "#a0a0b0", "#cfcf2a", txt];

    pst = ch
    GM_setValue('preset',pst);
    bg = bgs[ch]
    GM_setValue('background',bg);
    bg2 = bg2s[ch]
    GM_setValue('background2',bg2);
    acc = accs[ch]
    GM_setValue('accent',acc);
    txt = txts[ch]
    GM_setValue('textcolor',txt);
    makeCSS(bg, bg2, acc, txt, img, fnt);

    document.querySelector('#bg').value = bg;
    document.querySelector('#bg2').value = bg2;
    document.querySelector('#acc').value = acc;
    document.querySelector('#txt').value = txt;

    console.log('Theme changed to '+['Dark','Extra Dark','Light','True Blue','Contrast','Custom'][ch])
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});

// Font selector
document.querySelector('#fnt').addEventListener('change', (event) => {
    let ch = document.querySelector('#fnt').value
    ch = parseInt(ch)

    let fnts = ["arial","monospace","cursive","fantasy","'ng-icons'"];// Fonts

    fnt = fnts[ch]
    GM_setValue('font',fnt);
    makeCSS(bg, bg2, acc, txt, img, fnt);
    console.log('Font changed to '+["arial","monospace","cursive","fantasy","'ng-icons'"][ch])
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});

// Background Image input
document.querySelector('#img').addEventListener('change', (event) => {
    let val = document.querySelector('#img').value

    img = val
    GM_setValue('image',img);
    makeCSS(bg, bg2, acc, txt, img, fnt);
    console.log('Background Image changed to '+val)
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});

// Background input
document.querySelector('#bg').addEventListener('change', (event) => {
    let val = document.querySelector('#bg').value

    bg = val
    GM_setValue('background',bg);
    makeCSS(bg, bg2, acc, txt, img, fnt);
    console.log('Background changed to '+val)
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});

// Background2 input
document.querySelector('#bg2').addEventListener('change', (event) => {
    let val = document.querySelector('#bg2').value

    bg2 = val
    GM_setValue('background2',bg2);
    makeCSS(bg, bg2, acc, txt, img, fnt);
    console.log('Background 2 changed to '+val)
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});

// Accent input
document.querySelector('#acc').addEventListener('change', (event) => {
    let val = document.querySelector('#acc').value

    acc = val
    GM_setValue('accent',acc);
    makeCSS(bg, bg2, acc, txt, img, fnt);
    console.log('Accent changed to '+val)
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});

// Text Color input
document.querySelector('#txt').addEventListener('change', (event) => {
    let val = document.querySelector('#txt').value

    txt = val
    GM_setValue('textcolor',txt);
    makeCSS(bg, bg2, acc, txt, img, fnt);
    console.log('Text Color changed to '+val)
    console.log('Display Vars\n\nPreset: '+pst+'\nBackground: '+bg+'\nBackground 2: '+bg2+'\nAccent: '+acc+'\nText Color: '+txt+'\nBackground Image: '+img+'\nFont: '+fnt)

});



})})();