Actually keeping colorMode even if theme = null

elastic · Sep 30, 2021 · b2dcb74 · b2dcb74
1 parent 5bea5bd
commit b2dcb74
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
@@ -65,7 +65,6 @@ export class AppView extends Component {
         {({ theme }) => (
           <EuiProvider
             cache={emotionCache}
-            resetStyles={true}
             theme={theme.includes('amsterdam') ? EuiThemeAmsterdam : null}
             colorMode={theme.includes('light') ? 'light' : 'dark'}
           >

diff --git a/src/components/provider/provider.tsx b/src/components/provider/provider.tsx
@@ -13,22 +13,27 @@ import {
   EuiGlobalStyles,
   EuiGlobalStylesProps,
 } from '../../global_styling/reset/global_styles';
-import { EuiThemeProvider, EuiThemeProviderProps } from '../../services';
+import {
+  EuiThemeProvider,
+  EuiThemeProviderProps,
+  EuiThemeSystem,
+} from '../../services';
+import { EuiThemeAmsterdam } from '../../themes/eui-amsterdam/theme';
 
 export interface EuiProviderProps<T>
   extends Omit<EuiThemeProviderProps<T>, 'children' | 'theme'>,
     EuiGlobalStylesProps {
   /**
    * Provide a specific EuiTheme; Defaults to EuiThemeDefault;
-   * Pass `null` to remove all theming including global reset and `colorMode`.
+   * Pass `null` to remove all theming including global reset
    */
-  theme?: EuiThemeProviderProps<T>['theme'] | null;
+  theme?: EuiThemeSystem | null;
   cache?: EmotionCache;
 }
 
 export function EuiProvider<T = {}>({
   cache,
-  theme,
+  theme = EuiThemeAmsterdam,
   colorMode,
   modify,
   children,
@@ -45,6 +50,6 @@ export function EuiProvider<T = {}>({
       {children}
     </EuiThemeProvider>
   ) : (
-    children
+    <EuiThemeProvider colorMode={colorMode}>{children}</EuiThemeProvider>
   );
 }
diff --git a/src/theme_dark.scss b/src/theme_dark.scss
@@ -4,6 +4,9 @@
 // Global styling
 @import 'global_styling/index';
 
+// The reset file makes use of variables and mixins
+@import 'global_styling/reset/index';
+
 // Components
 @import 'components/index';
 

diff --git a/src/themes/eui-amsterdam/theme.ts b/src/themes/eui-amsterdam/theme.ts
@@ -10,6 +10,7 @@ import {
   buildTheme,
   EuiThemeShape,
   AMSTERDAM_NAME_KEY,
+  EuiThemeSystem,
 } from '../../services/theme';
 import { animation } from '../../global_styling/variables/_animations';
 import { breakpoint } from '../../global_styling/variables/_breakpoint';
@@ -29,7 +30,7 @@ export const euiThemeAmsterdam: EuiThemeShape = {
   breakpoint,
 };
 
-export const EuiThemeAmsterdam = buildTheme(
+export const EuiThemeAmsterdam: EuiThemeSystem = buildTheme(
   euiThemeAmsterdam,
   AMSTERDAM_NAME_KEY
 );