Merge pull request #3708 from Saurabh-2607/fix/theme-light-after-dark

Fix YouTube Light and Dark theme switching in Themes panel Fix #3704

Author: ImprovedTube

js&css/web-accessible/functions.js

@@ -626,7 +626,7 @@ ImprovedTube.setPrefCookieValueByName = function (name, value) {
 	let newPrefs = '';
 	let ampersant = '';
 
-	if (name == 'f6' && prefs[name] & 1) {
+	if (name == 'f6' && value != null && 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;

menu/skeleton-parts/themes.js

@@ -46,28 +46,32 @@ extension.skeleton.main.layers.section.themes.on.click.section = {
 	variant: 'transparent-card',
 
 	default: function () {
+		var theme = satus.storage.get('theme');
+
 		return {
 			component: 'label',
-			variant: satus.storage.get('theme') == 'dark' ? 'dark-theme' : 'default-theme',
-			text: satus.storage.get('theme') == 'dark' ? 'youtubesDark' : 'youtubesLight',
+			variant: 'default-theme',
+			text: 'youtubesLight',
 			radio: {
 				component: 'radio',
 				group: 'theme',
-				value: satus.storage.get('theme') == 'dark' ? 'dark' : 'light',
-				...(!satus.storage.get('theme') && { checked: true })
+				value: 'light',
+				...((!theme || theme == 'light') && { checked: true })
 			}
 		}
 	},
 	opposite: function () {
+		var theme = satus.storage.get('theme');
+
 		return {
 			component: 'label',
-			variant: satus.storage.get('theme') == 'dark' ? 'default-theme' : 'dark-theme',
-			text: satus.storage.get('theme') == 'dark' ? 'youtubesLight' : 'youtubesDark',
+			variant: 'dark-theme',
+			text: 'youtubesDark',
 			radio: {
 				component: 'radio',
 				group: 'theme',
-				value: satus.storage.get('theme') == 'dark' ? 'light' : 'dark',
-				...(satus.storage.get('theme') == 'dark' && { checked: true })
+				value: 'dark',
+				...(theme == 'dark' && { checked: true })
 			}
 		}
 	},

tests/unit/theme-cookie.test.js

@@ -0,0 +1,36 @@
+global.ImprovedTube = {
+	storage: {},
+	elements: {},
+	button_icons: {}
+};
+
+global.document = {
+	cookie: ''
+};
+
+require('../../js&css/web-accessible/functions.js');
+
+describe('Theme PREF cookie handling', () => {
+	beforeEach(() => {
+		document.cookie = '';
+		ImprovedTube.setCookie = jest.fn(function (name, value) {
+			document.cookie = name + '=' + value;
+		});
+	});
+
+	test('preserves the extra f6 bit when enabling dark theme', () => {
+		document.cookie = 'PREF=f6=80001';
+
+		ImprovedTube.setPrefCookieValueByName('f6', 400);
+
+		expect(ImprovedTube.setCookie).toHaveBeenCalledWith('PREF', 'f6=401');
+	});
+
+	test('removes the f6 theme preference when switching back to light', () => {
+		document.cookie = 'PREF=f6=401';
+
+		ImprovedTube.setPrefCookieValueByName('f6', null);
+
+		expect(ImprovedTube.setCookie).toHaveBeenCalledWith('PREF', '');
+	});
+});

tests/unit/themes-menu.test.js

@@ -0,0 +1,66 @@
+global.extension = {
+	skeleton: {
+		main: {
+			layers: {
+				section: {}
+			}
+		}
+	}
+};
+
+global.satus = {
+	storage: {
+		get: jest.fn()
+	}
+};
+
+require('../../menu/skeleton-parts/themes.js');
+
+describe('Themes menu radio state', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	test('keeps YouTube light as the default option when there is no stored theme', () => {
+		satus.storage.get.mockReturnValue(undefined);
+
+		const section = extension.skeleton.main.layers.section.themes.on.click.section;
+		const currentTheme = section.default();
+		const oppositeTheme = section.opposite();
+
+		expect(currentTheme.text).toBe('youtubesLight');
+		expect(currentTheme.radio.value).toBe('light');
+		expect(currentTheme.radio.checked).toBe(true);
+		expect(oppositeTheme.text).toBe('youtubesDark');
+		expect(oppositeTheme.radio.value).toBe('dark');
+		expect(oppositeTheme.radio.checked).toBeUndefined();
+	});
+
+	test('marks YouTube dark as checked when dark is the current theme', () => {
+		satus.storage.get.mockReturnValue('dark');
+
+		const section = extension.skeleton.main.layers.section.themes.on.click.section;
+		const currentTheme = section.default();
+		const oppositeTheme = section.opposite();
+
+		expect(currentTheme.text).toBe('youtubesLight');
+		expect(currentTheme.radio.value).toBe('light');
+		expect(currentTheme.radio.checked).toBeUndefined();
+		expect(oppositeTheme.text).toBe('youtubesDark');
+		expect(oppositeTheme.radio.value).toBe('dark');
+		expect(oppositeTheme.radio.checked).toBe(true);
+	});
+
+	test('keeps YouTube light selected when light is explicitly stored', () => {
+		satus.storage.get.mockReturnValue('light');
+
+		const section = extension.skeleton.main.layers.section.themes.on.click.section;
+		const currentTheme = section.default();
+		const oppositeTheme = section.opposite();
+
+		expect(currentTheme.radio.value).toBe('light');
+		expect(currentTheme.radio.checked).toBe(true);
+		expect(oppositeTheme.radio.value).toBe('dark');
+		expect(oppositeTheme.radio.checked).toBeUndefined();
+	});
+});