MediaWiki:Cosmos.js

/* All JavaScript here will be loaded for users of the Cosmos skin */ //check localStorage for darkmode var html = document.getElementsByTagName('html')[0]; if (localStorage.getItem('dusty-darkmode') === 'dark') { html.classList.add('client-darkmode'); } else { html.classList.remove('client-darkmode'); }

$(document).ready(function {    //Site notice noexcerpt    if ($('#siteNotice').length > 0) {        var siteNotice = document.getElementById('siteNotice');        siteNotice.classList.add('noexcerpt');    }    //empty paragraphs noexcerpt    if ($('.mw-empty-elt').length > 0) {        var emptyP = document.getElementsByClassName('mw-empty-elt');        for (let i = 0; i < emptyP.length; i++) {            emptyP[i].classList.add('noexcerpt');        }    }//end noexcerpt class-adds

//ACTIVATING DARK MODE //target the icon area var dropdown = document.getElementById('p-more'); var buttonGroup = document.getElementsByClassName('cosmos-header__wiki-buttons')[0]; // Create & Place darkmode button var darkModeButton = document.createElement('a'); darkModeButton.classList.add('wds-button', 'wds-is-secondary', 'dusty-darkmode-button'); darkModeButton.title = 'Switch to Dark Mode'; var moonSVG = '  ';//little moon icon var sunSVG = ' <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" fill="white"> ';//little sun icon //sneak it intp the button group buttonGroup.insertBefore(darkModeButton, dropdown); console.log('this works?'); //changing the button if (html.classList.contains('client-darkmode')) { darkModeButton.innerHTML = sunSVG;//if dark mode, make button sun } else { darkModeButton.innerHTML = moonSVG;//if light mode, make button moon }       //when u click on dark mode button darkModeButton.onclick = function { //add darkmode class to html element html.classList.toggle('client-darkmode'); //make browser remember & change buttons again if (darkModeButton.innerHTML === sunSVG) { darkModeButton.innerHTML = moonSVG; darkModeButton.title = 'Switch to Light Mode'; console.log('switching to light mode!'); //saving light mode setting localStorage.setItem('dusty-darkmode', 'light'); } else { darkModeButton.innerHTML = sunSVG; darkModeButton.title = 'Switch to Dark Mode'; console.log('switching to dark mode!'); //saving dark mode setting localStorage.setItem('dusty-darkmode', 'dark'); }   };//end darkmode function //check if discord widget exists (presence of Cosmos Rail) if ($('#discordwidget').length > 0) { //place discord widget document.getElementById("discordwidget").innerHTML = ' '; } });//end document ready