You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

43 lines
1.3 KiB

function filterEntriesWithCSSVariables(obj) {
return Object.entries(obj).filter(([key, value]) => {
return typeof value === 'string' && value.startsWith('--');
});
}
const style = getComputedStyle(document.documentElement)
const cssVars = filterEntriesWithCSSVariables(style).map((v) => v[1]);
const container = document.createElement('section')
container.innerHTML = '<p></p>'
container.setAttribute('id','cvfc')
document.body.appendChild(container)
const table = document.createElement('table')
container.appendChild(table)
cssVars.reverse().forEach((cssVar) => {
let val = style.getPropertyValue(cssVar)
document.body.style.setProperty(cssVar,localStorage.getItem(cssVar) || val)
const tr = document.createElement('tr')
const key = document.createElement('td')
const value = document.createElement('td')
const value_textArea = document.createElement('textarea')
value_textArea.setAttribute('rows',1)
value_textArea.addEventListener("input", function(){
localStorage.setItem(cssVar, this.value);
document.body.style.setProperty(cssVar, this.value);
});
value_textArea.innerHTML = localStorage.getItem(cssVar) || val
value.appendChild(value_textArea)
key.innerHTML = cssVar
tr.appendChild(key)
tr.appendChild(value)
table.appendChild(tr)
})