Replaced popup header icons w/ scheme-aware SVGs

adamlui · adamlui · commit a53311049b66 · 2025-08-13T11:14:30.000-07:00
diff --git a/chatgpt-auto-continue/chromium/extension/popup/index.html b/chatgpt-auto-continue/chromium/extension/popup/index.html
@@ -10,7 +10,7 @@
         </div>
         <header>
             <div class="logo">
-                <img src="https://cdn.jsdelivr.net/gh/adamlui/chatgpt-auto-continue@a4edc70/assets/images/icons/continue-symbol/black/icon32.png"
+                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20height%3D%2232%22%20width%3D%2232%22%3E%3Cstyle%3E%20%20%20%20%3Aroot%20%7B%20--fill%3A%23000%20%7D%20%40media%20(prefers-color-scheme%3Adark)%20%7B%20%3Aroot%20%7B%20--fill%3A%20%23fff%20%7D%7D%20%20%3C%2Fstyle%3E%3Cpath%20fill%3D%22var(--fill)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M4.2%2014.2%203%2015.4v3.272l6.903%206.664L16.806%2032l-6.903%206.664L3%2045.328V48.6l1.2%201.2L5.4%2051h3.164l9.968-9.5L28.5%2032l-9.968-9.5L8.564%2013H5.4l-1.2%201.2m17%200L20%2015.4v3.272l6.903%206.664L33.806%2032l-6.903%206.664L20%2045.328V48.6l1.2%201.2%201.2%201.2%201.55-.031%201.55-.032%2010-9.477%2010-9.477-10-9.471-10-9.472-1.55-.02L22.4%2013l-1.2%201.2m18%200L38%2015.4v3.272l6.903%206.664L51.806%2032l-6.903%206.664L38%2045.328V48.6l1.2%201.2%201.2%201.2h3.164l9.968-9.5L63.5%2032l-9.968-9.5-9.968-9.5H40.4l-1.2%201.2%22%20%2F%3E%3C%2Fsvg%3E"
                      width=24 alt="">
             </div>
             <div class="menu-title" data-locale-text-content="appName">ChatGPT Auto-Continue</div>
