User:Crashaholic/vector.js: Difference between revisions
Crashaholic (talk | contribs) m (dark mode me) |
("Legacy Content" -> "Legacy content") Tag: content model change |
||
(18 intermediate revisions by one other user not shown) | |||
Line 9: | Line 9: | ||
// how tf do i do cookies LMAO | // 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 | // creates the toggle in the page | ||
Line 19: | 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(' | node2.setAttribute('onclick', 'switchTheme()'); | ||
node2.innerText = " | if (!currentMode) | ||
node2.innerText = "Change to Light Theme"; | |||
else if (currentMode) | |||
node2.innerText = "Change to Dark Theme"; | |||
node1.classList += "mw-list-item"; | node1.classList += "mw-list-item"; | ||
} | } | ||
Line 39: | 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) { | ||
r.style.setProperty(name, value); | r.style.setProperty(name, value); | ||
} | } | ||
if (lightmode == 'light') { | |||
set_var("--bg-main", " | set_var("--bg-main", "hsl(46, 46%, 89%)"); | ||
set_var("--bg-main2", " | set_var("--bg-main2", "hsl(46, 48%, 82%)"); | ||
set_var("--bg-main3", " | set_var("--bg-main3", "hsl(45, 52%, 78%)"); | ||
set_var("--bg-dark", " | set_var("--bg-dark", "hsl(45, 56%, 74%)"); | ||
set_var("--bg-darker", " | set_var("--bg-darker", "hsl(44, 62%, 70%)"); | ||
set_var("--bdr-white", "rgb(85, 85, 85)"); | 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(162, 87, 59)"); | set_var("--link", "rgb(162, 87, 59)"); | ||
set_var("--link-vis", "rgb(89, 125, 11)"); | set_var("--link-vis", "rgb(89, 125, 11)"); | ||
set_var("--link-new", "rgb(232, 32, 6)"); | set_var("--link-new", "rgb(232, 32, 6)"); | ||
set_var("--btn-bg", "rgb(228, 210, 174)"); | 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-bg-hl", "rgb(241, 216, 166)"); | ||
set_var("--btn-bdr-hl", "rgb(102, 75, 21)"); | set_var("--btn-bdr-hl", "rgb(102, 75, 21)"); | ||
set_var("--btn-fg-hl", "rgb(44, 34, 16)"); | set_var("--btn-fg-hl", "rgb(44, 34, 16)"); | ||
set_var("--btn-active-bg", "rgb(223, 195, 141)"); | set_var("--btn-active-bg", "rgb(223, 195, 141)"); | ||
set_var("--btn-active-bdr", "rgb(61, 43, 8)"); | set_var("--btn-active-bdr", "rgb(61, 43, 8)"); | ||
set_var("--btn-active-fg", "rgb(44, 34, 16)"); | 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)"; }); }