From 3f135f0adc5b41ed5066ca5432a4c299b9c3aaae Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 28 Jun 2017 13:49:04 +0300
Subject: [PATCH] option to switch toolbar icon sets

---
 .eslintrc                 |   2 +-
 _locales/en/messages.json |   9 +++++++++
 background.js             |  10 ++++++----
 dom.js                    |   9 +++++----
 images/icon/16.png        | Bin 294 -> 617 bytes
 images/icon/16w.png       | Bin 296 -> 676 bytes
 images/icon/16x.png       | Bin 262 -> 583 bytes
 images/icon/light/16.png  | Bin 0 -> 654 bytes
 images/icon/light/16w.png | Bin 0 -> 671 bytes
 images/icon/light/16x.png | Bin 0 -> 358 bytes
 images/icon/light/19.png  | Bin 0 -> 654 bytes
 images/icon/light/19w.png | Bin 0 -> 671 bytes
 images/icon/light/19x.png | Bin 0 -> 358 bytes
 images/icon/light/32.png  | Bin 0 -> 654 bytes
 images/icon/light/32w.png | Bin 0 -> 671 bytes
 images/icon/light/32x.png | Bin 0 -> 358 bytes
 images/icon/light/38.png  | Bin 0 -> 654 bytes
 images/icon/light/38w.png | Bin 0 -> 671 bytes
 images/icon/light/38x.png | Bin 0 -> 358 bytes
 options/index.css         |   8 ++++++++
 options/index.html        |  24 ++++++++++++++++++++++++
 options/index.js          |  24 ++++++++++++++++++++++++
 prefs.js                  |   4 ++++
 23 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 images/icon/light/16.png
 create mode 100644 images/icon/light/16w.png
 create mode 100644 images/icon/light/16x.png
 create mode 100644 images/icon/light/19.png
 create mode 100644 images/icon/light/19w.png
 create mode 100644 images/icon/light/19x.png
 create mode 100644 images/icon/light/32.png
 create mode 100644 images/icon/light/32w.png
 create mode 100644 images/icon/light/32x.png
 create mode 100644 images/icon/light/38.png
 create mode 100644 images/icon/light/38w.png
 create mode 100644 images/icon/light/38x.png

diff --git a/.eslintrc b/.eslintrc
index af049f37..6441aad4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -215,7 +215,7 @@ rules:
   no-unreachable: [2]
   no-unsafe-finally: [2]
   no-unsafe-negation: [2]
-  no-unused-expressions: [2]
+  no-unused-expressions: [1]
   no-unused-labels: [0]
   no-unused-vars: [1, {args: after-used, vars: local, argsIgnorePattern: ^_}]
   no-use-before-define: [2, nofunc]
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index c6a336cf..4fe186cf 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -681,6 +681,15 @@
   "optionsUpdateImportNote": {
     "message": "When importing style backups from old version or from Stylish, do a one-time check for updates manually in the styles manager to ensure all styles are updated."
   },
+  "optionsCustomizeIcon": {
+    "message": "Toolbar icon"
+  },
+  "optionsIconLight": {
+    "message": "Light browser themes"
+  },
+  "optionsIconDark": {
+    "message": "Dark browser themes"
+  },
   "optionsCustomizeBadge": {
     "message": "Badge on the toolbar icon"
   },
