Makes the k12 pages a little easier on the eyes ;)
目前為
// ==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)
});
})})();