Merge pull request #3326 from thelounge/xpaw/theme-color

Allow themes to change theme-color

client/js/options.js

@@ -30,6 +30,8 @@ const noSync = ["syncSettings"];
 // to the server regardless of the clients sync setting.
 const alwaysSync = ["highlights"];
 
+const defaultThemeColor = document.querySelector('meta[name="theme-color"]').content;
+
 // Process usersettings from localstorage.
 let userSettings = JSON.parse(storage.get("settings")) || false;
 
@@ -95,10 +97,19 @@ function applySetting(name, value) {
 		$syncWarningOverride.hide();
 		$forceSyncButton.hide();
 	} else if (name === "theme") {
-		value = `themes/${value}.css`;
+		const themeUrl = `themes/${value}.css`;
 
-		if ($theme.attr("href") !== value) {
+		if ($theme.attr("href") !== themeUrl) {
-			$theme.attr("href", value);
+			$theme.attr("href", themeUrl);
+
+			const newTheme = $settings.find("#theme-select option[value='" + value + "']");
+			let themeColor = defaultThemeColor;
+
+			if (newTheme.length > 0 && newTheme[0].dataset.themeColor) {
+				themeColor = newTheme[0].dataset.themeColor;
+			}
+
+			document.querySelector('meta[name="theme-color"]').content = themeColor;
 		}
 	} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
 		$userStyles.html(value);

client/js/socket-events/configuration.js

@@ -59,8 +59,12 @@ socket.on("configuration", function(data) {
 
 	// If localStorage contains a theme that does not exist on this server, switch
 	// back to its default theme.
-	if (!data.themes.map((t) => t.name).includes(options.settings.theme)) {
+	const currentTheme = data.themes.find((t) => t.name === options.settings.theme);
+
+	if (currentTheme === undefined) {
 		options.processSetting("theme", data.defaultTheme, true);
+	} else if (currentTheme.themeColor) {
+		document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor;
 	}
 
 	function handleFormSubmit() {

client/views/windows/settings.tpl

@@ -104,7 +104,7 @@
 			<label for="theme-select" class="sr-only">Theme</label>
 			<select id="theme-select" name="theme" class="input">
 				{{#each themes}}
-					<option value="{{name}}">
+					<option value="{{name}}" data-theme-color="{{themeColor}}">
 						{{displayName}}
 					</option>
 				{{/each}}

src/plugins/packages/themes.js

@@ -9,21 +9,19 @@ const themes = new Map();
 module.exports = {
 	addTheme,
 	getAll,
-	getFilename,
+	getByName,
 	loadLocalThemes,
 };
 
 function loadLocalThemes() {
-	fs.readdir(path.join(__dirname, "..", "..", "..", "public", "themes"), (err, builtInThemes) => {
+	const builtInThemes = fs.readdirSync(
-		if (err) {
+		path.join(__dirname, "..", "..", "..", "public", "themes")
-			return;
+	);
-		}
 
-		builtInThemes
+	builtInThemes
-			.filter((theme) => theme.endsWith(".css"))
+		.filter((theme) => theme.endsWith(".css"))
-			.map(makeLocalThemeObject)
+		.map(makeLocalThemeObject)
-			.forEach((theme) => themes.set(theme.name, theme));
+		.forEach((theme) => themes.set(theme.name, theme));
-	});
 }
 
 function addTheme(packageName, packageObject) {
@@ -35,13 +33,17 @@ function addTheme(packageName, packageObject) {
 }
 
 function getAll() {
-	return _.sortBy(Array.from(themes.values()), "displayName");
+	const filteredThemes = [];
+
+	for (const theme of themes.values()) {
+		filteredThemes.push(_.pick(theme, ["displayName", "name", "themeColor"]));
+	}
+
+	return _.sortBy(filteredThemes, "displayName");
 }
 
-function getFilename(module) {
+function getByName(name) {
-	if (themes.has(module)) {
+	return themes.get(name);
-		return themes.get(module).filename;
-	}
 }
 
 function makeLocalThemeObject(css) {
@@ -49,6 +51,7 @@ function makeLocalThemeObject(css) {
 	return {
 		displayName: themeName.charAt(0).toUpperCase() + themeName.slice(1),
 		name: themeName,
+		themeColor: null,
 	};
 }
 
@@ -57,10 +60,12 @@ function makePackageThemeObject(moduleName, module) {
 		return;
 	}
 
+	const themeColor = /^#[0-9A-F]{6}$/i.test(module.themeColor) ? module.themeColor : null;
 	const modulePath = Helper.getPackageModulePath(moduleName);
 	return {
 		displayName: module.name || moduleName,
 		filename: path.join(modulePath, module.css),
 		name: moduleName,
+		themeColor: themeColor,
 	};
 }

src/server.js

@@ -65,13 +65,13 @@ module.exports = function() {
 	// local themes will not get those changes.
 	app.get("/themes/:theme.css", (req, res) => {
 		const themeName = req.params.theme;
-		const theme = themes.getFilename(themeName);
+		const theme = themes.getByName(themeName);
 
 		if (theme === undefined) {
 			return res.status(404).send("Not found");
 		}
 
-		return res.sendFile(theme);
+		return res.sendFile(theme.filename);
 	});
 
 	app.get("/packages/:package/:filename", (req, res) => {
@@ -180,6 +180,19 @@ module.exports = function() {
 		manager = new ClientManager();
 		packages.loadPackages();
 
+		const defaultTheme = themes.getByName(Helper.config.theme);
+
+		if (defaultTheme === undefined) {
+			log.warn(
+				`The specified default theme "${colors.red(
+					Helper.config.theme
+				)}" does not exist, verify your config.`
+			);
+			Helper.config.theme = "default";
+		} else if (defaultTheme.themeColor) {
+			Helper.config.themeColor = defaultTheme.themeColor;
+		}
+
 		new Identification((identHandler) => {
 			manager.init(identHandler, sockets);
 		});