💐 Sync 2026-05-31 20:31:25

luci-theme-material3/ucode/template/themes/material3/header.ut

@@ -22,23 +22,71 @@
 			(function() {
 				var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'),
 				    modeKey = 'material3-mode-debug',
-				    rootElement = document.querySelector(':root'),
-				    setDarkMode = function(match) {
-					    var mode = localStorage.getItem(modeKey);
+				    themeKey = 'material3-theme-debug',
+				    rootElement = document.documentElement,
+				    themeColors = {
+						'baseline': '#ADA4BB',
+						'blue': '#9EA9BA',
+						'green': '#9DAD9C',
+						'teal': '#96ADAC',
+						'orange': '#C0A48B',
+						'vivid-orange': '#C5A190',
+						'sakura': '#C4A09B',
+						'rose': '#C0A0A7',
+						'gray': '#B4B4B7'
+					};
 
-					    if (mode == 'light' || mode == 'dark') {
-						    rootElement.setAttribute('data-mode', mode);
-						    rootElement.setAttribute('data-darkmode', mode == 'dark' ? 'true' : 'false');
-					    }
-					    else {
-						    rootElement.removeAttribute('data-mode');
-						    rootElement.setAttribute('data-darkmode', match.matches ? 'true' : 'false');
-					    }
-				    };
+				var updateFavicon = function() {
+					var theme = rootElement.getAttribute('data-theme') || 'baseline',
+					    container = themeColors[theme] || themeColors['baseline'],
+					    svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="' + container + '"/><path fill="#fff" d="M75.26 51.66H24.74a9.18 9.18 0 0 0-9.18 9.18v4.6a9.18 9.18 0 0 0 9.18 9.18h50.52a9.18 9.18 0 0 0 9.18-9.18v-4.6a9.18 9.18 0 0 0-9.18-9.18zM59.18 68.88a5.17 5.17 0 1 1 5.17-5.17 5.17 5.17 0 0 1-5.17 5.17zm13.2 0a5.17 5.17 0 1 1 5.17-5.17 5.17 5.17 0 0 1-5.16 5.17zM29.34 30.72c6.9-6.62 14.06-9.83 21.59-9.83s15.04 3.44 21.9 10.24a3.44 3.44 0 1 0 4.73-4.9C69.6 18.26 60.33 14 50.92 14s-18.33 4.06-26.18 11.78a3.44 3.44 0 0 0 4.6 4.94zm3.29 8.1a3.44 3.44 0 0 0 4.59 5.03c8.77-8.17 18.78-7.97 27.4.37a3.44 3.44 0 1 0 4.8-4.96 26.96 26.96 0 0 0-18.5-8.27 26.75 26.75 0 0 0-18.2 7.83h-.1z"/></svg>',
+					    href = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+
+					document.querySelectorAll('link[rel="icon"]').forEach(function(link) {
+						if (link.href !== href) {
+							var newLink = link.cloneNode();
+							newLink.href = href;
+							link.parentNode.replaceChild(newLink, link);
+						}
+					});
+					document.querySelectorAll('img.material3-logo').forEach(function(img) {
+						if (img.src !== href) img.src = href;
+					});
+				};
+
+				var setDarkMode = function(match) {
+					var mode = localStorage.getItem(modeKey);
+
+					if (mode == 'light' || mode == 'dark') {
+						rootElement.setAttribute('data-mode', mode);
+						rootElement.setAttribute('data-darkmode', mode == 'dark' ? 'true' : 'false');
+					}
+					else {
+						rootElement.removeAttribute('data-mode');
+						rootElement.setAttribute('data-darkmode', match.matches ? 'true' : 'false');
+					}
+				};
 
 				window.material3ApplyColorMode = setDarkMode;
+				window.material3UpdateFavicon = updateFavicon;
+				
 				mediaQuery.addEventListener('change', setDarkMode);
 				setDarkMode(mediaQuery);
+
+				var savedTheme = localStorage.getItem(themeKey);
+				if (savedTheme) {
+					rootElement.setAttribute('data-theme', savedTheme);
+				}
+				
+				window.addEventListener('load', function() {
+					updateFavicon();
+					var observer = new MutationObserver(function(mutations) {
+						mutations.forEach(function(m) {
+							if (m.attributeName === 'data-theme') updateFavicon();
+						});
+					});
+					observer.observe(rootElement, { attributes: true, attributeFilter: ['data-theme'] });
+				});
 			})();
 		</script>
 		<meta name="viewport" content="width=device-width, initial-scale=1">

luci-theme-material3/ucode/template/themes/material3/sysauth.ut

@@ -7,7 +7,7 @@
 
 <section hidden>
 	<div class="material3-login-header">
-		<img src="{{ media }}/logo.svg" alt="">
+		<img src="{{ media }}/logo.svg" alt="" class="material3-logo">
 		<div>
 			<h2>{{ _('Authorization Required') }}</h2>
 			<p>{{ _('Sign in to manage this device.') }}</p>