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)
})