From f65f5ab5b00e4d774667a2bceae855bd3ce119b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Mon, 30 Jun 2025 12:07:53 -0300
Subject: [PATCH] feat: add theme palette to `AppErrorPage` (#36321)

---
 .changeset/big-bees-crash.md                  |  5 ++
 .../meteor/client/views/root/AppErrorPage.tsx | 52 +++++++++++--------
 2 files changed, 34 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/big-bees-crash.md

diff --git a/.changeset/big-bees-crash.md b/.changeset/big-bees-crash.md
new file mode 100644
index 00000000000..c44788770da
--- /dev/null
+++ b/.changeset/big-bees-crash.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Adds theme palette to Application error page
diff --git a/apps/meteor/client/views/root/AppErrorPage.tsx b/apps/meteor/client/views/root/AppErrorPage.tsx
index 2e594f6576f..2d6dd2860c4 100644
--- a/apps/meteor/client/views/root/AppErrorPage.tsx
+++ b/apps/meteor/client/views/root/AppErrorPage.tsx
@@ -1,4 +1,5 @@
-import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
+import { Box, PaletteStyleTag, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
+import { useThemeMode } from '@rocket.chat/ui-theming';
 import type { ErrorInfo, ReactElement } from 'react';
 
 type AppErrorPageProps = {
@@ -8,30 +9,35 @@ type AppErrorPageProps = {
 };
 
 const AppErrorPage = (_props: AppErrorPageProps): ReactElement => {
+	const [, , theme] = useThemeMode();
+
 	return (
-		<Box display='flex' justifyContent='center' height='full' backgroundColor='surface'>
-			<States>
-				<StatesIcon name='error-circle' />
-				<StatesTitle>Application Error</StatesTitle>
-				<StatesSubtitle>The application GUI just crashed.</StatesSubtitle>
+		<>
+			<PaletteStyleTag theme={theme} tagId='app-error-palette' />
+			<Box display='flex' justifyContent='center' height='full' backgroundColor='surface'>
+				<States>
+					<StatesIcon name='error-circle' />
+					<StatesTitle>Application Error</StatesTitle>
+					<StatesSubtitle>The application GUI just crashed.</StatesSubtitle>
 
-				<StatesActions>
-					<StatesAction
-						onClick={() => {
-							const result = indexedDB.deleteDatabase('MeteorDynamicImportCache');
-							result.onsuccess = () => {
-								window.location.reload();
-							};
-							result.onerror = () => {
-								window.location.reload();
-							};
-						}}
-					>
-						Reload Application
-					</StatesAction>
-				</StatesActions>
-			</States>
-		</Box>
+					<StatesActions>
+						<StatesAction
+							onClick={() => {
+								const result = indexedDB.deleteDatabase('MeteorDynamicImportCache');
+								result.onsuccess = () => {
+									window.location.reload();
+								};
+								result.onerror = () => {
+									window.location.reload();
+								};
+							}}
+						>
+							Reload Application
+						</StatesAction>
+					</StatesActions>
+				</States>
+			</Box>
+		</>
 	);
 };