chore(theme): simplify theme management with <EuiProvider>

Author: KatoakDR

electron/renderer/context/chrome.tsx

@@ -2,9 +2,10 @@
 // https://github.com/elastic/next-eui-starter/blob/master/src/components/theme.tsx
 
 import type { EuiThemeColorMode } from '@elastic/eui';
+import { EuiProvider } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import { createContext, useEffect, useState } from 'react';
-import { enableTheme, getThemeName } from '../lib/theme.js';
+import { getThemeName, setThemeName } from '../lib/theme.js';
 
 /**
  * React context for storing theme-related data and callbacks.
@@ -38,14 +39,14 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = (
     setColorMode(getThemeName());
   }, []);
 
-  // Enable the correct theme when color mode changes.
+  // Save user's theme preference.
   useEffect(() => {
-    enableTheme(colorMode);
+    setThemeName(colorMode);
   }, [colorMode]);
 
   return (
     <ThemeContext.Provider value={{ colorMode, setColorMode }}>
-      {children}
+      <EuiProvider colorMode={colorMode}>{children}</EuiProvider>
     </ThemeContext.Provider>
   );
 };

electron/renderer/context/theme.tsx

@@ -5,74 +5,6 @@ import type { EuiThemeColorMode } from '@elastic/eui';
 import type { Maybe } from '../../common/types.js';
 import { LocalStorage } from './local-storage.js';
 
-/**
- * Find all the theme links on the page that we could switch between.
- * See `_document.tsx` for how these are added to the page.
- */
-const getAllThemeLinks = (): Array<HTMLLinkElement> => {
-  return [
-    ...document.querySelectorAll<HTMLLinkElement>(
-      'link[data-name="eui-theme"]'
-    ),
-  ];
-};
-
-/**
- * Find the theme link on the page that matches the given theme name.
- */
-const getThemeLink = (themeName: EuiThemeColorMode): Maybe<HTMLLinkElement> => {
-  return getAllThemeLinks().find((themeLink) => {
-    return themeLink.dataset.theme === themeName;
-  });
-};
-
-/**
- * Sets the user's theme preference and actively updates the UI to match.
- * To only set the preference without updating the UI, use `setThemeName`.
- */
-export const enableTheme = (newThemeName: EuiThemeColorMode): void => {
-  const oldThemeName = getThemeName();
-  setThemeName(newThemeName);
-
-  const newThemeLink = getThemeLink(newThemeName);
-
-  if (!newThemeLink) {
-    return;
-  }
-
-  // When toggling the theme, to prevent a flash of unstyled content
-  // then preload the new theme's CSS before enabling it.
-  const preloadThemeLink = document.createElement('link');
-  preloadThemeLink.rel = 'preload';
-  preloadThemeLink.as = 'style';
-  preloadThemeLink.href = newThemeLink.href;
-  document.head.appendChild(preloadThemeLink);
-
-  // Once the new theme is loaded then we can disable the old theme.
-  // Because the new theme is preloaded, the change should be instant.
-  preloadThemeLink.onload = () => {
-    for (const themeLink of getAllThemeLinks()) {
-      // Disable all theme links, except for the desired theme, which we enable
-      themeLink.disabled = themeLink.dataset.theme !== newThemeName;
-      themeLink.ariaDisabled = String(themeLink.dataset.theme !== newThemeName);
-    }
-
-    // Add a class to the `body` element that indicates which theme we're using.
-    // This allows any custom styling to adapt to the current theme.
-    if (document.body.classList.contains(`appTheme-${oldThemeName}`)) {
-      document.body.classList.replace(
-        `appTheme-${oldThemeName}`,
-        `appTheme-${newThemeName}`
-      );
-    } else {
-      document.body.classList.add(`appTheme-${newThemeName}`);
-    }
-
-    // Remove the preload link element.
-    document.head.removeChild(preloadThemeLink);
-  };
-};
-
 /**
  * Gets the user's theme preference.
  */
@@ -83,7 +15,6 @@ export const getThemeName = (): EuiThemeColorMode => {
 /**
  * Sets the user's theme preference.
  * Does not actively change the UI look and feel.
- * To do that, use `enableTheme` or reload the app.
  */
 export const setThemeName = (themeName: EuiThemeColorMode): void => {
   setStoredThemeName(themeName);

electron/renderer/lib/theme.ts

@@ -6,7 +6,6 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Layout } from '../components/layout.jsx';
 import { NoSSRBoundary } from '../components/no-ssr/no-ssr.jsx';
-import { ChromeProvider } from '../context/chrome.jsx';
 import { GameProvider } from '../context/game.jsx';
 import { LoggerProvider } from '../context/logger.jsx';
 import { ThemeProvider } from '../context/theme.jsx';
@@ -28,17 +27,15 @@ const App: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => (
      */}
     <NoSSRBoundary>
       <ThemeProvider>
-        <ChromeProvider>
-          <LoggerProvider>
-            <EuiErrorBoundary>
-              <GameProvider>
-                <Layout>
-                  <Component {...pageProps} />
-                </Layout>
-              </GameProvider>
-            </EuiErrorBoundary>
-          </LoggerProvider>
-        </ChromeProvider>
+        <LoggerProvider>
+          <EuiErrorBoundary>
+            <GameProvider>
+              <Layout>
+                <Component {...pageProps} />
+              </Layout>
+            </GameProvider>
+          </EuiErrorBoundary>
+        </LoggerProvider>
       </ThemeProvider>
     </NoSSRBoundary>
   </>

electron/renderer/pages/_app.tsx

@@ -2,25 +2,8 @@
 // https://github.com/elastic/next-eui-starter/blob/master/src/pages/_document.tsx
 
 import { Head, Html, Main, NextScript } from 'next/document';
-import type { LinkHTMLAttributes, ReactElement } from 'react';
 import type React from 'react';
 
-/**
- * Nextjs wants you to import CSS stylesheets in the `pages/_app.tsx` file.
- * However, the @elastic/eui library instructs you to load their themes here.
- * We also need to import custom stylesheets, so instead of splitting some
- * of that in the `pages/_app.tsx` file, we do it all here.
- *
- * To get around the eslint rule and console warnings, we cannot use
- * the `<link>` element in the `Head` element directly.
- * So instead we use functions.
- */
-function _createStyleLink(
-  props: LinkHTMLAttributes<HTMLLinkElement>
-): ReactElement {
-  return <link rel="stylesheet" {...props} />;
-}
-
 /**
  * A custom `Document` is commonly used to augment your application's
  * `<html>` and `<body>` tags. This is necessary because Next.js pages skip
@@ -29,16 +12,9 @@ function _createStyleLink(
  * @see https://nextjs.org/docs/advanced-features/custom-document
  */
 const Document: React.FC = () => {
-  // const yourCustomStyleLink = useMemo(() => {
-  //   return createStyleLink({ href: '/your/custom.min.css' });
-  // }, []);
-
   return (
     <Html lang="en">
       <Head>
-        <meta name="eui-styles" />
-        <meta name="eui-styles-utility" />
-        {/* {yourCustomStyleLink} */}
         <meta
           httpEquiv="Content-Security-Policy"
           content={`

electron/renderer/pages/_document.tsx

@@ -492,12 +492,7 @@ const GridPage: React.FC = (): ReactNode => {
           />
         </div>
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.BottomBar
-        paddingSize="none"
-        css={{
-          backgroundColor: euiTheme.colors.lightestShade,
-        }}
-      >
+      <EuiPageTemplate.BottomBar paddingSize="none">
         <div ref={bottomBarRef}>
           <EuiFieldText
             compressed={true}