matryoshka

commit c01623324a31d9475b5280375fbcc3928886ed28
parent a8e9a619502afcea9c4296c5b9e3ad95b625b062
Author: Hunter
Date:   Mon, 16 Jun 2025 23:56:05 -0400

update faivcon when cycling themes

Diffstat:
M
index.html
 | 
17
+++++++++++++++++

1 file changed, 17 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
@@ -69,6 +69,7 @@
 			--text: var(--licorice);
 			--highlight: var(--wasabi);
 			--accent: var(--eggplant);
+			--icon: '🦠';
 		}
 
 		:root[data-theme="swamp"] {
@@ -76,6 +77,7 @@
 			--text: var(--tadpole);
 			--highlight: var(--lilypad);
 			--accent: var(--reed);
+			--icon: '🐸';
 		}
 
 		:root[data-theme="sunflower"] {
@@ -83,6 +85,7 @@
 			--text: var(--loam);
 			--highlight: var(--chlorophyll);
 			--accent: var(--terracotta);
+			--icon: '🌻';
 		}
 
 		:root[data-theme="harvest"] {
@@ -90,6 +93,7 @@
 			--text: var(--earth);
 			--highlight: var(--pumpkin);
 			--accent: var(--tobacco);
+			--icon: '🌾';
 		}
 
 		:root[data-theme="medieval"] {
@@ -97,6 +101,7 @@
 			--text: var(--goat-milk);
 			--highlight: var(--burl);
 			--accent: var(--flame);
+			--icon: '🐐';
 			& input[type="text"] {
 				font-family: BasteleurMoonlight;
 			}
@@ -107,6 +112,7 @@
 			--text: var(--smoke);
 			--highlight: var(--ash);
 			--accent: var(--cinder);
+			--icon: '🪵';
 			& input[type="text"] {
 				font-family: BasteleurMoonlight;
 			}
@@ -120,6 +126,7 @@
 			--text: var(--taffy);
 			--highlight: var(--blue-raspberry);
 			--accent: var(--bubblegum);
+			--icon: '🍬';
 
 			.checkbox-label {
 				border-radius: 10px;
@@ -143,6 +150,7 @@
 			--text: var(--coconut);
 			--highlight: var(--licorice);
 			--accent: var(--green-apple);
+			--icon: '🛠️';
 			& input[type="text"] {
 				font-family: ElectrolizeRegular;
 				font-weight: 200;
@@ -1099,10 +1107,19 @@
 				localStorage.setItem('currentTheme', theme);
 			}
 
+			function updateFavicon() {
+				const iconEmoji = getComputedStyle(document.documentElement).getPropertyValue('--icon').trim().replace(/'/g, '');
+				const faviconLink = document.querySelector('link[rel="icon"]');
+				if (faviconLink && iconEmoji) {
+					faviconLink.href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${iconEmoji}</text></svg>`;
+				}
+			}
+
 			function setTheme(theme) {
 				document.documentElement.setAttribute('data-theme', theme);
 				const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background').trim();
 				document.getElementById('themeColor').setAttribute('content', backgroundColor);
+				updateFavicon();
 			}
 
 			function setInitialTheme() {