User:Crashaholic/vector.js: Difference between revisions

From bg3.wiki
Jump to navigation Jump to search
No edit summary
("Legacy Content" -> "Legacy content")
Tag: content model change
 
(25 intermediate revisions by one other user not shown)
Line 1: Line 1:
function create_nightmode_toggle()
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
// Get the root element
Line 16: Line 63:
// Create a function for setting a variable value
// Create a function for setting a variable value
function set_var(name, value) {
function set_var(name, value) {
  // Set the value of variable --blue to another value (in this case "lightblue")
   r.style.setProperty(name, value);
   r.style.setProperty(name, value);
}
}
 
if (lightmode == 'light') {
set_var("--bg-main", "rgb(240, 234, 214)");
set_var("--bg-main", "hsl(46, 46%, 89%)");
set_var("--bg-main2", "rgb(243, 235, 205)");
set_var("--bg-main2", "hsl(46, 48%, 82%)");
set_var("--bg-main3", "rgb(240, 226, 179)");
set_var("--bg-main3", "hsl(45, 52%, 78%)");
set_var("--bg-dark", "rgb(240, 234, 214)");
set_var("--bg-dark", "hsl(45, 56%, 74%)");
set_var("--bg-darker", "rgb(243, 235, 205)");
set_var("--bg-darker", "hsl(44, 62%, 70%)");
set_var("--bdr-white", "rgb(223, 222, 218)");
set_var("--bdr-white", "rgb(85, 85, 85)");
set_var("--bdr-color", "rgb(134, 87, 33)");
set_var("--bdr-color", "rgb(134, 87, 33)");
set_var("--bdr-hl", "rgb(240, 174, 121)");
set_var("--bdr-hl", "rgb(240, 174, 121)");
set_var("--fg", "rgb(44, 34, 16)");
set_var("--fg", "rgb(44, 34, 16)");
set_var("--fg-light", "rgb(66, 54, 30)");
set_var("--fg-light", "rgb(66, 54, 30)");
set_var("--fg-dark ", "rgb(22, 22, 14)");
set_var("--fg-dark ", "rgb(22, 22, 14)");
set_var("--link", "rgb(168, 110, 43)");
set_var("--link", "rgb(162, 87, 59)");
set_var("--link-vis", "rgb(160, 175, 22)");
set_var("--link-vis", "rgb(89, 125, 11)");
set_var("--link-new", "rgb(212, 68, 49)");
set_var("--link-new", "rgb(232, 32, 6)");
set_var("--btn-bg", "rgb(223, 187, 115)");
set_var("--btn-bg", "rgb(228, 210, 174)");
set_var("--btn-bdr", "rgb(61, 43, 8)");
set_var("--btn-bdr", "rgb(61, 43, 8)");
set_var("--btn-fg", "rgb(44, 34, 16)");
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)";
});
}

Latest revision as of 22: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)"; }); }