user-friendly color customization

_locales/en/messages.json

···
     "uncensor_adult_content_automatically": { "message": "Uncensor media with nudity content warning automatically" },
     "uncensor_sensitive_content_automatically": { "message": "Uncensor media with sensitive content content warning automatically" },
     "replying_to_user": { "message": "Replying to $SCREEN_NAME$", "placeholders": { "screen_name": { "content": "CoolPerson2000" } } },
-    "content_warnings": { "message": "Content warnings" }
+    "content_warnings": { "message": "Content warnings" },
+    "transparency": { "message": "Transparency" },
+    "reset": { "message": "Reset" },
+    "reset_all": { "message": "Reset all" },
+    "import": { "message": "Import", "note": "Verb" },
+    "export": { "message": "Export", "note": "Verb" },
+    "reset_colors_sure": { "message": "Are you sure you want to reset all colors?" }
 }

_locales/ru/messages.json

···
     "adult_content": { "message": "Контент для взрослых" },
     "sensitive_content": { "message": "Чувствительный контент" },
     "replying_to_user": { "message": "Ответ $SCREEN_NAME$", "placeholders": { "screen_name": { "content": "CoolPerson2000" } } },
-    "content_warnings": { "message": "Содержание" }
+    "content_warnings": { "message": "Содержание" },
+    "transparency": { "message": "Прозрачность" },
+    "reset": { "message": "Скинуть" },
+    "reset_all": { "message": "Скинуть всё" },
+    "import": { "message": "Импортировать" },
+    "export": { "message": "Экспортировать" },
+    "reset_colors_sure": { "message": "Вы уверены что хотите скинуть все цвета до умолчания?" }
 }

_locales/uk/messages.json

···
     "adult_content": { "message": "Контент для дорослих" },
     "sensitive_content": { "message": "Чутливий контент" },
     "replying_to_user": { "message": "Відповідь $SCREEN_NAME$", "placeholders": { "screen_name": { "content": "CoolPerson2000" } } },
-    "content_warnings": { "message": "Зміст" }
+    "content_warnings": { "message": "Зміст" },
+    "transparency": { "message": "Прозорість" },
+    "reset": { "message": "Скинути" },
+    "reset_all": { "message": "Скинути все" },
+    "import": { "message": "Імпортувати" },
+    "export": { "message": "Експортувати" },
+    "reset_colors_sure": { "message": "Ви впевнені що хочете скинути всі кольори до замовчування?" }
 }

layouts/header/script.js

···
         }
     }
 };
+const customCSSBus = new BroadcastChannel('custom_css_bus');
+customCSSBus.onmessage = function (e) {
+    if(e.data.type === 'vars') {
+        switchDarkMode(isDarkModeEnabled);
+    } else if(e.data.type === 'css') {
+        updateCustomCSS();
+    }
+};
+
 const themeBus = new BroadcastChannel('theme_bus');
 themeBus.onmessage = function (e) {
     isDarkModeEnabled = e.data[0];

layouts/header/style.css

···
     border-color: var(--border);
 }
 .nice-button:disabled {
-    color: lightgray !important;
+    color: gray !important;
     cursor: not-allowed;
 }
 .nice-button:disabled:before {
-    color: lightgray !important;
+    color: gray !important;
 }
 #navbar-user-menu {
     min-width: 130px;

layouts/home/script.js

···
                     <h2 style="margin:0;margin-bottom:10px;color:var(--darker-gray);font-weight:300">(OldTwitter) ${LOC.new_version.message} - ${chrome.runtime.getManifest().version}</h2>
                     <span id="changelog" style="font-size:14px;color:var(--default-text-color)">
                         <ul>
+                            <li>Added user-friendly color customization for all colors in the extension.</li>
                             <li>Added support for Community Notes.</li>
                             <li>Added option to see bookmark count.</li>
                             <li>Added ability to pin Profile, Bookmarks and Lists on the navbar.</li>

layouts/home/style.css

···
     position: relative
 }
 
-.nice-button {
-    background-color: var(--darker-background-color);
-    background-image: linear-gradient(var(--background-color), var(--darker-background-color));
-    background-repeat: no-repeat;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    color: var(--almost-black);
-    color: var(--darker-gray);
-    cursor: pointer;
-    font: 700 14px/normal var(--font);
-    padding: 8px 16px
-}
-
-.nice-button:hover:not([disabled]) {
-    background-color: var(--border);
-    background-image: linear-gradient(var(--background-color), var(--border));
-    border-color: var(--border);
-    color: var(--almost-black);
-    text-decoration: none
-}
-
-.nice-button:disabled {
-    color: lightgray !important;
-    cursor: not-allowed
-}
-
-.nice-button:disabled:before {
-    color: lightgray !important
-}
-
 .tweet-top {
     font-size: 13px;
     margin-bottom: 7px;

layouts/settings/index.html

···
                     <button class="nice-button" id="sync">__MSG_sync__</button>
                     <hr>
                     <h1>__MSG_colors__</h1><br>
-                    <div class="setting" id="colors">
+                    <div class="setting" id="colors"></div>
+                    <div class="setting" style="margin-top:10px">
+                        <button class="nice-button" id="reset-all-colors">__MSG_reset_all__</button>
+                        <button class="nice-button" id="import-colors">__MSG_import__</button>
+                        <button class="nice-button" id="export-colors">__MSG_export__</button>
                     </div>
                     <br>
                     <hr>

layouts/settings/script.js

···
             customCSS: customCSS.value
         }, () => {
             let event = new CustomEvent('customCSS', { detail: customCSS.value });
+            customCSSBus.postMessage({type: 'css'});
             document.dispatchEvent(event);
         });
     });
···
     }
 
     // Colors
+    let colorsDiv = document.getElementById('colors');
+    let theme = getThemeVariables(isDarkModeEnabled);
+    let defaultVars = parseVariables(theme);
+    let customVars = parseVariables(vars.customCSSVariables);
+
+    for(let v in defaultVars) {
+        try {
+            let color = parseCssColor(customVars[v] ? customVars[v] : defaultVars[v]);
+            if(!color || v === '--link-color' || v === '--favorite-icon-color') continue;
+
+            let div = document.createElement('div');
+            div.classList.add('color-div');
+            div.innerHTML = `
+                <input class="color-value" type="color" data-var="${v}" value="${rgb2hex(...color.values)}">
+                <input class="color-transparency" title="${LOC.transparency.message}" type="range" min="0" max="1" step="0.01" value="${color.alpha}">
+                <span class="color-name">${v[2].toUpperCase() + v.slice(3).replace(/-/g, ' ')}</span>
+                <button class="color-reset nice-button"${!customVars[v] ? ' disabled' : ''}>Reset</button>
+            `;
+            colorsDiv.append(div);
+            function colorUpdate() {
+                let colorValue = div.querySelector('.color-value');
+                let colorTransparency = div.querySelector('.color-transparency');
+
+                customVars[colorValue.dataset.var] = `rgba(${hex2rgb(colorValue.value).join(', ')}, ${colorTransparency.value})`;
+                let css = Object.entries(customVars).map(([k, v]) => `${k}: ${v};`).join('\n');
+                chrome.storage.sync.set({
+                    customCSSVariables: css
+                }, () => {
+                    vars.customCSSVariables = css;
+                    root.style.setProperty(colorValue.dataset.var, customVars[colorValue.dataset.var]);
+                    customCSSBus.postMessage({type: 'vars'});
+                    div.querySelector('.color-reset').disabled = false;
+                });
+            }
+            div.querySelector('.color-value').addEventListener('change', colorUpdate);
+            div.querySelector('.color-transparency').addEventListener('change', colorUpdate);
+            div.querySelector('.color-reset').addEventListener('click', () => {
+                delete customVars[v];
+                let css = Object.entries(customVars).map(([k, v]) => `${k}: ${v};`).join('\n');
+                chrome.storage.sync.set({
+                    customCSSVariables: css
+                }, () => {
+                    vars.customCSSVariables = css;
+                    root.style.setProperty(v, defaultVars[v]);
+                    customCSSBus.postMessage({type: 'vars'});
+                    div.querySelector('.color-reset').disabled = true;
+                    let defColor = parseCssColor(defaultVars[v]);
+                    div.querySelector('.color-value').value = rgb2hex(...defColor.values);
+                    div.querySelector('.color-transparency').value = defColor.alpha;
+                });
+            });
+    
+        } catch(e) {
+            console.error(e);
+        }
+    }
+    document.getElementById('reset-all-colors').addEventListener('click', () => {
+        let sure = confirm(LOC.reset_colors_sure.message);
+        if(!sure) return;
+        chrome.storage.sync.set({
+            customCSSVariables: ''
+        }, () => {
+            vars.customCSSVariables = '';
+            customCSSBus.postMessage({type: 'vars'});
+            let resetButtons = document.querySelectorAll('.color-reset');
+            for(let i = 0; i < resetButtons.length; i++) {
+                if(!resetButtons[i].disabled) {
+                    resetButtons[i].click();
+                }
+            }
+        });
+    });
+    document.getElementById('export-colors').addEventListener('click', () => {
+        let a = document.createElement('a');
+        a.href = URL.createObjectURL(new Blob([vars.customCSSVariables], { type: 'text/css' }));
+        a.download = 'custom_colors.css';
+        a.click();
+    });
+    document.getElementById('import-colors').addEventListener('click', () => {
+        let input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.css';
+        input.addEventListener('change', () => {
+            let file = input.files[0];
+            if(!file) return;
+            let reader = new FileReader();
+            reader.onload = () => {
+                let css = reader.result;
+                chrome.storage.sync.set({
+                    customCSSVariables: css
+                }, () => {
+                    vars.customCSSVariables = css;
+                    customCSSBus.postMessage({type: 'vars'});
+                    location.reload();
+                });
+            };
+            reader.readAsText(file);
+        });
+        input.click();
+    });
 
 
     // Run

layouts/settings/style.css

···
     cursor: pointer;
 }
 
-.nice-button {
-    color: var(--almost-black);
-    background-color: var(--darker-background-color);
-    background-image: linear-gradient(var(--background-color),var(--darker-background-color));
-    background-repeat: no-repeat;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    color: var(--darker-gray);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: bold;
-    line-height: normal;
-    padding: 8px 16px;
-    font-family: var(--font);
-}
-.nice-button:hover:not([disabled]) {
-    color: var(--almost-black);
-    text-decoration: none;
-    background-color: var(--border);
-    background-image: linear-gradient(var(--background-color),var(--border));
-    border-color: var(--border);
-}
-.nice-button:disabled {
-    color: lightgray !important;
-    cursor: not-allowed;
-}
-.nice-button:disabled:before {
-    color: lightgray !important;
-}
-
 #wtf {
     padding: 10px;
     width: 250px;
···
 }
 .user-stat-div:hover {
     text-decoration: none !important;
+}
+.color-transparency {
+    width: 50px;
+}
+.color-reset {
+    float: right;
+    padding-bottom: 3px !important;
+    padding-top: 2px !important;
 }

libraries/parseCssColor.js

···
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e=e||self).parseCssColor=r()}(this,(function(){"use strict";var e={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},r=new RegExp(/^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/,"i"),n="-?\\d*(?:\\.\\d+)",a="("+n+"?)",l="("+n+"?%)",t=("^\n  hsla?\\(\n    \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*,\n    \\s*"+l+"\\s*,\n    \\s*"+l+"\\s*\n    (?:,\\s*"+"(-?\\d*(?:\\.\\d+)?%?)\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g,""),s=new RegExp(t),i=("^\n  hsla?\\(\n    \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*\n    \\s+"+l+"\n    \\s+"+l+"\n    \\s*(?:\\s*\\/\\s*"+"(-?\\d*(?:\\.\\d+)?%?)\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g,""),o=new RegExp(i),d=("^\n  rgba?\\(\n    \\s*"+a+"\\s*,\n    \\s*"+a+"\\s*,\n    \\s*"+a+"\\s*\n    (?:,\\s*"+"(-?\\d*(?:\\.\\d+)?%?)\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g,""),u=new RegExp(d),g=("^\n  rgba?\\(\n    \\s*"+l+"\\s*,\n    \\s*"+l+"\\s*,\n    \\s*"+l+"\\s*\n    (?:,\\s*"+"(-?\\d*(?:\\.\\d+)?%?)\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g,""),p=new RegExp(g),h=("^\n  rgba?\\(\n    \\s*"+a+"\n    \\s+"+a+"\n    \\s+"+a+"\n    \\s*(?:\\s*\\/\\s*"+"(-?\\d*(?:\\.\\d+)?%?)\\s*)?\n  \\)\n$\n").replace(/\n|\s/g,""),c=new RegExp(h),m=("^\n  rgba?\\(\n    \\s*"+l+"\n    \\s+"+l+"\n    \\s+"+l+"\n    \\s*(?:\\s*\\/\\s*"+"(-?\\d*(?:\\.\\d+)?%?)\\s*)?\n  \\)\n$\n").replace(/\n|\s/g,""),f=new RegExp(m),b=new RegExp(/^transparent$/,"i"),y=new RegExp("[^#a-f\\d]","gi"),w=new RegExp("^#?[a-f\\d]{3}[a-f\\d]?$|^#?[a-f\\d]{6}([a-f\\d]{2})?$","i"),k=function(e,r,n){return Math.min(Math.max(r,e),n)},v=function(e){var r=e;return"number"!=typeof r&&(r=r.endsWith("%")?255*parseFloat(r)/100:parseFloat(r)),k(Math.round(r),0,255)},x=function(e){return k(parseFloat(e),0,100)};function E(e){var r=e;return"number"!=typeof r&&(r=r.endsWith("%")?parseFloat(r)/100:parseFloat(r)),k(r,0,1)}function R(e){var r=function(e,r){if(void 0===r&&(r={}),"string"!=typeof e||y.test(e)||!w.test(e))throw new TypeError("Expected a valid hex string");var n=1;8===(e=e.replace(/^#/,"")).length&&(n=Number.parseInt(e.slice(6,8),16)/255,e=e.slice(0,6)),4===e.length&&(n=Number.parseInt(e.slice(3,4).repeat(2),16)/255,e=e.slice(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var a=Number.parseInt(e,16),l=a>>16,t=a>>8&255,s=255&a,i="number"==typeof r.alpha?r.alpha:n;return"array"===r.format?[l,t,s,i]:"css"===r.format?"rgb("+l+" "+t+" "+s+(1===i?"":" / "+Number((100*i).toFixed(2))+"%")+")":{red:l,green:t,blue:s,alpha:i}}(e,{format:"array"});return $([null,r[0],r[1],r[2],r[3]])}function $(e){var r=e[1],n=e[2],a=e[3],l=e[4];return void 0===l&&(l=1),{type:"rgb",values:[r,n,a].map(v),alpha:E(null===l?1:l)}}
+/**
+	 * parse-css-color
+	 * @version v0.2.1
+	 * @link http://github.com/noeldelgado/parse-css-color/
+	 * @license MIT
+	 */return function(n){if("string"!=typeof n)return null;var a=r.exec(n);if(a)return R(a[0]);var l=o.exec(n)||s.exec(n);if(l)return function(e){var r=e[1],n=e[2],a=e[3],l=e[4];void 0===l&&(l=1);var t=r;return{type:"hsl",values:[t=t.endsWith("turn")?360*parseFloat(t)/1:t.endsWith("rad")?Math.round(180*parseFloat(t)/Math.PI):parseFloat(t),x(n),x(a)],alpha:E(null===l?1:l)}}(l);var t=c.exec(n)||f.exec(n)||u.exec(n)||p.exec(n);if(t)return $(t);if(b.exec(n))return $([null,0,0,0,0]);var i=e[n.toLowerCase()];return i?$([null,i[0],i[1],i[2],1]):null}}));

pack.js

···
         {
           "matches": ["https://twitter.com/*"],
           "exclude_matches": ["https://twitter.com/*?*newtwitter=true*", "https://twitter.com/settings/download_your_data", "https://twitter.com/i/flow/login*"],
-          "js": ["scripts/config.js", "scripts/helpers.js", "scripts/apis.js", "scripts/injection.js", "libraries/twemoji.min.js", "libraries/custom-elements.min.js", "libraries/emojipicker.js", "libraries/tinytoast.js"],
+          "js": ["scripts/config.js", "scripts/helpers.js", "scripts/apis.js", "scripts/injection.js", "libraries/parseCssColor.js", "libraries/twemoji.min.js", "libraries/custom-elements.min.js", "libraries/emojipicker.js", "libraries/tinytoast.js"],
           "all_frames": true,
           "run_at": "document_start"
         },

scripts/injection.js

···
         });
     });
     if(data.customCSSVariables) {
-        let csv = data.customCSSVariables.split('\n');
-        csv.forEach(line => {
-            let [name, value] = line.split(':');
-            value = value.trim();
-            if(value.endsWith(';')) value = value.slice(0, -1);
-            root.style.setProperty(name, value);
-        });
+        let csv = parseVariables(data.customCSSVariables);
+        for(let i in csv) {
+            root.style.setProperty(i, csv[i]);
+        }
     }
 }
-function switchDarkMode(enabled) {
-    let root = document.querySelector(":root");
+
+function getThemeVariables(enabled) {
     let theme;
     if(enabled) {
         if(vars.pitchBlack) {
···
             --menu-bg: rgba(255,255,255,0.98);
         `;
     }
-    let styles = theme.split('\n').map(i => i.trim()).filter(i => i).map(i => i.split(':'));
+
+    return theme;
+}
+function parseVariables(vars) {
+    let obj = {};
+    let styles = vars.split('\n').map(i => i.trim()).filter(i => i).map(i => i.split(':'));
     styles.forEach(style => {
         if(style[1].endsWith(";")) style[1] = style[1].slice(0, -1);
-        root.style.setProperty(style[0], style[1]);
+        obj[style[0].trim()] = style[1].trim();
     });
+    return obj;
+}
+
+function switchDarkMode(enabled) {
+    let root = document.querySelector(":root");
+    let theme = getThemeVariables(enabled);
+    let themeVars = parseVariables(theme);
+    for(let i in themeVars) {
+        root.style.setProperty(i, themeVars[i]);
+    }
     updateCustomCSSVariables();
 }
 
···
             enableHashflags: false
         }, () => {});
     }
+    if(typeof(vars.customCSSVariables) !== 'string') {
+        vars.customCSSVariables = '';
+        chrome.storage.sync.set({
+            customCSSVariables: ''
+        }, () => {});
+    }
     if(typeof(vars.copyLinksAs) !== 'string') {
         vars.copyLinksAs = 'twitter.com';
         chrome.storage.sync.set({
···
     if(typeof(vars.tweetFont) !== 'string') {
         vars.tweetFont = 'Arial';
         chrome.storage.sync.set({
-            tweetFont: 'Arial'
+            tweetFont: vars.font
         }, () => {});
     }
     if(typeof(vars.showOriginalImages) !== 'boolean') {
···
     chrome.runtime.sendMessage({
         action: "inject",
         data: [
+            "libraries/parseCssColor.js",
             "libraries/twemoji.min.js",
             "layouts/header/script.js",
             `layouts/${page.name}/script.js`,