User:Crashaholic/vector.js: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
(WILL THIS WORK PART 2????)
("Legacy Content" -> "Legacy content")
Tag: content model change
 
(10 intermediate revisions by one other user not shown)
Line 39: Line 39:
var foo = document.querySelector('.vector-menu-content-list');
var foo = document.querySelector('.vector-menu-content-list');
foo.prepend(node1);
foo.prepend(node1);
node1.id = "pt-mode"; //adding to literally just make it look similar to the other options LMAO
node1.appendChild(node2);
node1.appendChild(node2);
node2.setAttribute('onclick', 'switchTheme()');
node2.setAttribute('onclick', 'switchTheme()');
Line 89: Line 90:
set_var("--btn-active-fg", "rgb(44, 34, 16)");
set_var("--btn-active-fg", "rgb(44, 34, 16)");
$('.theme-dark-grey').each(function() {
$('.theme-dark-grey').addClass('theme-bg3-light'); // lazy catchall that
  $(this).find('*').addClass('theme-light');
// doesnt actually catch all
// == Targetted items ==
$('.bg3wiki-tooltip-box').addClass('theme-bg3-light'); // the rounded boxes
$('#bg3wiki-legacy-content-notice').addClass('theme-bg3-light'); // Legacy content Template
$('.bg3wiki-blockquote-text').addClass('theme-bg3-light'); // Description Template
$('.mw-list-item.selected').addClass('theme-bg3-light'); // the tabs at the top
// == For images that are pure white (thanks larian)
var a = document.querySelectorAll('img')
a.forEach(function(e) {
e.style.filter = "drop-shadow(0 0 5px #555)";
});
});
}
}

Latest revision as of 23:43, 9 June 2024

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.id = "pt-mode"; //adding to literally just make it look similar to the other options LMAO 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'); // lazy catchall that // doesnt actually catch all

// == Targetted items == $('.bg3wiki-tooltip-box').addClass('theme-bg3-light'); // the rounded boxes $('#bg3wiki-legacy-content-notice').addClass('theme-bg3-light'); // Legacy content Template $('.bg3wiki-blockquote-text').addClass('theme-bg3-light'); // Description Template $('.mw-list-item.selected').addClass('theme-bg3-light'); // the tabs at the top

// == For images that are pure white (thanks larian) var a = document.querySelectorAll('img') a.forEach(function(e) { e.style.filter = "drop-shadow(0 0 5px #555)"; }); }