Function renderAppThemes

src/pages/themeSetting/themeSetting.js:103–141

()

	$page.addEventListener("click", clickHandler);

	function renderAppThemes() {
		// Remove and destroy CodeMirror preview when showing app themes
		destroyPreview("switch-tab");
		$themePreview.remove();
		const content = [];

		if (!DOES_SUPPORT_THEME) {
			content.push(
				<div className="list-item">
					<span className="icon warningreport_problem"></span>
					<div className="container">
						<span className="text">{strings["unsupported device"]}</span>
					</div>
				</div>,
			);
		}

		const currentTheme = appSettings.value.appTheme;
		let $currentItem;
		themes.list().forEach((themeSummary) => {
			const theme = themes.get(themeSummary.id);
			const isCurrentTheme = theme.id === currentTheme;
			const isPremium = theme.version === "paid" && !config.HAS_PRO;
			const $item = (
				<Item
					name={themeSummary.name}
					isPremium={isPremium}
					isCurrent={isCurrentTheme}
					swatches={getAppThemeSwatches(theme)}
					onclick={() => setAppTheme(theme, isPremium)}
				/>
			);
			content.push($item);
			if (isCurrentTheme) $currentItem = $item;
		});

		list.el.content = content;
		$currentItem?.scrollIntoView();
	}

	function renderEditorThemes() {
		const currentTheme = (