I am reading the documentation at Introduction - Elixir and came up with this sorta ‘Dark Theme’.
In case you want to give it a try while reading the documentation. You can do it by copy/pasting the following JavaScript code into the console (Which is never a good idea to do it blindly). The only problem I see is that you will need to do it for every page you are going to read. The good side is that every topic deserves at least two hours of reading and reflection.
(function applyDarkTheme() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://axvghtygw97m.objectstorage.us-sanjose-1.oci.customer-oci.com/n/axvghtygw97m/b/YnVja2V0-20230811-2051/o/RWxpeGlyRGFya1RoZW1l.css';
document.head.appendChild(link);
document.getElementsByTagName('small')[0].setAttribute('style', 'color: powderblue');
applyColorToClassElements('widget-title', 'powderblue');
applyColorToClassElements('p', 'lightslategrey');
applyColorToClassElements('k', 'aqua');
applyColorToClassElements('mb', '#099');
applyColorWithDifferentiator('n', 'orange', 'iex');
applyColorWithDifferentiator('o', 'antiquewhite', 'o');
})();
function applyColorToClassElements(theClassName, theColor) {
const theElements = document.getElementsByClassName(theClassName);
Array.from(theElements).forEach(elem => elem.setAttribute('style', `color: ${theColor}`));
}
function applyColorWithDifferentiator(theClassName, theColor, differentiator) {
const theElements = document.getElementsByClassName(theClassName);
Array.from(theElements).forEach(elem => {
if (elem.innerText === differentiator) {
elem.setAttribute('style', 'color: #006600');
} else {
elem.setAttribute('style', `color: ${theColor}`);
}
});
}
In the hope it helps someone else.
Happy weekend. (Again).
–
Caleb
