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
43 lines
1.3 KiB
4 weeks ago
|
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)
|
||
|
|
})
|
||
|
|
|