feat: adjust colors

assets/style.scss

@@ -83,8 +83,7 @@ $background-light: rgba(#000, .07);
 }
 
 @include selector('a') {
-  color: purple !important;
-  text-decoration: underline !important;
+  color: saturate(#191FCC, 10%) !important;
 }
 
 @include selector('button', 'input[type=submit]') {
@@ -179,7 +178,9 @@ h4, h5, h6 {
   background: $background-light !important;
 }
 
-@include selector('[title]') {
+// annotations
+
+/*@include selector('[title]') {
   position: relative !important;
 
   &:before {
@@ -189,8 +190,8 @@ h4, h5, h6 {
     padding: .25rem .5rem !important;
     margin-right: .25rem !important;
   }
-}
+}*/
 
-@include selector('img:not([alt])', 'img[alt]:not([alt=""])') {
+/*@include selector('img:not([alt])', 'img[alt]:not([alt=""])') {
   border: 4px dashed red !important;
-}
+}*/

background.js

@@ -2,7 +2,7 @@ import { property } from '@dword-design/functions'
 
 const update = enabled =>
   browser.browserAction.setIcon({
-    path: `assets/${enabled ? 'icon.png' : 'icon-disabled.png'}`,
+    path: `assets/icon${enabled ? '' : '-disabled'}.svg`,
   })
 
 browser.storage.onChanged.addListener((changes, area) => {

config.json

@@ -1,7 +1,11 @@
 {
   "name": "Accessible View",
   "browser_action": {
-    "default_icon": "assets/icon.png"
+    "default_icon": "assets/icon.svg"
+  },
+  "default_icon": {
+    "48": "assets/icon-48.png",
+    "96": "icon-96.png"
   },
   "permissions": [
     "storage"

content.js

@@ -3,9 +3,10 @@ import styleCode from './assets/style.scss'
 
 const toggle = enabled => {
   let style = document.querySelector('style.accessibility-mode')
-  if (!enabled && style) {
+  if (style) {
     style.remove()
-  } else if (enabled && !style) {
+  }
+  if (enabled) {
     style = document.createElement('style')
     style.classList.add('accessibility-mode')
     style.type = 'text/css'