Skip to content

Instantly share code, notes, and snippets.

@noopkat noopkat/chat.js
Last active Feb 11, 2020

Embed
What would you like to do?
Streamlabs Dracula Themed Chat Box
const setup = () => {
const nearestColorScript = document.createElement('script');
document.body.appendChild(nearestColorScript);
nearestColorScript.onload = onScriptLoad;
nearestColorScript.src = 'https://cdn.rawgit.com/dtao/nearest-color/a017c25b/nearestColor.js';
}
const onScriptLoad = () => {
console.log('nearest color script loaded');
self._colors = {
'cyan': '#8be9fd',
'green': '#50fa7b',
'orange': '#ffb86c',
'pink': '#ff79c6',
'purple': '#bd93f9',
'red': '#ff5555',
'yellow': '#f1fa8c'
};
self._replaceColor = nearestColor.from(self._colors);
const chatlog = document.querySelector('#log');
const config = { childList: true };
const observer = new MutationObserver(onMutation);
observer.observe(chatlog, config);
}
const onMutation = (mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.addedNodes.length) {
const addedNodesArray = [...mutation.addedNodes];
const addedDivs = addedNodesArray.filter((node) => node.nodeName === 'DIV');
if (addedDivs.length) {
const chatDiv = addedDivs.pop();
const chatNick = chatDiv.querySelector('.meta');
const oldColor = chatNick.style.color;
const newColor = self._replaceColor(oldColor).value || self._colors.pink;
chatNick.style.color = newColor;
}
}
}
};
document.addEventListener('onLoad', setup);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.