Update functions.js fix YT dark theme

js&css/extension/core.js

@@ -303,16 +303,19 @@ extension.storage.listener = function () {
 
 extension.storage.load = function (callback) {
 	chrome.storage.local.get(function (items) {
-		for (var key in items) {
-			var value = items[key];
+		extension.storage.data = items;
 
-			extension.storage.data[key] = value;
+		// initialize theme in case YT is in Dark cookie mode
+		if (!extension.storage.data['theme'] && document.documentElement.hasAttribute('dark')) {
+			extension.storage.data['theme'] = 'dark';
+			chrome.storage.local.set({theme: 'dark'});
+		}
 
-			document.documentElement.setAttribute('it-' + key.replace(/_/g, '-'), value);
+		for (const key in items) {
+			document.documentElement.setAttribute('it-' + key.replace(/_/g, '-'), items[key]);
 		}
 
 		extension.events.trigger('storage-loaded');
-
 		extension.messages.send({
 			action: 'storage-loaded',
 			storage: items
@@ -322,4 +325,4 @@ extension.storage.load = function (callback) {
 			callback(extension.storage.data);
 		}
 	});
-};
+};

js&css/extension/init.js

@@ -237,6 +237,12 @@ document.addEventListener('it-message-from-youtube', function () {
 			chrome.storage.local.set({
 				watched: extension.storage.data.watched
 			});
+		} else if (message.action === 'set') {
+			if (message.value) {
+				chrome.storage.local.set({[message.key]: message.value});
+			} else {
+				chrome.storage.local.remove([message.key]);
+			}
 		}
 	}
 });

js&css/web-accessible/functions.js

@@ -149,9 +149,9 @@ ImprovedTube.ytElementsHandler = function (node) {
 	} else if (name === 'YTD-MASTHEAD') {
 		if (!this.elements.masthead) {
 			this.elements.masthead = {start: node.querySelector('#start'),
-									  end: node.querySelector('#end'),
-									  logo: node.querySelector('a#logo')
-									 };
+						end: node.querySelector('#end'),
+						logo: node.querySelector('a#logo')
+						};
 
 			this.improvedtubeYoutubeIcon();
 		}
@@ -526,7 +526,13 @@ ImprovedTube.setPrefCookieValueByName = function (name, value) {
 	let newPrefs = '';
 	let ampersant = '';
 
-	prefs[name] = value;
+	if (name == 'f6' && prefs[name] & 1) {
+		// f6 holds other settings, possible values 80000 80001 400 401 1 none
+		// make sure we remember 1 bit
+		prefs[name] = value | 1;
+	} else {
+		prefs[name] = value;
+	}
 
 	for (let pref in prefs) {
 		if (prefs[pref]) {

js&css/web-accessible/www.youtube.com/shortcuts.js

@@ -623,23 +623,11 @@ ImprovedTube.shortcutSubscribe = function () {
 ------------------------------------------------------------------------------*/
 ImprovedTube.shortcutDarkTheme = function () {
 	if (document.documentElement.hasAttribute('dark')) {
-		cookieValue = '80000';
-		document.documentElement.removeAttribute('dark');
-		document.querySelector('ytd-masthead').removeAttribute('dark');
-		document.getElementById("cinematics").style.visibility = 'hidden';
-		document.querySelector('ytd-masthead').style.backgroundColor ='#fff';	
-		ImprovedTube.myColors(); ImprovedTube.setTheme();
-	} else { 
-		document.documentElement.setAttribute('dark', '');  	 
-		if (this.storage.theme === 'custom' ){ this.elements.my_colors.remove();  }
-		if (this.storage.theme === 'dawn' ){ this.elements.dawn.remove();  }
-			if (document.documentElement.hasAttribute('it-themes') !== null && document.documentElement.hasAttribute('it-themes') === true){													 
-				document.documentElement.removeAttribute('it-themes');			
-				document.documentElement.setAttribute('it-themes', 'false');			
-				}
-		document.querySelector('ytd-masthead').style.cssText = 'background-color: #000;';	
-		document.getElementById("cinematics").style.visibility = 'visible';
-	}   	
+		// message will propagate all the way to setTheme() so we dont need to do anything more here
+		ImprovedTube.messages.send({action: 'set', key: 'theme', value: 'light'});
+	} else {
+		ImprovedTube.messages.send({action: 'set', key: 'theme', value: 'dark'});
+	}
 };
 /*------------------------------------------------------------------------------
 4.7.26 CUSTOM MINI PLAYER

js&css/web-accessible/www.youtube.com/themes.js

@@ -73,7 +73,6 @@ ImprovedTube.myColors = function () {
 				document.documentElement.appendChild(style);
 				if (document.getElementById("cinematics")) {
 					document.getElementById("cinematics").style.visibility = 'hidden';
-					document.getElementById("cinematics").style.display = 'none !important';
 				} 
 			} else {
 				this.elements.my_colors?.remove();
@@ -82,19 +81,24 @@ ImprovedTube.myColors = function () {
 
 ImprovedTube.setTheme = function () {
 	switch(this.storage.theme) {
-		case 'default':
-			this.elements.my_colors?.remove();
-			break
-
-		case 'black':
 		case 'dark':
+			document.documentElement.setAttribute('dark', '');
+			if (document.querySelector('ytd-masthead')) { document.querySelector('ytd-masthead').setAttribute('dark', ''); }
+			ImprovedTube.setPrefCookieValueByName('f6', 400);
+			// fall through
+		case 'black':
 			if (document.getElementById("cinematics")) {
 				document.getElementById('cinematics').style.visibility = 'visible';
-				document.getElementById('cinematics').style.display = 'none !important';
 			}
 			this.elements.my_colors?.remove();
 			break
 
+		case 'light':
+			document.documentElement.removeAttribute('dark');
+			document.querySelector('ytd-masthead')?.removeAttribute('dark');
+			ImprovedTube.messages.send({action: 'set', key: 'theme', value: null});
+			ImprovedTube.setPrefCookieValueByName('f6', null);
+			// fall through
 		case 'dawn':
 		case 'sunset':
 		case 'night':
@@ -103,5 +107,10 @@ ImprovedTube.setTheme = function () {
 			document.getElementById('cinematics')?.removeAttribute('style');
 			this.elements.my_colors?.remove();
 			break
+
+		case 'default':
+		default:
+			this.elements.my_colors?.remove();
+			break
 	}
 };

menu/functions.js

@@ -34,6 +34,10 @@ extension.attributes = function () {
 			attribute = 'home-style';
 		}
 
+		if (attribute === 'theme' && !value) {
+			extension.skeleton.rendered.removeAttribute('theme');
+		}
+
 		if (satus.isset(value)) {
 			extension.skeleton.rendered.setAttribute(attribute.replace('it_', '').replace(/_/g, '-'), value);
 		}

menu/satus.js

@@ -835,6 +835,11 @@ satus.render = function(skeleton, container, property, childrenOnly, prepend, sk
 		for (var key in skeleton) {
 			var item = skeleton[key];
 
+			// sections can be functions
+			if (satus.isFunction(item)) {
+				item = item();
+			}
+
 			if (key !== 'parentSkeleton' && key !== 'parentElement' && key !== 'parentObject' && key !== 'before') {
 				if (item && item.component) {
 					item.parentSkeleton = skeleton;
@@ -2011,9 +2016,33 @@ satus.components.radio = function(component, skeleton) {
 	}
 
 	component.nativeControl.addEventListener('change', function() {
-		var component = this.parentNode;
+		const component = this.parentNode,
+			parent = component.parentNode.parentNode.skeleton;
+		let defValue;
+
+		// determine default value for whole radio section
+		for (const key in parent) {
+			let item = parent[key];
+
+			// components can be functions
+			if (satus.isFunction(item)) {
+				item = item();
+			}
 
+			if (!defValue && item?.radio) {
+				// start with first element in case checked: is not defined
+				defValue = item.radio.value;
+			} else if (item?.radio?.checked) {
+				defValue = item.radio.value;
+			}
+		}
+
+		// save first to sent changes up the chain
 		component.storage.value = this.value;
+		if (this.value == defValue) {
+			// remove if default
+			component.storage.remove();
+		}
 	});
 };
 /*--------------------------------------------------------------

menu/skeleton-parts/themes.js

@@ -45,6 +45,32 @@ extension.skeleton.main.layers.section.themes.on.click.section = {
 	component: 'section',
 	variant: 'transparent-card',
 
+	default: function () {
+		return {
+			component: 'label',
+			variant: satus.storage.get('theme') == 'dark' ? 'dark-theme' : 'default-theme',
+			text: satus.storage.get('theme') == 'dark' ? 'youtubesDark' : 'youtubesLight',
+			radio: {
+					component: 'radio',
+					group: 'theme',
+					value: satus.storage.get('theme') == 'dark' ? 'dark' : 'light',
+					...(!satus.storage.get('theme') && { checked: true })
+			}
+		}
+	},
+	opposite: function () {
+		return {
+			component: 'label',
+			variant: satus.storage.get('theme') == 'dark' ? 'default-theme' : 'dark-theme',
+			text: satus.storage.get('theme') == 'dark' ? 'youtubesLight' : 'youtubesDark',
+			radio: {
+					component: 'radio',
+					group: 'theme',
+					value: satus.storage.get('theme') == 'dark' ? 'light' : 'dark',
+					...(satus.storage.get('theme') == 'dark' && { checked: true })
+			}
+		}
+	},
 	custom: {
 		component: 'label',
 		variant: 'custom-theme',
@@ -73,17 +99,6 @@ extension.skeleton.main.layers.section.themes.on.click.section = {
 			}
 		}
 	},
-	default: {
-		component: 'label',
-		variant: 'default-theme',
-		text: 'default',
-		radio: {
-			component: 'radio',
-			group: 'theme',
-			value: 'default',
-			checked: true
-		}
-	},
 	black: {
 		component: 'label',
 		variant: 'black-theme',
@@ -133,7 +148,8 @@ extension.skeleton.main.layers.section.themes.on.click.section = {
 			group: 'theme',
 			value: 'dawn'
 		}
-	},desert: {
+	},
+	desert: {
 		component: 'label',
 		variant: 'desert-theme',
 		text: 'desert',
@@ -142,15 +158,5 @@ extension.skeleton.main.layers.section.themes.on.click.section = {
 			group: 'theme',
 			value: 'desert'
 		}
-	},
-	dark: {
-		component: 'label',
-		variant: 'dark-theme',
-		text: 'youtubesDark',
-		radio: {
-			component: 'radio',
-			group: 'theme',
-			value: 'dark'
-		}
-	},
+	}
 };