Initially, I successfully changed the font and color of text on Google using a simple code. However, when I attempted to incorporate it into a toggle on / off switch, the changes did not take effect.
To address this issue, I sought assistance from ChatGPT for error reduction and general guidance on my approach. Despite receiving some incorrect information, I ran numerous iterations through the prompts. However, it seems that ChatGPT can no longer detect any significant changes.
//Get the URL
const site = window.location.hostname
//Function to add custom CSS
let customStyle;
const Add_Custom_Style = css => customStyle = document.head.appendChild(document.createElement("style")).innerHTML = css;
const Remove_Custom_Style = () => customStyle.remove();
//Function to change CSS
function changeCSS(){
//Function for Google.com
if (site.includes("google.com")){
Add_Custom_Style(`
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300&display=swap');
* {
font-family: 'Advent Pro', sans-serif !important;
color: #fff !important;
}
a {
color: #b0dff4 !important;
font-size: 140%;
}
h1, h2, h3, h4, h5, h6 {
color: #b0dff4 !important;
}
`)
}
}
//Function to remove CSS
function removeCSS(){
customStyle.remove();
}
//Toggle function on off
window.onload = function() {
const cssToggleBtn = document.getElementById("togBtn");
cssToggleBtn.addEventListener("change", function(){
if(cssToggleBtn.checked){
changeCSS();
}
else{
removeCSS();
}
});
};
This is the current code that I am using. If there are any oversights or glaring errors, I would appreciate it if you could point them out. Thank you!