Properly support the usage of the modal without an explicit theme

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoqa/carousel",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "index.js",
   "module": "es/index.js",
   "types": "index.d.ts",

src/carousel/CarouselWithModal.test.tsx

@@ -34,12 +34,10 @@ const TestCarouselTrigger = ({ slideIndexToOpen }: any) => {
 
 const TestCarouselWithTrigger = ({ slideIndexToOpen }: any) => {
   return (
-    <MuiThemeProvider theme={theme}>
-      <CarouselContextProvider slides={slides}>
-        <TestCarouselTrigger slideIndexToOpen={slideIndexToOpen} />
-        <CarouselWithModal getTranslations={getDefaultTranslations} />
-      </CarouselContextProvider>
-    </MuiThemeProvider>
+    <CarouselContextProvider slides={slides}>
+      <TestCarouselTrigger slideIndexToOpen={slideIndexToOpen} />
+      <CarouselWithModal getTranslations={getDefaultTranslations} />
+    </CarouselContextProvider>
   );
 };
 
@@ -88,14 +86,12 @@ describe('CarouselWithModal', () => {
 
   it('should not display the controls if there is only one slide', () => {
     const CarouselWithOne = () => (
-      <MuiThemeProvider theme={theme}>
-        <CarouselContextProvider slides={[slides[0]]}>
-          <CarouselWithModal
-            isInitiallyOpen
-            getTranslations={getDefaultTranslations}
-          />
-        </CarouselContextProvider>
-      </MuiThemeProvider>
+      <CarouselContextProvider slides={[slides[0]]}>
+        <CarouselWithModal
+          isInitiallyOpen
+          getTranslations={getDefaultTranslations}
+        />
+      </CarouselContextProvider>
     );
 
     const { queryByText } = render(<CarouselWithOne />);

src/carousel/CarouselWithModal.tsx

@@ -2,22 +2,28 @@ import React from 'react';
 import { CarouselModal } from './CarouselModal';
 import { CarouselModalContent } from './CarouselModalContent';
 import { CarouselType } from './Carousel.type';
-import { MuiThemeProvider } from '@material-ui/core';
-import createPalette from '@material-ui/core/styles/createPalette';
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import { useTheme as useThemeWithoutDefault } from '@material-ui/styles';
 
 // Better UX if the modal is always in dark theme
-const darkPalette = createPalette({
-  type: 'dark',
+const darkTheme = createMuiTheme({
+  palette: {
+    type: 'dark',
+  },
 });
 
 export function CarouselWithModal(props: CarouselType) {
+  const theme = useThemeWithoutDefault();
+
+  const defaultThemeOrExistingOne = theme
+    ? () => ({
+        ...theme,
+        palette: darkTheme.palette,
+      })
+    : darkTheme;
+
   return (
-    <MuiThemeProvider
-      theme={(defaultTheme) => ({
-        ...defaultTheme,
-        palette: darkPalette,
-      })}
-    >
+    <MuiThemeProvider theme={defaultThemeOrExistingOne}>
       <CarouselModal isInitiallyOpen={props.isInitiallyOpen}>
         <CarouselModalContent {...props} />
       </CarouselModal>