diff --git a/examples/guided_onboarding_example/public/components/app.tsx b/examples/guided_onboarding_example/public/components/app.tsx
index 20430534a54e3..ca01c589ab743 100755
--- a/examples/guided_onboarding_example/public/components/app.tsx
+++ b/examples/guided_onboarding_example/public/components/app.tsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 import { Routes, Router, Route } from '@kbn/shared-ux-router';
-import { EuiPageTemplate } from '@elastic/eui';
+import { EuiPageTemplate, EuiProvider } from '@elastic/eui';
 import { CoreStart, ScopedHistory } from '@kbn/core/public';
 
 import { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public/types';
@@ -30,62 +30,64 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
   const { notifications, guidedOnboarding, history } = props;
 
   return (
-    <I18nProvider>
-      <EuiPageTemplate restrictWidth={true} panelled={true}>
-        <EuiPageTemplate.Header
-          pageTitle={
-            <FormattedMessage
-              id="guidedOnboardingExample.title"
-              defaultMessage="Guided onboarding examples"
-            />
-          }
-        />
-        {guidedOnboarding?.guidedOnboardingApi?.isEnabled ? (
-          <EuiPageTemplate.Section>
-            <Router history={history}>
-              <Routes>
-                <Route exact path="/">
-                  <Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
-                </Route>
-                <Route exact path="/stepOne">
-                  <StepOne guidedOnboarding={guidedOnboarding} />
-                </Route>
-                <Route exact path="/stepTwo">
-                  <StepTwo />
-                </Route>
-                <Route exact path="/stepThree">
-                  <StepThree guidedOnboarding={guidedOnboarding} />
-                </Route>
-                <Route path="/stepFour/:indexName?">
-                  <StepFour guidedOnboarding={guidedOnboarding} />
-                </Route>
-              </Routes>
-            </Router>
-          </EuiPageTemplate.Section>
-        ) : (
-          <EuiPageTemplate.EmptyPrompt
-            iconType="error"
-            color="danger"
-            title={
-              <h2>
-                <FormattedMessage
-                  id="guidedOnboardingExample.errorTitle"
-                  defaultMessage="Guided onboarding is disabled"
-                />
-              </h2>
-            }
-            body={
-              <p>
-                <FormattedMessage
-                  id="guidedOnboardingExample.errorDescription"
-                  defaultMessage="Make sure your Kibana instance runs on Cloud and/or
-                  your user has access to Setup guides feature."
-                />
-              </p>
+    <EuiProvider colorMode="light">
+      <I18nProvider>
+        <EuiPageTemplate restrictWidth={true} panelled={true}>
+          <EuiPageTemplate.Header
+            pageTitle={
+              <FormattedMessage
+                id="guidedOnboardingExample.title"
+                defaultMessage="Guided onboarding examples"
+              />
             }
           />
-        )}
-      </EuiPageTemplate>
-    </I18nProvider>
+          {guidedOnboarding?.guidedOnboardingApi?.isEnabled ? (
+            <EuiPageTemplate.Section>
+              <Router history={history}>
+                <Routes>
+                  <Route exact path="/">
+                    <Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
+                  </Route>
+                  <Route exact path="/stepOne">
+                    <StepOne guidedOnboarding={guidedOnboarding} />
+                  </Route>
+                  <Route exact path="/stepTwo">
+                    <StepTwo />
+                  </Route>
+                  <Route exact path="/stepThree">
+                    <StepThree guidedOnboarding={guidedOnboarding} />
+                  </Route>
+                  <Route path="/stepFour/:indexName?">
+                    <StepFour guidedOnboarding={guidedOnboarding} />
+                  </Route>
+                </Routes>
+              </Router>
+            </EuiPageTemplate.Section>
+          ) : (
+            <EuiPageTemplate.EmptyPrompt
+              iconType="error"
+              color="danger"
+              title={
+                <h2>
+                  <FormattedMessage
+                    id="guidedOnboardingExample.errorTitle"
+                    defaultMessage="Guided onboarding is disabled"
+                  />
+                </h2>
+              }
+              body={
+                <p>
+                  <FormattedMessage
+                    id="guidedOnboardingExample.errorDescription"
+                    defaultMessage="Make sure your Kibana instance runs on Cloud and/or
+                    your user has access to Setup guides feature."
+                  />
+                </p>
+              }
+            />
+          )}
+        </EuiPageTemplate>
+      </I18nProvider>
+    </EuiProvider>
   );
 };