Rocket.Chat/app/theme/server/variables.js

import { theme } from './server';
import { settings } from '../../settings';
// TODO: Define registers/getters/setters for packages to work with established
// 			heirarchy of colors instead of making duplicate definitions
// TODO: Settings pages to show simple separation of major/minor/addon colors
// TODO: Add setting toggle to use defaults for minor colours and hide settings

// New colors, used for shades on solid backgrounds
// Defined range of transparencies reduces random colour variances
// Major colors form the core of the scheme
// Names changed to reflect usage, comments show pre-refactor names

const variablesContent = Assets.getText('client/imports/general/variables.css');

const regionRegex = /\/\*\s*#region\s+([^ ]*?)\s+(.*?)\s*\*\/((.|\s)*?)\/\*\s*#endregion\s*\*\//igm;

for (let matches = regionRegex.exec(variablesContent); matches; matches = regionRegex.exec(variablesContent)) {
	const [, type, section, content] = matches;
	[...content.match(/--(.*?):\s*(.*?);/igm)].forEach((entry) => {
		const matches = /--(.*?):\s*(.*?);/im.exec(entry);
		const [, name, value] = matches;

		if (type === 'fonts') {
			theme.addVariable('font', name, value, 'Fonts', true);
			return;
		}

		if (type === 'colors') {
			if (/var/.test(value)) {
				const [, variableName] = value.match(/var\(--(.*?)\)/i);
				theme.addVariable('color', name, variableName, section, true, 'expression', ['color', 'expression']);
				return;
			}

			theme.addVariable('color', name, value, section, true, 'color', ['color', 'expression']);
			return;
		}

		if (type === 'less-colors') {
			if (/var/.test(value)) {
				const [, variableName] = value.match(/var\(--(.*?)\)/i);
				theme.addVariable('color', name, `@${ variableName }`, section, true, 'expression', ['color', 'expression']);
				return;
			}

			theme.addVariable('color', name, value, section, true, 'color', ['color', 'expression']);
		}
	});
}

settings.add('theme-custom-css', '', {
	group: 'Layout',
	type: 'code',
	code: 'text/css',
	multiline: true,
	section: 'Custom CSS',
	public: true,
});