Created
December 1, 2022 19:38
-
-
Save henrycunh/4ce4e0600f59c5bd4434adda9e420cf4 to your computer and use it in GitHub Desktop.
blue checkmarks are hella boring
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let header = null | |
function getHeader () { | |
if (header !== null) { | |
createButton() | |
return | |
} else { | |
header = document.querySelector('header') | |
setTimeout(getHeader, 100) | |
} | |
} | |
function saveColorInLocalStorage (color) { | |
localStorage.setItem('color', color) | |
} | |
function getColorFromLocalStorage () { | |
return localStorage.getItem('color') | |
} | |
function createButton () { | |
const targetElement = document.querySelector('[data-testid="SideNav_NewTweet_Button"]') | |
const buttonParent = targetElement.parentElement | |
const newButton = document.createElement('div') | |
// Make the content a SVG image | |
newButton.innerHTML = ` | |
<img src="https://api.iconify.design/fluent-emoji:rainbow.svg?color=%230fbd3b" width="36" height="36" /> | |
<input type="color" id="color-picker" value="#000000" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;" /> | |
` | |
// Add styling | |
newButton.style = 'width: 100%; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 16px;' | |
buttonParent.appendChild(newButton) | |
// Add event listener | |
const colorPicker = document.getElementById('color-picker') | |
colorPicker.addEventListener('change', (event) => { | |
const color = event.target.value | |
// Convert to RGB in R, G, B format | |
const rgb = color.match(/\w\w/g).map((hex) => parseInt(hex, 16)) | |
// Set the color | |
document.body.style.setProperty('--color', `${rgb.join(', ')}`) | |
// Save the color in local storage | |
saveColorInLocalStorage(rgb.join(', ')) | |
}) | |
console.log(newButton) | |
} | |
getHeader() | |
document.body.style.setProperty('--color', getColorFromLocalStorage() || '0, 0, 0') | |
// Add style tag | |
const style = document.createElement('style') | |
style.innerHTML = ` | |
.r-1cvl2hr { | |
color: rgb(var(--color)) !important; | |
transition: color 1000ms ease-in-out; | |
} | |
.r-1peqgm7 { | |
background-color: rgb(var(--color), 5%) !important; | |
transition: background-color 1000ms ease-in-out; | |
} | |
.r-l5o3uw, .r-1vtznih, a[data-testid="SideNav_NewTweet_Button"] { | |
background-color: rgb(var(--color)) !important; | |
transition: background-color 1000ms ease-in-out; | |
} | |
` | |
document.head.appendChild(style) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment