datguypiko / Firefox-Mod-Blur

Firefox Theme - For dark theme lovers / More compact / Modular / Blur
1.24k stars 59 forks source link

Change Ublock icon to a colorable one #115

Closed alnviana closed 6 months ago

alnviana commented 7 months ago

The current Ublock icon doesn't change it's color as firefox default ones. As so, I suggest to changing this icon to a SVG made so that the colorization takes place.

I think that is better use a icon like that, because everything will have the same colors, even with dark or light themes, with different icon colors.

I made two svg icons that works, one for Ublock and the another is for Bitwarden. I know this issue is about Ublock icon, but since doesn't exist a custom Bitwarden icon yet, and I'm a little lazy to open another Issue, I will send here too. ;P

SVGs ![ublock](https://github.com/datguypiko/Firefox-Mod-Blur/assets/31132223/8f7e13d0-93b5-4695-809d-e60b37aecd7e) ``` data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgIGhlaWdodD0iMTI4IgogICAgd2lkdGg9IjEyOCIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgaWQ9ImcxIgogICAgICAgIGZpbGw9ImNvbnRleHQtZmlsbCIKICAgICAgICBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IgogICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAuOTkzMDI2ODQsMCwwLDAuOTkzMDI2ODQsMC40NDYyODMwNSwwLjQ0NjI4MjExKSIKICAgID4KICAgICAgICA8cGF0aCBpZD0icGF0aDEiCiAgICAgICAgICAgIGQ9Ik0gNjEuMzkyNTc4LDAuMzM5ODQzNzUgQyAzOS4zODc5NTYsMTUuMDA5NTkzIDM0LjEyNjQ3LDE0LjQ4ODI4MSAxMS43MjA3MDMsMTQuNDg4MjgxIDkuMTI1MDY4MiwxNC40ODgyNTIgNy4wMjA1ODEsMTYuNTkxODY1IDcuMDE5NTMxMiwxOS4xODc1IGMgMTBlLTgsMzcuMzQyOTQxIC0wLjMwNDYwMDYsNTYuNTE1ODAxIDcuMDMxMjQ5OCw3MS4xODc1IDcuMzM1ODUxLDE0LjY3MTcgMjEuNDc3MTI3LDIyLjUxNzkxIDQ3LjYxNzE4OCwzNy40NTUwOCAwLDAgMS4xMjI1NzEsMC42MTkzNCAyLjMzMjAzMSwwLjYxOTM0IDEuMjAxNTkzLDAgMi4zMzIwMzEsLTAuNjE5MzQgMi4zMzIwMzEsLTAuNjE5MzQgQyA5Mi40NzIwOSwxMTIuODkyOTEgMTA2LjYxMzM3LDEwNS4wNDY3IDExMy45NDkyMiw5MC4zNzUgYyA3LjMzNTg1LC0xNC42NzE2OTkgNy4wMzEyNSwtMzMuODQ0NTU5IDcuMDMxMjUsLTcxLjE4NzUgLTEwZS00LC0yLjU5NTYzNCAtMi4xMDU1NCwtNC42OTkyNDcgLTQuNzAxMTcsLTQuNjk5MjE5IC0yMi40MDU3NzQsMCAtMjcuNjY3MjY0LDAuNTIxMzExIC00OS42NzE4NzgsLTE0LjE0ODQzNzI1IDAsMCAtMS4zODQ2NDMsLTAuNzkzMTkzNDYgLTIuNjA3NDIzLC0wLjc4OTI1OTcxIC0xLjIyMjc3NCwwLjAwMzkzNCAtMi42MDc0MjEsMC43ODkyNTk3MSAtMi42MDc0MjEsMC43ODkyNTk3MSB6IE0gNjQsOS44MDY2NDA2IGMgMTkuMTU0MzY3LDEyLjMzOTY5ODQgMjkuNDg4OTE0LDEzLjgyODE3NjQgNDcuNTU0NjksMTMuOTgwNDY4NCAtMC4wMzc4LDMzLjkxNTc4OSAtMC41NDc0NSw1MS40NTAzNyAtNi4wMTM2Nyw2Mi4zODI4MTMgQyAxMDAuMDAyNjIsOTcuMjQ2NzE2IDg4LjMyMzc0MywxMDQuMzg5MDQgNjQsMTE4LjMxMjUgMzkuNjc2MjU2LDEwNC4zODkwNCAyNy45OTczODIsOTcuMjQ2NzE2IDIyLjQ1ODk4NCw4Ni4xNjk5MjIgMTYuOTkyNzYyLDc1LjIzNzQ3OSAxNi40ODMxMTYsNTcuNzAyODk4IDE2LjQ0NTMxMiwyMy43ODcxMDkgMzQuNTExMDgzLDIzLjYzNDgxNyA0NC44NDU2MjgsMjIuMTQ2MzM5IDY0LDkuODA2NjQwNiBaIgogICAgICAgIC8+CiAgICAgICAgPGcgaWQ9ImcyIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjAzMjE5NzYsMCwwLDEuMDMyMTk3NiwtMi4wNjA2NDcxLC0xLjg5MjQ3NTMpIj4KICAgICAgICAgICAgPHBhdGggaWQ9InBhdGgyIgogICAgICAgICAgICAgICAgZD0ibSA4MS43MjUyMyw4MS40NzE5NDUgYyAwLDExLjAxOTgyOCAtNC45OTEwMDMsMTYuMDI4ODQxIC0xNS45NzEyMSwxNi4wMjg4NDEgLTEwLjk4MDIwNywwIC0xNS45NzEyMSwtNS4wMDkwMTMgLTE1Ljk3MTIxLC0xNi4wMjg4NDEgViA1Ny40Mjg2ODMgaCA3Ljk4NTYwNSB2IDI0LjA0MzI2MiBjIDAsNy4wMTI2MTggMC45OTgyLDguMDE0NDIxIDcuOTg1NjA1LDguMDE0NDIxIDYuOTg3NDA0LDAgNy45ODU2MDUsLTEuMDAxODAzIDcuOTg1NjA1LC04LjAxNDQyMSBWIDU3LjQyODY4MyBoIDcuOTg1NjA1IHoiCiAgICAgICAgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjAwMTgwMjYsMCwwLDAuOTk4MjAwNjcsLTE3Ljg3MjU0OCwtMTcuMzI1MzUpIgogICAgICAgICAgICAvPgogICAgICAgICAgICA8cGF0aCBpZD0icGF0aDMiCiAgICAgICAgICAgICAgICBkPSJtIDEwMi4xMjMwNSw2Ni4zMjYxNzIgYyAtOC4yNDg3MzIsMCAtMTUuMDAwMDAzLDYuNzUxMjcxIC0xNS4wMDAwMDMsMTUgMCw4LjI0ODcyOSA2Ljc1MTI3MSwxNSAxNS4wMDAwMDMsMTUgOC4yNDg3MywwIDE1LC02Ljc1MTI3MSAxNSwtMTUgMCwtOC4yNDg3MjkgLTYuNzUxMjcsLTE1IC0xNSwtMTUgeiBtIDAsNiBjIDUuMDA2MDksMCA5LDMuOTkzOTA4IDksOSAwLDUuMDA2MDkyIC0zLjk5MzkxLDkgLTksOSAtNS4wMDYwOTQsMCAtOS4wMDAwMDMsLTMuOTkzOTA4IC05LjAwMDAwMywtOSAwLC01LjAwNjA5MiAzLjk5MzkwOSwtOSA5LjAwMDAwMywtOSB6IgogICAgICAgICAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzM1LDAsMCwxLjMzMzMzMzQsLTYwLjE2MzQxLC00OC40MzM4MTEpIgogICAgICAgICAgICAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg== ``` ![bitwarden](https://github.com/datguypiko/Firefox-Mod-Blur/assets/31132223/032686c2-03fb-482b-aab1-98905ef97d39) ``` data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgIGhlaWdodD0iNTEyIgogICAgd2lkdGg9IjUxMiIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcKICAgICAgICBpZD0iZzEiCiAgICAgICAgZmlsbD0iY29udGV4dC1maWxsIgogICAgICAgIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogICAgICAgIDxwYXRoCiAgICAgICAgICAgIGlkPSJwYXRoMSIKICAgICAgICAgICAgZD0iTSA0MDUuOTc5OCwyNzcuOTc5OCBWIDYzLjM1MzU0IEggMjU2LjAwMDAxIFYgNDQzLjQ3NDc1IEMgMzE2Ljc2NzY3LDQwNy4yNzI3MyA0MDQuNjg2ODYsMzQ3Ljc5Nzk4IDQwNS45Nzk4LDI3Ny45Nzk4IFogTSA0NjkuMzMzMzMsMjEuOTc5ODAxIFYgMjc3Ljk3OTggQyA0NjkuMzMzMzMsNDE1LjAzMDMgMjcyLjgwODA5LDUxMiAyNTYuMDAwMDEsNTEyIDIzOS4xOTE5Miw1MTIgNDIuNjY2NjY3LDQxNS4wMzAzIDQyLjY2NjY2NywyNzcuOTc5OCBWIDIxLjk3OTgwMSBjIDAsMCAwLC0yMS45Nzk4MDEgMjEuOTc5Nzk3LC0yMS45Nzk4MDEgSCA0NDcuMzUzNTQgYyAwLDAgMjEuOTc5NzksMCAyMS45Nzk3OSwyMS45Nzk4MDEgeiIKICAgICAgICAvPgogICAgPC9nPgo8L3N2Zz4K ```

An example that shows both icons working: 2024-02-13_17-32-08_firefox

datguypiko commented 7 months ago

You need to have svg.context-properties.content.enabled enabled for this to work. Which I dont want to leave average user to do because they wont and they will have it black. It's the same issue with other buttons I changed. That's why all of them are now static color.

image

alnviana commented 6 months ago

Oh, i didn't know that. I agree with you, so I'm closing this. Thanks for the information and attention. :)