From c47cca3e3050636985fcdd6b37456d4cdb95907f Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 8 Jul 2024 15:32:48 +0200
Subject: [PATCH] [8.15] Fix &quot;Elastic did not load properly&quot; message
 color when system in dark mode (#187653) (#187670)

# Backport

This will backport the following commits from `main` to `8.15`:
- [Fix &quot;Elastic did not load properly&quot; message color when
system in dark mode
(#187653)](https://github.com/elastic/kibana/pull/187653)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2024-07-05T12:30:42Z","message":"Fix
\"Elastic did not load properly\" message color when system in dark mode
(#187653)\n\n## Summary\r\n\r\nfix
https://github.com/elastic/kibana/issues/187570\r\n\r\nThe problem was
that when the system/browser was in dark mode, the\r\ndefault text color
became white, but the background was forced to a\r\nspecific bright
color, so the text became unreadable. A quick fix is to\r\nalso force
the text color (I used EUI text colors)\r\n\r\n\r\n<img width=\"858\"
alt=\"Screenshot 2024-07-05 at 12 44
11\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac\">","sha":"305f66522c2cd4d2c578b33b9f62464de97d7190","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:prev-minor","Feature:Chrome","v8.16.0"],"title":"Fix
\"Elastic did not load properly\" message color when system in dark
mode","number":187653,"url":"https://github.com/elastic/kibana/pull/187653","mergeCommit":{"message":"Fix
\"Elastic did not load properly\" message color when system in dark mode
(#187653)\n\n## Summary\r\n\r\nfix
https://github.com/elastic/kibana/issues/187570\r\n\r\nThe problem was
that when the system/browser was in dark mode, the\r\ndefault text color
became white, but the background was forced to a\r\nspecific bright
color, so the text became unreadable. A quick fix is to\r\nalso force
the text color (I used EUI text colors)\r\n\r\n\r\n<img width=\"858\"
alt=\"Screenshot 2024-07-05 at 12 44
11\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac\">","sha":"305f66522c2cd4d2c578b33b9f62464de97d7190"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187653","number":187653,"mergeCommit":{"message":"Fix
\"Elastic did not load properly\" message color when system in dark mode
(#187653)\n\n## Summary\r\n\r\nfix
https://github.com/elastic/kibana/issues/187570\r\n\r\nThe problem was
that when the system/browser was in dark mode, the\r\ndefault text color
became white, but the background was forced to a\r\nspecific bright
color, so the text became unreadable. A quick fix is to\r\nalso force
the text color (I used EUI text colors)\r\n\r\n\r\n<img width=\"858\"
alt=\"Screenshot 2024-07-05 at 12 44
11\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac\">","sha":"305f66522c2cd4d2c578b33b9f62464de97d7190"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../src/bootstrap/__snapshots__/render_template.test.ts.snap    | 2 ++
 .../src/bootstrap/render_template.ts                            | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/core/rendering/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap b/packages/core/rendering/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap
index af1808d9a2019..c1754bce247a9 100644
--- a/packages/core/rendering/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap
+++ b/packages/core/rendering/core-rendering-server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap
@@ -64,10 +64,12 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
       var errorTitleEl = document.createElement('h1');
       errorTitleEl.innerText = errorTitle;
       errorTitleEl.style.margin = '20px';
+      errorTitleEl.style.color = '#1a1c21';
 
       var errorTextEl = document.createElement('p');
       errorTextEl.innerText = errorText;
       errorTextEl.style.margin = '20px';
+      errorTextEl.style.color = '#343741';
 
       var errorReloadEl = document.createElement('button');
       errorReloadEl.innerText = errorReload;
diff --git a/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts b/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts
index fbb7a4290bf14..7644841ddead0 100644
--- a/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts
+++ b/packages/core/rendering/core-rendering-server-internal/src/bootstrap/render_template.ts
@@ -80,10 +80,12 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
       var errorTitleEl = document.createElement('h1');
       errorTitleEl.innerText = errorTitle;
       errorTitleEl.style.margin = '20px';
+      errorTitleEl.style.color = '#1a1c21';
 
       var errorTextEl = document.createElement('p');
       errorTextEl.innerText = errorText;
       errorTextEl.style.margin = '20px';
+      errorTextEl.style.color = '#343741';
 
       var errorReloadEl = document.createElement('button');
       errorReloadEl.innerText = errorReload;