diff --git a/onload.js b/onload.js index c777ed5..7e07309 100644 --- a/onload.js +++ b/onload.js @@ -1,19 +1,27 @@ chrome.storage.sync.get('a1', ({ a1 }) => { + updateAccents(a1); + + // run a second check to update missing accents due to limitations setTimeout(function() { - document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L4-bg', a1 + "ff", "important"); - document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L3-bg', a1 + "c5", "important"); - document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L2-bg', a1 + "8a", "important"); - document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L1-bg', a1 + "54", "important"); - document.querySelector(':root').style.setProperty('--color-accent-emphasis', a1 + "ff", "important"); - document.querySelector(':root').style.setProperty('--color-btn-primary-bg', a1 + "ff", "important"); - document.querySelector(':root').style.setProperty('--color-btn-primary-hover-bg', a1 + "c5", "important"); - document.querySelector(':root').style.setProperty('--color-btn-primary-active-bg', a1 + "8a", "important"); - document.querySelector(':root').style.setProperty('--color-btn-primary-focus-bg', a1 + "8a", "important"); - document.querySelector(':root').style.setProperty('--color-btn-primary-disabled-bg', a1 + "54", "important"); - document.querySelector('.js-highlight-blob').style.setProperty('fill', a1 + "c5", "important"); - document.querySelector('.js-highlight-blob').style.setProperty('stroke', a1 + "ff", "important"); - for (let i = 0; i < document.querySelectorAll('.Progress-item.rounded-2').length; i++) { - document.querySelectorAll('.Progress-item.rounded-2')[i].style.setProperty('background-color', a1 + "ff", "important"); - } + updateAccents(a1); }, 1000); -}); \ No newline at end of file + +}); + +function updateAccents(a1) { + document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L4-bg', a1 + "ff", "important"); + document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L3-bg', a1 + "c5", "important"); + document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L2-bg', a1 + "8a", "important"); + document.querySelector(':root').style.setProperty('--color-calendar-graph-day-L1-bg', a1 + "54", "important"); + document.querySelector(':root').style.setProperty('--color-accent-emphasis', a1 + "ff", "important"); + document.querySelector(':root').style.setProperty('--color-btn-primary-bg', a1 + "ff", "important"); + document.querySelector(':root').style.setProperty('--color-btn-primary-hover-bg', a1 + "c5", "important"); + document.querySelector(':root').style.setProperty('--color-btn-primary-active-bg', a1 + "8a", "important"); + document.querySelector(':root').style.setProperty('--color-btn-primary-focus-bg', a1 + "8a", "important"); + document.querySelector(':root').style.setProperty('--color-btn-primary-disabled-bg', a1 + "54", "important"); + document.querySelector('.js-highlight-blob').style.setProperty('fill', a1 + "c5", "important"); + document.querySelector('.js-highlight-blob').style.setProperty('stroke', a1 + "ff", "important"); + for (let i = 0; i < document.querySelectorAll('.Progress-item.rounded-2').length; i++) { + document.querySelectorAll('.Progress-item.rounded-2')[i].style.setProperty('background-color', a1 + "ff", "important"); + } +} \ No newline at end of file