diff --git a/chatgpt-auto-continue/chromium/extension/popup/style.css b/chatgpt-auto-continue/chromium/extension/popup/style.css
@@ -125,7 +125,6 @@ html.dark {
 html.dark .loading-bg { background: black } html.dark .loading-spinner { border-color: white }
 html.dark body { background-image: linear-gradient(180deg, #99a8a6 -245px, black 185px) }
 html.dark, html.dark header, html.dark footer { color: white } html.dark footer { background: none }
-html.dark header img { filter: brightness(1000%) contrast(100%) invert(100%) } /* whiten header logo */
 html.dark div.categorized-entries {  border-image: linear-gradient(transparent, rgba(161,161,161,0.5)) 30 100% / 100 }
 html.dark .toggle .track {
     background: var(--track-empty-color) ; border-color: black ; height: 8px ; width: 20px ; transition: none }
diff --git a/chatgpt-auto-continue/firefox/extension/popup/index.html b/chatgpt-auto-continue/firefox/extension/popup/index.html
@@ -10,7 +10,7 @@
         </div>
         <header>
             <div class="logo">
-                <img src="https://cdn.jsdelivr.net/gh/adamlui/chatgpt-auto-continue@a4edc70/assets/images/icons/continue-symbol/black/icon32.png"
+                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20height%3D%2232%22%20width%3D%2232%22%3E%3Cstyle%3E%20%20%20%20%3Aroot%20%7B%20--fill%3A%23000%20%7D%20%40media%20(prefers-color-scheme%3Adark)%20%7B%20%3Aroot%20%7B%20--fill%3A%20%23fff%20%7D%7D%20%20%3C%2Fstyle%3E%3Cpath%20fill%3D%22var(--fill)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M4.2%2014.2%203%2015.4v3.272l6.903%206.664L16.806%2032l-6.903%206.664L3%2045.328V48.6l1.2%201.2L5.4%2051h3.164l9.968-9.5L28.5%2032l-9.968-9.5L8.564%2013H5.4l-1.2%201.2m17%200L20%2015.4v3.272l6.903%206.664L33.806%2032l-6.903%206.664L20%2045.328V48.6l1.2%201.2%201.2%201.2%201.55-.031%201.55-.032%2010-9.477%2010-9.477-10-9.471-10-9.472-1.55-.02L22.4%2013l-1.2%201.2m18%200L38%2015.4v3.272l6.903%206.664L51.806%2032l-6.903%206.664L38%2045.328V48.6l1.2%201.2%201.2%201.2h3.164l9.968-9.5L63.5%2032l-9.968-9.5-9.968-9.5H40.4l-1.2%201.2%22%20%2F%3E%3C%2Fsvg%3E"
                      width=24 alt="">
             </div>
             <div class="menu-title" data-locale-text-content="appName">ChatGPT Auto-Continue</div>
diff --git a/chatgpt-auto-continue/firefox/extension/popup/style.css b/chatgpt-auto-continue/firefox/extension/popup/style.css
@@ -125,7 +125,6 @@ html.dark {
 html.dark .loading-bg { background: black } html.dark .loading-spinner { border-color: white }
 html.dark body { background-image: linear-gradient(180deg, #99a8a6 -245px, black 185px) }
 html.dark, html.dark header, html.dark footer { color: white } html.dark footer { background: none }
-html.dark header img { filter: brightness(1000%) contrast(100%) invert(100%) } /* whiten header logo */
 html.dark div.categorized-entries {  border-image: linear-gradient(transparent, rgba(161,161,161,0.5)) 30 100% / 100 }
 html.dark .toggle .track {
     background: var(--track-empty-color) ; border-color: black ; height: 8px ; width: 20px ; transition: none }
diff --git a/chatgpt-infinity/chromium/extension/popup/index.html b/chatgpt-infinity/chromium/extension/popup/index.html
@@ -10,8 +10,8 @@
         </div>
         <header>
             <div class="logo">
-                <img src="https://cdn.jsdelivr.net/gh/adamlui/chatgpt-infinity@b4b3921/assets/images/icons/infinity-symbol/black/icon32.png"
-                     width=26 alt="">
+                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20height%3D%2232%22%20width%3D%2232%22%3E%3Cstyle%3E%3Aroot%20%7B%20--fill%3A%23000%20%7D%20%40media%20(prefers-color-scheme%3Adark)%20%7B%20%3Aroot%20%7B%20--fill%3A%23fff%20%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22var(--fill)%22%20d%3D%22m8.121%209.879%202.083%202.083.007-.006%201.452%201.452.006.006%202.122%202.122a5%205%200%201%200%200-7.072l-.714.714%201.415%201.414.713-.713a3%203%200%201%201%200%204.242l-2.072-2.072-.007.006-3.59-3.59a5%205%200%201%200%200%207.07l.713-.713-1.414-1.414-.714.713a3%203%200%201%201%200-4.242Z%22%2F%3E%3C%2Fsvg%3E"
+                     width=28.5 alt="">
             </div>
             <div class="menu-title" data-locale-text-content="appName">ChatGPT Infinity</div>
             <div class="master-toggle"></div>
diff --git a/chatgpt-infinity/chromium/extension/popup/style.css b/chatgpt-infinity/chromium/extension/popup/style.css
@@ -125,7 +125,6 @@ html.dark {
 html.dark .loading-bg { background: black } html.dark .loading-spinner { border-color: white }
 html.dark body { background-image: linear-gradient(180deg, #99a8a6 -245px, black 185px) }
 html.dark, html.dark header, html.dark footer { color: white } html.dark footer { background: none }
-html.dark header img { filter: brightness(1000%) contrast(100%) invert(100%) } /* whiten header logo */
 html.dark div.categorized-entries {  border-image: linear-gradient(transparent, rgba(161,161,161,0.5)) 30 100% / 100 }
 html.dark .toggle .track {
     background: var(--track-empty-color) ; border-color: black ; height: 8px ; width: 20px ; transition: none }
diff --git a/chatgpt-infinity/firefox/extension/popup/index.html b/chatgpt-infinity/firefox/extension/popup/index.html
@@ -10,8 +10,8 @@
         </div>
         <header>
             <div class="logo">
-                <img src="https://cdn.jsdelivr.net/gh/adamlui/chatgpt-infinity@b4b3921/assets/images/icons/infinity-symbol/black/icon32.png"
-                     width=26 alt="">
+                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20height%3D%2232%22%20width%3D%2232%22%3E%3Cstyle%3E%3Aroot%20%7B%20--fill%3A%23000%20%7D%20%40media%20(prefers-color-scheme%3Adark)%20%7B%20%3Aroot%20%7B%20--fill%3A%23fff%20%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22var(--fill)%22%20d%3D%22m8.121%209.879%202.083%202.083.007-.006%201.452%201.452.006.006%202.122%202.122a5%205%200%201%200%200-7.072l-.714.714%201.415%201.414.713-.713a3%203%200%201%201%200%204.242l-2.072-2.072-.007.006-3.59-3.59a5%205%200%201%200%200%207.07l.713-.713-1.414-1.414-.714.713a3%203%200%201%201%200-4.242Z%22%2F%3E%3C%2Fsvg%3E"
+                     width=28.5 alt="">
             </div>
             <div class="menu-title" data-locale-text-content="appName">ChatGPT Infinity</div>
             <div class="master-toggle"></div>
diff --git a/chatgpt-infinity/firefox/extension/popup/style.css b/chatgpt-infinity/firefox/extension/popup/style.css
@@ -125,7 +125,6 @@ html.dark {
 html.dark .loading-bg { background: black } html.dark .loading-spinner { border-color: white }
 html.dark body { background-image: linear-gradient(180deg, #99a8a6 -245px, black 185px) }
 html.dark, html.dark header, html.dark footer { color: white } html.dark footer { background: none }
-html.dark header img { filter: brightness(1000%) contrast(100%) invert(100%) } /* whiten header logo */
 html.dark div.categorized-entries {  border-image: linear-gradient(transparent, rgba(161,161,161,0.5)) 30 100% / 100 }
 html.dark .toggle .track {
     background: var(--track-empty-color) ; border-color: black ; height: 8px ; width: 20px ; transition: none }
