User:Crashaholic/vector.js

var currentMode = 0; // 0 is dark, 1 is light
// used by the text to determine toggle text
// is 0 by default cuz, well, the site's default is dark
// plan: write to cookie to store light or dark mode persistency
// cuz it actually would be annoying to keep clicking
// this cookie should only be for the user who has this script
// trying to say that this whole thing should *generally* be safe
// i hope
// how tf do i do cookies LMAO

var key = "bg3-wiki-vector-theme-mode";

var lightmode = localStorage.getItem(key);

if (!lightmode) {
	localStorage.setItem(key, 'dark');
}

if (lightmode == 'dark') currentMode = 0;
if (lightmode == 'light') currentMode = 1;

function switchTheme() {
    if (lightmode == 'light') {
		localStorage.setItem(key, 'dark'); //add this
    }
    else {
		localStorage.setItem(key, 'light'); //add this
    }
    location.reload();
    return false;
}

// creates the toggle in the page
// will be beside the user's name in the "vector-menu-content-list"
function create_night_mode_toggle()
{
	var node1 = document.createElement('li');
	var node2 = document.createElement('a');
	var foo = document.querySelector('.vector-menu-content-list');
	foo.prepend(node1);
	node1.appendChild(node2);
	node2.setAttribute('onclick', 'switchTheme()');
	if (!currentMode)
		node2.innerText = "Change to Light Theme";
	else if (currentMode)
		node2.innerText = "Change to Dark Theme";
	node1.classList += "mw-list-item";
}

create_night_mode_toggle();

// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function get_var(name) {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  rs.getPropertyValue(name);
}

// Create a function for setting a variable value
function set_var(name, value) {
  r.style.setProperty(name, value);
}
if (lightmode == 'light') {
	set_var("--bg-main", "hsl(46, 46%, 89%)");
	set_var("--bg-main2", "hsl(46, 48%, 82%)");
	set_var("--bg-main3", "hsl(45, 52%, 78%)");
	set_var("--bg-dark", "hsl(45, 56%, 74%)");
	set_var("--bg-darker", "hsl(44, 62%, 70%)");
	set_var("--bdr-white", "rgb(85, 85, 85)");
	set_var("--bdr-color", "rgb(134, 87, 33)");
	set_var("--bdr-hl", "rgb(240, 174, 121)");
	set_var("--fg", "rgb(44, 34, 16)");
	set_var("--fg-light", "rgb(66, 54, 30)");
	set_var("--fg-dark ", "rgb(22, 22, 14)");
	set_var("--link", "rgb(162, 87, 59)");
	set_var("--link-vis", "rgb(89, 125, 11)");
	set_var("--link-new", "rgb(232, 32, 6)");
	set_var("--btn-bg", "rgb(228, 210, 174)");
	set_var("--btn-bdr", "rgb(61, 43, 8)");
	set_var("--btn-fg", "rgb(44, 34, 16)");
	set_var("--btn-bg-hl", "rgb(241, 216, 166)");
	set_var("--btn-bdr-hl", "rgb(102, 75, 21)");
	set_var("--btn-fg-hl", "rgb(44, 34, 16)");
	set_var("--btn-active-bg", "rgb(223, 195, 141)");
	set_var("--btn-active-bdr", "rgb(61, 43, 8)");
	set_var("--btn-active-fg", "rgb(44, 34, 16)");
	
	$('.theme-dark-grey').addClass('theme-bg3-light');
}