cssVarFilledCookies

cssVarFilledCookies.css

@@ -0,0 +1,27 @@
+#cvfc p::after {content:"?"}
+#cvfc:hover p::after {content:"!!!"}
+#cvfc {
+    z-index:10000;
+    position:fixed;
+    top:10px;
+    left:10px;
+    background:whitesmoke;
+    border:1px solid transparent;
+    font-family:monospace;
+    overflow:hidden;
+    border-radius:5px;
+    padding:10px;
+    line-height:auto;
+}
+#cvfc * {color:black !important;font-size:16px; box-sizing:border-box;margin:0}
+#cvfc tr {display:flex;justify-content:space-between; gap:0px;width:inherit}
+#cvfc tr:nth-of-type(2n - 1) {background:white}
+#cvfc td {background:transparent;position:relative;width:inherit;height:18px !important; white-space:nowrap}
+#cvfc td:last-of-type{border-bottom:1px solid transparent; padding-left:10px}
+#cvfc textarea{padding:0;margin:0;resize:none; width:40ch;white-space:nowrap;
+border:none;background:none}
+#cvfc table {display:none; background:none}
+#cvfc:hover table {display:inherit}
+#cvfc tr:hover td:last-of-type {background:lightgray;border-bottom:1px solid black}
+#cvfc:hover {border-color:black; resize:horizontal;}
+

cssVarFilledCookies.js

@@ -0,0 +1,43 @@
+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)
+})
+
+