diff --git a/background.js b/background.js
index ea7db689..7b9daa43 100644
--- a/background.js
+++ b/background.js
@@ -258,15 +258,17 @@ function updateIcon(tab, styles) {
     const postfix = disableAll ? 'x' : numStyles == 0 ? 'w' : '';
     const color = prefs.get(disableAll ? 'badgeDisabled' : 'badgeNormal');
     const text = prefs.get('show-badge') && numStyles ? String(numStyles) : '';
+    const iconset = ['', 'light/'][prefs.get('iconset')] || '';
+    const path = 'images/icon/' + iconset;
     chrome.browserAction.setIcon({
       tabId: tab.id,
       path: {
         // Material Design 2016 new size is 16px
-        16: `images/icon/16${postfix}.png`,
-        32: `images/icon/32${postfix}.png`,
+        16: `${path}16${postfix}.png`,
+        32: `${path}32${postfix}.png`,
         // Chromium forks or non-chromium browsers may still use the traditional 19px
-        19: `images/icon/19${postfix}.png`,
-        38: `images/icon/38${postfix}.png`,
+        19: `${path}19${postfix}.png`,
+        38: `${path}38${postfix}.png`,
         // TODO: add Edge preferred sizes: 20, 25, 30, 40
       },
     }, () => {
diff --git a/dom.js b/dom.js
index 139619cc..be081107 100644
--- a/dom.js
+++ b/dom.js
@@ -12,16 +12,17 @@ for (const type of [NodeList, NamedNodeMap, HTMLCollection, HTMLAllCollection])
 }
 
 // add favicon in Firefox
-if (/Firefox/.test(navigator.userAgent)) {
-  for (const size of [128, 38, 32, 19, 16]) {
+navigator.userAgent.includes('Firefox') && setTimeout(() => {
+  const iconset = ['', 'light/'][prefs.get('iconset')] || '';
+  for (const size of [38, 32, 19, 16]) {
     document.head.appendChild($element({
       tag: 'link',
       rel: 'icon',
-      href: `/images/icon/${size}.png`,
+      href: `/images/icon/${iconset}${size}.png`,
       sizes: size + 'x' + size,
     }));
   }
-}
+});
 
 
 function onDOMready() {
diff --git a/images/icon/16.png b/images/icon/16.png
index fa6c32b32cb5d195e12dd25c9df02ea4d082a520..48252ae4ef41957af6cbd55894c5cd3cc2735b2f 100644
GIT binary patch
delta 592
zcmV-W0<Zn10_g;hB!32COGiWi{{a60|De66lK=n!32;bRa{vGf6951U69E94oEQKA
z00(qQO+^Rc1_~Af5-|>n3IG5B_DMuRR5;6xlgn#UQ4q#|_oQh}ZXS@dC5zfdrFCOn
z2o-#Tx)J;fV&enT5?uILh#TFAAnt^^s1K;5f)o@til~bsl7EH@t%8V(8zrR;+Qi&E
z8*Xy0i-b#KVw2e%m^1Uu$M?-BgXtu~?Ft~}Btkf8Cn{3IB0^HjJW&SINfcGplK1aA
zl2Z>vJN@3!INsA|Ge)uKR%#54Z@YJy1)cqVyrFT_y?d~@+yIml34Tr7Ci~_!0NdX$
zBDIXt@h`fyZ+|lb52q0hwJzV`^MPn2*Z|-;F={ri+_+Bu-CH`hY{j-?Cxy9KYXECs
zKLCcVlb@ZXlGP~wS)jPM&{U5GPHUe(0ial|_#e;U2?P-~`+o%$!tF9v?@gMC)O3Wx
z#}8F{y}k5Yyu`K_ukehXs%!jxX9D4N8KUN^`62T;;(y^W61Q%m$Cs*894bBMFVG!6
zXVxheOZ9DL<N9zOJC5)26@)`Y7K(g7d;p|0ZEU$X*_Y4B%|)wB>^3Z_vxSX;Ae)AV
z$<NOti+Q>R{5TID0-*Hs2bHY0F@SyFe$<f>oJWq<<&CuxE7z{J-h<Sm2<7Evx`u|T
z`sQ+!zDa%|{p>0FQoK2UQLbb>C(pQ2ktqtXD1}&bLtVPZ!x*}*t#=_<J7;@a=PYFw
eA;zSZnfVL;@w$4abb!kM0000<MNUMnLSTX=OcRCx

delta 267
zcmV+m0rdXq1f~LzB!BHmL_t(|+GAh<0+si#8&p5M{Z9%8>0y8YkN|_X<9`MtZQ?Lc
zEm#jO12ifs{%f2)`(NYNF9d$}?7zm8DTEEsC@VwNh>VFcV9y>D4H`v75IlSKe~q*>
zA`G~E8EybsVW6>gEy4vaU;fuvu;9N&YAS96;F@6uBq#sZxPN{f)Bmehp%?%+1l<65
zOw678U*o|8?1ms4Kqwt(ba(&P`28D#Vc|k39bg!8>=^L|XslTAU*ps%h!-YIKy|^R
zM?@HK^(sOGI&N+z!hpWM{~Cu5{nxmC8*C#uMmBH$uaTcmd|n_qGf|SA0kX9JJGETi
RjsO4v07*qoL<FuvV1i`JbBX`}

diff --git a/images/icon/16w.png b/images/icon/16w.png
index 8ea89b0a4901b83510d44c70fee398eb62d49b01..5dd2cffb50b30643835829aacedb8ce2b0e5d87e 100644
GIT binary patch
delta 652
zcmV;70(1SS0;C0yB!32COGiWi{{a60|De66lK=n!32;bRa{vGf6951U69E94oEQKA
z00(qQO+^Rc1_~Aj5>;YP4gdfGF-b&0R5;6xlV3<v0Tjl6-h1cWoJ+(ICfdXv3=2)N
zM3d!%E6Ac!i^P<YG6*3k2!ue4z+Nhff-njVg#Ot}I;a&TxPO-Dq!!J<hayuWf@-sE
zciX-6pst*M@;siycg}ad@0<hxhZfBZE6R>USx#jIp@c%;Wxf8XO_0VUfM_(julv@`
z#J-*f{QCK0S#WAv8kJQwt7{vNRs$CjW*M|rmTo4jC;((yvZ+6IoTAb)R;8o>@NH^}
zjw_ewcRWFFFn{oPU=W)iwMlcG=fD}6SzPPt#%MClo1AVoBZ?vbp<pnUm*Oeb9BPPx
zFP>|~)&CMpP7Znb1q{6!Sg_K91{qmv0Ek2)IA1)+@AKgqapM_rFRF<UpZM_p9RNC=
zj*fdhRM*v`HyD-_Rdi_4)~*}ZV-v<ky=>T6NV?ffl7BIoqLQub*?$mK)9}8169Y!V
z3YYEnasfb7wOHZz^fafN8oAnjo{90#02oasnogeL@QLQX)P)&AV>a40<u6LHV&^WJ
z&$M7PnFs~~?A=z1rfE3b9&CctCj9T}p4odDaybDoBqd=?PF~)H>biRJ@(XYez9tk1
zkZH-L#D7{2!1$++_<g?R8x)sWDcn+wwPJhx{nLK7W$8Oelx4z-!u>m)e4U(NZSJ}m
zQT=|#M!obsddTFLae#TY&OMV-Ra+<D?Yzyf%gONU&P&CCh9gA6VdY;J)~l+zTNFik
mCGV`NYETr#UYj6!{{WA7%$yAM%EJHv002ovP6b4+LSTYo)h}59

delta 269
zcmV+o0rLK&1*ig$B!BNoL_t(|+NF~*3WG2dhP{n<@F1d_2;%A_A_xV=O~Jv@L2wWk
zMR3qT1aZ_Wy*7b_##R#Bz_*0_U-FVXNqUWST_4-F!5vUWA_Gk*iUP7M3xU?6%%#A#
zZD^VX_I;<!^9(@{@CBA-F~N6)1VvFW0n;=wVHkq0>wH1mwtrOc(;Z}4Mg_~VKpe-Q
zY1*}bgo!{^Rp|Tvqy98a83C1?1%xPyU>wJ<5=OxL2d?YFaU2+OFWi4{rm8A&L6Rg;
z*EKG|_kHFB(=_n~UDwgT8OL$>0?+fHEK3-M0q=-jB+qj&3`4vZZa33E?feAj)hqL(
T6Q-m90000<MFvhpu0mjfqz8JA

diff --git a/images/icon/16x.png b/images/icon/16x.png
index 9292d0a9f084c4384caa3fbca8a884ec98c9e267..09bea46df4e8b65de622be2d75f9cc02b69c2f57 100644
GIT binary patch
delta 558
zcmV+}0@3}30>=c9B!32COGiWi{{a60|De66lK=n!32;bRa{vGf6951U69E94oEQKA
z00(qQO+^Rc1_~AeE(dzY%m4rZ)Ja4^R5;6xld)?PQ5?rV@14mt<hYbVnrl-EB9=ls
z1YAU2T*S%MB8U`3hvFdk2e`S2o1j=k6goNRAh@`QLdBuQf`2G<sSQmo(2!ixluNny
zb7(zkE}DGD_ulu*m+$xcl$1&USGvYLN^5<JArKn#!`Av9@J>moL?qIDUadMWd|wYE
zu;_W*C=`N}QaN?xK+dnP#}B4$n?=v#tn1=h765*?%j2CLJ~SEtd_Lr<6TRwFw#~Dd
z8Jr{H9~9DQEPtgEZW00u`Fu=%u)WQvW|Na6Bg|*BtOmhgfhpSt;6Q|rjRrv!vDR+0
z)^7LBBN5v7P6vRLQoNj<Wg(v@qyL?)24uNfjSp68HNNfb0gz9nxKk|hW^Rsa<Kur3
zpHwOUq5+IZe9?{~mNqweST0izLjWAhVrg=cTN4ur>wkS~JdVp_W85tkaV(2{W4N@j
zff0#o95|f!^*Uc#EdVlF<Miawx5oKwmanZA`^GSB+gxy60DgrbK@|O8;9M@p8OPz`
z=xFc$xxckFcn2%B8kI2QbS85csxkcRba=bF8;6<@h(v<xg@XIa_gM{szKc7Ko1Vvk
wNHe8W+$X|SBl1)$l^f<a8j-qI>NfEDH?hdD^z>qm?f?J)07*qoM6N<$f+oKH-v9sr

delta 234
zcmV<G02Tko1cm~TB!A6GL_t(|+GAh<g1-g^4gU=c{*!`1dKh2;BoG0ltcb)QwIDq>
z4VVW~z{d9fzr8&ItEv4zK#T!%K$6HBkuXsPd_pn+q+tdWp910zVhs4l&kr|%tT1?h
z>;+BD{}+&K#%cgeGt7V%kSm0RG5miA%>cL|=mx;>8IS@61!Js+MBs7-Hvet|DRgv%
zU}(4yOb6)rAIuP947df7WMKh&VGp_sfL<aTji3O8X+Xnkh>6BsK>Q1&KvEKHBgnvK
kK>id`@&d`3iIVIL01&jE<(Xj{%K!iX07*qoM6N<$f>Zroi2wiq

diff --git a/images/icon/light/16.png b/images/icon/light/16.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ec57b4e6a6c98088abde81f61ae895977599e11
GIT binary patch
literal 654
zcmV;90&)F`P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs8E*XaQ32guX0vkz0
zK~y-)jgw1AR8btpf9KviddJsjN%R<-tSF>t!U0{FLo~PuEeZ<TB^9+vh@f0aMYRY6
zgGw+;k!T^bklIw>B7`s|G9Mt8IM_=xq<LD-sQ(s@7sglq;cUKh{;%&lA0h&9R8LPE
z24pQqH_btyQbbT9f@T;Y&((`rMKz~1d;U6Bi>dKn47Rn?)7TuIot}0m5kV;>XTJAh
z*i8U}Uq<-Y@Q`nvT}%f<0Ay|1MCpwy>^NRYA{wLBRg8!zW1;dwa%g0fj*64SBhi%3
z(H~>T>>L2LtV|0x7LVB9)M_Pr@7=<6*vIdoVJ7@NIDO?yR$5XZ6c`0Sv)R~IRe_n8
zi#@-D&1EIaa-uB;HWcpzU@np1dHE6gnp#LiV=I!XDW$|yS8D<8+H-6y^~^IqHbHm&
z9iHv=(tH1LN@7X<Wt38)0VrL!F4A(cse1X80}a>6DclM`JQC&o^#=U68?AS9NkT0d
z&rc35JL2c|4&K$>Bp!)kWM)tk_<*MCJX*gS5m6fdiCxvlaQeIe%*3XMha;=2(AU($
zxc?K*gJsw<GYAd`7=6_VfMaJNW?t^<1-`y{%g?TE0xw>t;JTU4q2{|Q|AU!7e=+PP
z?%K0tyPQn+4_c(=yZ2CZx*ErJ7eI=vMpA|FKyzEp{!14q@Oddn?z~d;K6rv=v(1|%
oY3FLCX~DJHS?Ss&a6&}*2U>>G5xLRnhyVZp07*qoM6N<$f&&m9{Qv*}

literal 0
HcmV?d00001

diff --git a/images/icon/light/16w.png b/images/icon/light/16w.png
new file mode 100644
index 0000000000000000000000000000000000000000..6287ce91db1863933157463ada15e55d8a8a86f5
GIT binary patch
literal 671
zcmV;Q0$}}#P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs904&;ou2ld40xU^H
zK~y-)jgwzUlVKFbfBW8T-@Z8-t_0~1R+b?`A!~|8DupIkg58w}1Iex`vO=kmMi&Lb
zDnr47ypTmvAw&|4$_mNEF2q1`X%zE9!Hb;E`E7oq3+D&^Tb{f3ocDRoInO!Az>*y>
zTjUeb1vQmTn5-z%Y9!(Zei{IT(b#zI=5_Pw^R<T5w6vt)>B&jDA3dS-PKz2-)w>da
zwzw!)U%8}%e~$+6RJ%F8bq6lVic7L`G9wHB^OtN(Pp7*6A~98!0gTJc7DWLdI5v(u
zzld-sv?B9VaDup|0bsS+biZ+Ri9T<u4)#25r>L@mUn4*G-akM=dFh&#)(`~8#+L#n
z6D3uZ*c}d>#c4Q;kFKkUwAzuAcNl=hSd23V^YD3FnV*~6P*edl)irzc4B5_HhWfrR
z6`Wvxc9yUHcf4rpKoWvOM+$VHS(X`m-&-O92qE-<&2FdTqo0Ph`|Qlz3qUv&;$g!L
z+C9zszhyxUiFeare16>$d%B*|a-p7ZD1?%dLhs*6gb=tSE5I%3e_K~kbC$w{`jK#$
zxtW>dQ}B6P8SWn-zw{VZn~guC0Y1O(0U#r5KX!*BIYD2~TfX&v;=`-%mHTh8aNF0p
z@g6KhB3KlKnroNYzGpXqq2Yw6TgZ0iQdL*Wu6>yRE5>R}9FzL&L7VJuyh>qt8HMF#
zNp<OJxrfPYR%6kqK7|}fh*NP*lQ(nDk`R%&ro911{sD~@wZ`#Mg>nD@002ovPDHLk
FV1nwsE%N{X

literal 0
HcmV?d00001

diff --git a/images/icon/light/16x.png b/images/icon/light/16x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ccc3e502e6f341d369e9f7d896a2189346dc6b9
GIT binary patch
literal 358
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c
z!@6@aFM%A+0*}aI1_o|n5N2eUHAey{7#QFa;_8!G_-9!S4?Ek(d1XK`4pxwnEKE!+
z%uGN=O`y$-nMKWE4i1{~5mwq=QO?toJr`y9U+>LQkr4d3q)J+dcV}f(u7|0SqQuFT
z<Yl>m%Rd@90CjSe1o;Is{Qv*o=hpv^A3_5@uR8@4?eKJQ43W6(+kacES%HT|_<|_o
z&K04z|Np<hHtW_q?sm&JEdspC?|PU8eGNCLRj4yetMp~7*mGkM<IdS}E6#BFEofOB
zDyq{^B~l@nvYKJu%~QfNbQGEdp58gFcB1@(mhRO9Z{pqkv(i{Cr@rFd_J8BqUm*!U
sJ+5z^qg}tx&UN4A>9g<V*P36Je#gQ(-_CimG0;s6p00i_>zopr0B7)fumAu6

literal 0
HcmV?d00001

diff --git a/images/icon/light/19.png b/images/icon/light/19.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ec57b4e6a6c98088abde81f61ae895977599e11
GIT binary patch
literal 654
zcmV;90&)F`P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs8E*XaQ32guX0vkz0
zK~y-)jgw1AR8btpf9KviddJsjN%R<-tSF>t!U0{FLo~PuEeZ<TB^9+vh@f0aMYRY6
zgGw+;k!T^bklIw>B7`s|G9Mt8IM_=xq<LD-sQ(s@7sglq;cUKh{;%&lA0h&9R8LPE
z24pQqH_btyQbbT9f@T;Y&((`rMKz~1d;U6Bi>dKn47Rn?)7TuIot}0m5kV;>XTJAh
z*i8U}Uq<-Y@Q`nvT}%f<0Ay|1MCpwy>^NRYA{wLBRg8!zW1;dwa%g0fj*64SBhi%3
z(H~>T>>L2LtV|0x7LVB9)M_Pr@7=<6*vIdoVJ7@NIDO?yR$5XZ6c`0Sv)R~IRe_n8
zi#@-D&1EIaa-uB;HWcpzU@np1dHE6gnp#LiV=I!XDW$|yS8D<8+H-6y^~^IqHbHm&
z9iHv=(tH1LN@7X<Wt38)0VrL!F4A(cse1X80}a>6DclM`JQC&o^#=U68?AS9NkT0d
z&rc35JL2c|4&K$>Bp!)kWM)tk_<*MCJX*gS5m6fdiCxvlaQeIe%*3XMha;=2(AU($
zxc?K*gJsw<GYAd`7=6_VfMaJNW?t^<1-`y{%g?TE0xw>t;JTU4q2{|Q|AU!7e=+PP
z?%K0tyPQn+4_c(=yZ2CZx*ErJ7eI=vMpA|FKyzEp{!14q@Oddn?z~d;K6rv=v(1|%
oY3FLCX~DJHS?Ss&a6&}*2U>>G5xLRnhyVZp07*qoM6N<$f&&m9{Qv*}

literal 0
HcmV?d00001

diff --git a/images/icon/light/19w.png b/images/icon/light/19w.png
new file mode 100644
index 0000000000000000000000000000000000000000..6287ce91db1863933157463ada15e55d8a8a86f5
GIT binary patch
literal 671
zcmV;Q0$}}#P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs904&;ou2ld40xU^H
zK~y-)jgwzUlVKFbfBW8T-@Z8-t_0~1R+b?`A!~|8DupIkg58w}1Iex`vO=kmMi&Lb
zDnr47ypTmvAw&|4$_mNEF2q1`X%zE9!Hb;E`E7oq3+D&^Tb{f3ocDRoInO!Az>*y>
zTjUeb1vQmTn5-z%Y9!(Zei{IT(b#zI=5_Pw^R<T5w6vt)>B&jDA3dS-PKz2-)w>da
zwzw!)U%8}%e~$+6RJ%F8bq6lVic7L`G9wHB^OtN(Pp7*6A~98!0gTJc7DWLdI5v(u
zzld-sv?B9VaDup|0bsS+biZ+Ri9T<u4)#25r>L@mUn4*G-akM=dFh&#)(`~8#+L#n
z6D3uZ*c}d>#c4Q;kFKkUwAzuAcNl=hSd23V^YD3FnV*~6P*edl)irzc4B5_HhWfrR
z6`Wvxc9yUHcf4rpKoWvOM+$VHS(X`m-&-O92qE-<&2FdTqo0Ph`|Qlz3qUv&;$g!L
z+C9zszhyxUiFeare16>$d%B*|a-p7ZD1?%dLhs*6gb=tSE5I%3e_K~kbC$w{`jK#$
zxtW>dQ}B6P8SWn-zw{VZn~guC0Y1O(0U#r5KX!*BIYD2~TfX&v;=`-%mHTh8aNF0p
z@g6KhB3KlKnroNYzGpXqq2Yw6TgZ0iQdL*Wu6>yRE5>R}9FzL&L7VJuyh>qt8HMF#
zNp<OJxrfPYR%6kqK7|}fh*NP*lQ(nDk`R%&ro911{sD~@wZ`#Mg>nD@002ovPDHLk
FV1nwsE%N{X

literal 0
HcmV?d00001

diff --git a/images/icon/light/19x.png b/images/icon/light/19x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ccc3e502e6f341d369e9f7d896a2189346dc6b9
GIT binary patch
literal 358
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c
z!@6@aFM%A+0*}aI1_o|n5N2eUHAey{7#QFa;_8!G_-9!S4?Ek(d1XK`4pxwnEKE!+
z%uGN=O`y$-nMKWE4i1{~5mwq=QO?toJr`y9U+>LQkr4d3q)J+dcV}f(u7|0SqQuFT
z<Yl>m%Rd@90CjSe1o;Is{Qv*o=hpv^A3_5@uR8@4?eKJQ43W6(+kacES%HT|_<|_o
z&K04z|Np<hHtW_q?sm&JEdspC?|PU8eGNCLRj4yetMp~7*mGkM<IdS}E6#BFEofOB
zDyq{^B~l@nvYKJu%~QfNbQGEdp58gFcB1@(mhRO9Z{pqkv(i{Cr@rFd_J8BqUm*!U
sJ+5z^qg}tx&UN4A>9g<V*P36Je#gQ(-_CimG0;s6p00i_>zopr0B7)fumAu6

literal 0
HcmV?d00001

diff --git a/images/icon/light/32.png b/images/icon/light/32.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ec57b4e6a6c98088abde81f61ae895977599e11
GIT binary patch
literal 654
zcmV;90&)F`P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs8E*XaQ32guX0vkz0
zK~y-)jgw1AR8btpf9KviddJsjN%R<-tSF>t!U0{FLo~PuEeZ<TB^9+vh@f0aMYRY6
zgGw+;k!T^bklIw>B7`s|G9Mt8IM_=xq<LD-sQ(s@7sglq;cUKh{;%&lA0h&9R8LPE
z24pQqH_btyQbbT9f@T;Y&((`rMKz~1d;U6Bi>dKn47Rn?)7TuIot}0m5kV;>XTJAh
z*i8U}Uq<-Y@Q`nvT}%f<0Ay|1MCpwy>^NRYA{wLBRg8!zW1;dwa%g0fj*64SBhi%3
z(H~>T>>L2LtV|0x7LVB9)M_Pr@7=<6*vIdoVJ7@NIDO?yR$5XZ6c`0Sv)R~IRe_n8
zi#@-D&1EIaa-uB;HWcpzU@np1dHE6gnp#LiV=I!XDW$|yS8D<8+H-6y^~^IqHbHm&
z9iHv=(tH1LN@7X<Wt38)0VrL!F4A(cse1X80}a>6DclM`JQC&o^#=U68?AS9NkT0d
z&rc35JL2c|4&K$>Bp!)kWM)tk_<*MCJX*gS5m6fdiCxvlaQeIe%*3XMha;=2(AU($
zxc?K*gJsw<GYAd`7=6_VfMaJNW?t^<1-`y{%g?TE0xw>t;JTU4q2{|Q|AU!7e=+PP
z?%K0tyPQn+4_c(=yZ2CZx*ErJ7eI=vMpA|FKyzEp{!14q@Oddn?z~d;K6rv=v(1|%
oY3FLCX~DJHS?Ss&a6&}*2U>>G5xLRnhyVZp07*qoM6N<$f&&m9{Qv*}

literal 0
HcmV?d00001

diff --git a/images/icon/light/32w.png b/images/icon/light/32w.png
new file mode 100644
index 0000000000000000000000000000000000000000..6287ce91db1863933157463ada15e55d8a8a86f5
GIT binary patch
literal 671
zcmV;Q0$}}#P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs904&;ou2ld40xU^H
zK~y-)jgwzUlVKFbfBW8T-@Z8-t_0~1R+b?`A!~|8DupIkg58w}1Iex`vO=kmMi&Lb
zDnr47ypTmvAw&|4$_mNEF2q1`X%zE9!Hb;E`E7oq3+D&^Tb{f3ocDRoInO!Az>*y>
zTjUeb1vQmTn5-z%Y9!(Zei{IT(b#zI=5_Pw^R<T5w6vt)>B&jDA3dS-PKz2-)w>da
zwzw!)U%8}%e~$+6RJ%F8bq6lVic7L`G9wHB^OtN(Pp7*6A~98!0gTJc7DWLdI5v(u
zzld-sv?B9VaDup|0bsS+biZ+Ri9T<u4)#25r>L@mUn4*G-akM=dFh&#)(`~8#+L#n
z6D3uZ*c}d>#c4Q;kFKkUwAzuAcNl=hSd23V^YD3FnV*~6P*edl)irzc4B5_HhWfrR
z6`Wvxc9yUHcf4rpKoWvOM+$VHS(X`m-&-O92qE-<&2FdTqo0Ph`|Qlz3qUv&;$g!L
z+C9zszhyxUiFeare16>$d%B*|a-p7ZD1?%dLhs*6gb=tSE5I%3e_K~kbC$w{`jK#$
zxtW>dQ}B6P8SWn-zw{VZn~guC0Y1O(0U#r5KX!*BIYD2~TfX&v;=`-%mHTh8aNF0p
z@g6KhB3KlKnroNYzGpXqq2Yw6TgZ0iQdL*Wu6>yRE5>R}9FzL&L7VJuyh>qt8HMF#
zNp<OJxrfPYR%6kqK7|}fh*NP*lQ(nDk`R%&ro911{sD~@wZ`#Mg>nD@002ovPDHLk
FV1nwsE%N{X

literal 0
HcmV?d00001

diff --git a/images/icon/light/32x.png b/images/icon/light/32x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ccc3e502e6f341d369e9f7d896a2189346dc6b9
GIT binary patch
literal 358
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c
z!@6@aFM%A+0*}aI1_o|n5N2eUHAey{7#QFa;_8!G_-9!S4?Ek(d1XK`4pxwnEKE!+
z%uGN=O`y$-nMKWE4i1{~5mwq=QO?toJr`y9U+>LQkr4d3q)J+dcV}f(u7|0SqQuFT
z<Yl>m%Rd@90CjSe1o;Is{Qv*o=hpv^A3_5@uR8@4?eKJQ43W6(+kacES%HT|_<|_o
z&K04z|Np<hHtW_q?sm&JEdspC?|PU8eGNCLRj4yetMp~7*mGkM<IdS}E6#BFEofOB
zDyq{^B~l@nvYKJu%~QfNbQGEdp58gFcB1@(mhRO9Z{pqkv(i{Cr@rFd_J8BqUm*!U
sJ+5z^qg}tx&UN4A>9g<V*P36Je#gQ(-_CimG0;s6p00i_>zopr0B7)fumAu6

literal 0
HcmV?d00001

diff --git a/images/icon/light/38.png b/images/icon/light/38.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ec57b4e6a6c98088abde81f61ae895977599e11
GIT binary patch
literal 654
zcmV;90&)F`P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs8E*XaQ32guX0vkz0
zK~y-)jgw1AR8btpf9KviddJsjN%R<-tSF>t!U0{FLo~PuEeZ<TB^9+vh@f0aMYRY6
zgGw+;k!T^bklIw>B7`s|G9Mt8IM_=xq<LD-sQ(s@7sglq;cUKh{;%&lA0h&9R8LPE
z24pQqH_btyQbbT9f@T;Y&((`rMKz~1d;U6Bi>dKn47Rn?)7TuIot}0m5kV;>XTJAh
z*i8U}Uq<-Y@Q`nvT}%f<0Ay|1MCpwy>^NRYA{wLBRg8!zW1;dwa%g0fj*64SBhi%3
z(H~>T>>L2LtV|0x7LVB9)M_Pr@7=<6*vIdoVJ7@NIDO?yR$5XZ6c`0Sv)R~IRe_n8
zi#@-D&1EIaa-uB;HWcpzU@np1dHE6gnp#LiV=I!XDW$|yS8D<8+H-6y^~^IqHbHm&
z9iHv=(tH1LN@7X<Wt38)0VrL!F4A(cse1X80}a>6DclM`JQC&o^#=U68?AS9NkT0d
z&rc35JL2c|4&K$>Bp!)kWM)tk_<*MCJX*gS5m6fdiCxvlaQeIe%*3XMha;=2(AU($
zxc?K*gJsw<GYAd`7=6_VfMaJNW?t^<1-`y{%g?TE0xw>t;JTU4q2{|Q|AU!7e=+PP
z?%K0tyPQn+4_c(=yZ2CZx*ErJ7eI=vMpA|FKyzEp{!14q@Oddn?z~d;K6rv=v(1|%
oY3FLCX~DJHS?Ss&a6&}*2U>>G5xLRnhyVZp07*qoM6N<$f&&m9{Qv*}

literal 0
HcmV?d00001

diff --git a/images/icon/light/38w.png b/images/icon/light/38w.png
new file mode 100644
index 0000000000000000000000000000000000000000..6287ce91db1863933157463ada15e55d8a8a86f5
GIT binary patch
literal 671
zcmV;Q0$}}#P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;RXs904&;ou2ld40xU^H
zK~y-)jgwzUlVKFbfBW8T-@Z8-t_0~1R+b?`A!~|8DupIkg58w}1Iex`vO=kmMi&Lb
zDnr47ypTmvAw&|4$_mNEF2q1`X%zE9!Hb;E`E7oq3+D&^Tb{f3ocDRoInO!Az>*y>
zTjUeb1vQmTn5-z%Y9!(Zei{IT(b#zI=5_Pw^R<T5w6vt)>B&jDA3dS-PKz2-)w>da
zwzw!)U%8}%e~$+6RJ%F8bq6lVic7L`G9wHB^OtN(Pp7*6A~98!0gTJc7DWLdI5v(u
zzld-sv?B9VaDup|0bsS+biZ+Ri9T<u4)#25r>L@mUn4*G-akM=dFh&#)(`~8#+L#n
z6D3uZ*c}d>#c4Q;kFKkUwAzuAcNl=hSd23V^YD3FnV*~6P*edl)irzc4B5_HhWfrR
z6`Wvxc9yUHcf4rpKoWvOM+$VHS(X`m-&-O92qE-<&2FdTqo0Ph`|Qlz3qUv&;$g!L
z+C9zszhyxUiFeare16>$d%B*|a-p7ZD1?%dLhs*6gb=tSE5I%3e_K~kbC$w{`jK#$
zxtW>dQ}B6P8SWn-zw{VZn~guC0Y1O(0U#r5KX!*BIYD2~TfX&v;=`-%mHTh8aNF0p
z@g6KhB3KlKnroNYzGpXqq2Yw6TgZ0iQdL*Wu6>yRE5>R}9FzL&L7VJuyh>qt8HMF#
zNp<OJxrfPYR%6kqK7|}fh*NP*lQ(nDk`R%&ro911{sD~@wZ`#Mg>nD@002ovPDHLk
FV1nwsE%N{X

literal 0
HcmV?d00001

diff --git a/images/icon/light/38x.png b/images/icon/light/38x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ccc3e502e6f341d369e9f7d896a2189346dc6b9
GIT binary patch
literal 358
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstUx|vage(c
z!@6@aFM%A+0*}aI1_o|n5N2eUHAey{7#QFa;_8!G_-9!S4?Ek(d1XK`4pxwnEKE!+
z%uGN=O`y$-nMKWE4i1{~5mwq=QO?toJr`y9U+>LQkr4d3q)J+dcV}f(u7|0SqQuFT
z<Yl>m%Rd@90CjSe1o;Is{Qv*o=hpv^A3_5@uR8@4?eKJQ43W6(+kacES%HT|_<|_o
z&K04z|Np<hHtW_q?sm&JEdspC?|PU8eGNCLRj4yetMp~7*mGkM<IdS}E6#BFEofOB
zDyq{^B~l@nvYKJu%~QfNbQGEdp58gFcB1@(mhRO9Z{pqkv(i{Cr@rFd_J8BqUm*!U
sJ+5z^qg}tx&UN4A>9g<V*P36Je#gQ(-_CimG0;s6p00i_>zopr0B7)fumAu6

literal 0
HcmV?d00001

diff --git a/options/index.css b/options/index.css
index a08485a9..fbc0e803 100644
--- a/options/index.css
+++ b/options/index.css
@@ -114,6 +114,14 @@ input[type="color"] {
   height: 2em;
 }
 
+.iconset {
+  display: flex;
+}
+
+.iconset input {
+  display: block;
+}
+
 #actions {
   justify-content: space-around;
   align-items: stretch;
diff --git a/options/index.html b/options/index.html
index 5812ddc3..3a7318be 100644
--- a/options/index.html
+++ b/options/index.html
@@ -13,6 +13,30 @@
 <body>
   <div id="options">
 
+    <div class="block">
+      <h1 i18n-text="optionsCustomizeIcon"></h1>
+      <div class="items">
+        <label>
+          <span i18n-text="optionsIconDark"></span>
+          <div class="iconset">
+            <input type="radio" name="iconset">
+            <img src="/images/icon/16.png">
+            <img src="/images/icon/16w.png">
+            <img src="/images/icon/16x.png">
+          </div>
+        </label>
+        <label>
+          <span i18n-text="optionsIconLight"></span>
+          <div class="iconset">
+            <input type="radio" name="iconset">
+            <img src="/images/icon/light/16.png">
+            <img src="/images/icon/light/16w.png">
+            <img src="/images/icon/light/16x.png">
+          </div>
+        </label>
+      </div>
+    </div>
+
     <div class="block">
       <h1 i18n-text="optionsCustomizeBadge"></h1>
       <div class="items">
diff --git a/options/index.js b/options/index.js
index 3b4dce31..decc038d 100644
--- a/options/index.js
+++ b/options/index.js
@@ -1,6 +1,7 @@
 'use strict';
 
 setupLivePrefs();
+setupRadioButtons();
 enforceInputRange($('#popupWidth'));
 
 // actions
@@ -61,3 +62,26 @@ function checkUpdates() {
     $('#updates-installed').dataset.value = updated || '';
   }
 }
+
+function setupRadioButtons() {
+  const sets = {};
+  const onChange = function() {
+    const newValue = sets[this.name].indexOf(this);
+    if (newValue >= 0 && prefs.get(this.name) != newValue) {
+      prefs.set(this.name, newValue);
+    }
+  };
+  // group all radio-inputs by name="prefName" attribute
+  for (const el of $$('input[type="radio"][name]')) {
+    (sets[el.name] = sets[el.name] || []).push(el);
+    el.addEventListener('change', onChange);
+  }
+  // select the input corresponding to the actual pref value
+  for (const name in sets) {
+    sets[name][prefs.get(name)].checked = true;
+  }
+  // listen to pref changes and update the values
+  prefs.subscribe((key, value) => {
+    sets[key][value].checked = true;
+  }, Object.keys(sets));
+}
diff --git a/prefs.js b/prefs.js
index a84cb52d..c34a0546 100644
--- a/prefs.js
+++ b/prefs.js
@@ -47,6 +47,9 @@ var prefs = new function Prefs() {
     'editor.autocompleteOnTyping': false, // show autocomplete dropdown on typing a word token
     'editor.contextDelete': contextDeleteMissing(), // "Delete" item in context menu
 
+    'iconset': 0,                   // 0 = dark-themed icon
+                                    // 1 = light-themed icon
+
     'badgeDisabled': '#8B0000',     // badge background color when disabled
     'badgeNormal': '#006666',       // badge background color
 
@@ -61,6 +64,7 @@ var prefs = new function Prefs() {
     'disableAll',
     'badgeDisabled',
     'badgeNormal',
+    'iconset',
   ];
 
   const onChange = {