diff --git a/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js b/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js
index f32e7309ef..b9a6399999 100644
--- a/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { useGuidedTour } from '@strapi/helper-plugin';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import { ConfigurationsContext } from '../../../contexts';
 import {
   fetchAppInfo,
@@ -48,7 +48,7 @@ const queryClient = new QueryClient({
 });
 
 const app = (
-  <ThemeToggleProvider themes={{ light: lightTheme }}>
+  <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
     <Theme>
       <QueryClientProvider client={queryClient}>
         <ConfigurationsContext.Provider value={{ showReleaseNotification: false }}>
diff --git a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
index bba07b5f42..acd476218a 100644
--- a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useGuidedTour } from '@strapi/helper-plugin';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../Theme';
 import ThemeToggleProvider from '../../../ThemeToggleProvider';
 import GuidedTourModal from '../index';
@@ -30,7 +30,7 @@ jest.mock('@strapi/helper-plugin', () => ({
 }));
 
 const App = (
-  <ThemeToggleProvider themes={{ light: lightTheme }}>
+  <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
     <Theme>
       <IntlProvider locale="en" messages={{}} defaultLocale="en" textComponent="span">
         <GuidedTourModal />
diff --git a/packages/core/admin/admin/src/components/Notifications/tests/index.test.js b/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
index 8025ed5635..50253f0a07 100644
--- a/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
@@ -9,7 +9,7 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useNotification } from '@strapi/helper-plugin';
 import { act } from 'react-dom/test-utils';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../Theme';
 import ThemeToggleProvider from '../../ThemeToggleProvider';
 import Notifications from '../index';
@@ -21,7 +21,7 @@ describe('<Notifications />', () => {
     const {
       container: { firstChild },
     } = render(
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <IntlProvider locale="en" messages={messages} defaultLocale="en" textComponent="span">
             <Notifications>
@@ -85,7 +85,7 @@ describe('<Notifications />', () => {
     };
 
     render(
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <IntlProvider locale="en" defaultLocale="en" messages={messages} textComponent="span">
             <Notifications>
@@ -128,7 +128,7 @@ describe('<Notifications />', () => {
     };
 
     render(
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <IntlProvider locale="en" defaultLocale="en" messages={messages} textComponent="span">
             <Notifications>
diff --git a/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
index 4ce04c6eea..fd0cdcc463 100644
--- a/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
@@ -8,7 +8,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../components/Theme';
 import ThemeToggleProvider from '../../../../components/ThemeToggleProvider';
 import { App as ContentManagerApp } from '..';
@@ -98,7 +98,7 @@ describe('Content manager | App | main', () => {
 
     const { container } = render(
       <IntlProvider messages={{}} defaultLocale="en" locale="en">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <DndProvider backend={HTML5Backend}>
               <Provider store={store}>
@@ -808,7 +808,7 @@ describe('Content manager | App | main', () => {
 
     render(
       <IntlProvider messages={{}} defaultLocale="en" locale="en">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <DndProvider backend={HTML5Backend}>
               <Provider store={store}>
@@ -854,7 +854,7 @@ describe('Content manager | App | main', () => {
 
     render(
       <IntlProvider messages={{}} defaultLocale="en" locale="en">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <DndProvider backend={HTML5Backend}>
               <Provider store={store}>
@@ -899,7 +899,7 @@ describe('Content manager | App | main', () => {
 
     render(
       <IntlProvider messages={{}} defaultLocale="en" locale="en">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <DndProvider backend={HTML5Backend}>
               <Provider store={store}>
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
index a04837c6d4..16d19424d6 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../components/ThemeToggleProvider';
 import { Header } from '../index';
@@ -33,7 +33,7 @@ const makeApp = (props = defaultProps) => {
   return (
     <MemoryRouter>
       <IntlProvider locale="en" defaultLocale="en" messages={{}}>
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <Header {...props} />
           </Theme>
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/tests/index.test.js
index c5d2260d8a..e708b02755 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/tests/index.test.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../components/ThemeToggleProvider';
 import Informations from '../index';
@@ -24,7 +24,7 @@ const makeApp = () => {
       defaultLocale="en"
       messages={{ 'containers.Edit.information': 'Information' }}
     >
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <Informations />
         </Theme>
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
index eac242841e..1fe42793ce 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../components/Theme';
 import ThemeToggleProvider from '../../../../components/ThemeToggleProvider';
 import NoContentType from '../index';
@@ -19,7 +19,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
     } = render(
       <Router history={createMemoryHistory()}>
         <IntlProvider messages={{}} defaultLocale="en" textComponent="span" locale="en">
-          <ThemeToggleProvider themes={{ light: lightTheme }}>
+          <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
             <Theme>
               <NoContentType />
             </Theme>
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
index 8cedb58686..91c2d2a60b 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../components/Theme';
 import ThemeToggleProvider from '../../../../components/ThemeToggleProvider';
 import NoPermissions from '../index';
@@ -23,7 +23,7 @@ describe('<NoPermissions />', () => {
       container: { firstChild },
     } = render(
       <IntlProvider locale="en" messages={{}} defaultLocale="en" textComponent="span">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <NoPermissions />
           </Theme>
diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
index 779f896399..66a8379cc5 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import ProfilePage from '../index';
 import server from './utils/server';
 import ThemeToggleProvider from '../../../components/ThemeToggleProvider';
@@ -33,7 +33,7 @@ const client = new QueryClient({
 const App = (
   <QueryClientProvider client={client}>
     <IntlProvider messages={{}} textComponent="span" locale="en">
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <ProfilePage />
         </Theme>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
index 36fbae227b..4db5f8446c 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
@@ -5,7 +5,7 @@ import { Router, Route } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { useRBAC } from '@strapi/helper-plugin';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import { axiosInstance } from '../../../../../../core/utils';
 import Theme from '../../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../../components/ThemeToggleProvider';
@@ -51,7 +51,7 @@ const makeApp = history => {
   return (
     <QueryClientProvider client={client}>
       <IntlProvider messages={{}} defaultLocale="en" textComponent="span" locale="en">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <Router history={history}>
               <Route path="/settings/api-tokens">
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/index.test.js
index a1c9dc6786..d218e1ea70 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/index.test.js
@@ -10,7 +10,7 @@ import { IntlProvider } from 'react-intl';
 import { Router, Switch, Route } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import moment from 'moment';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../../components/ThemeToggleProvider';
 
@@ -39,7 +39,7 @@ const makeApp = history => (
     locale="en"
     defaultLocale="en"
   >
-    <ThemeToggleProvider themes={{ light: lightTheme }}>
+    <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
       <Theme>
         <Router history={history}>
           <Switch>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
index 58319a64aa..10189c7ffa 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
@@ -10,7 +10,7 @@ import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { useRBAC } from '@strapi/helper-plugin';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import { useRolesList } from '../../../../../../hooks';
 
 import Theme from '../../../../../../components/Theme';
@@ -33,7 +33,7 @@ jest.mock('../../../../../../hooks', () => ({
 
 const makeApp = history => (
   <IntlProvider messages={{}} defaultLocale="en" textComponent="span" locale="en">
-    <ThemeToggleProvider themes={{ light: lightTheme }}>
+    <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
       <Theme>
         <Router history={history}>
           <ListPage />
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/index.test.js
index b6b89e6cb4..48a2dbfacb 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/index.test.js
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { createMemoryHistory } from 'history';
 import { Router, Route } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../../../components/ThemeToggleProvider';
 import PaginationFooter from '../index';
@@ -11,7 +11,7 @@ import PaginationFooter from '../index';
 const makeApp = (history, pagination) => {
   return (
     <IntlProvider messages={{}} textComponent="span" locale="en" defaultLocale="en">
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <Router history={history}>
             <Route path="/settings/user">
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
index b26e919a4f..6de1a66583 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
@@ -5,7 +5,7 @@ import { Router, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { createMemoryHistory } from 'history';
 import { useRBAC } from '@strapi/helper-plugin';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../../components/ThemeToggleProvider';
 import ListPage from '../index';
@@ -32,7 +32,7 @@ const makeApp = history => {
   return (
     <QueryClientProvider client={client}>
       <IntlProvider messages={{}} defaultLocale="en" textComponent="span" locale="en">
-        <ThemeToggleProvider themes={{ light: lightTheme }}>
+        <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
           <Theme>
             <Router history={history}>
               <Route path="/settings/user">
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js
index 27f83931d0..4de177a630 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/tests/index.test.js
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import en from '../../../../../../../../translations/en.json';
 import Theme from '../../../../../../../../components/Theme';
 import ThemeToggleProvider from '../../../../../../../../components/ThemeToggleProvider';
@@ -17,7 +17,7 @@ const makeApp = component => {
 
   return (
     <LanguageProvider messages={messages} localeNames={localeNames}>
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <Router history={history}>{component}</Router>
         </Theme>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
index bd98329e33..d51fd14df6 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
@@ -4,7 +4,7 @@ import { StrapiAppProvider, AppInfosContext } from '@strapi/helper-plugin';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../components/Theme';
 import ThemeToggleProvider from '../../../components/ThemeToggleProvider';
 import { SettingsPage } from '..';
@@ -27,7 +27,7 @@ jest.mock('react-intl', () => ({
 jest.mock('../pages/ApplicationInfosPage', () => () => <h1>App infos</h1>);
 
 const makeApp = (history, settings) => (
-  <ThemeToggleProvider themes={{ light: lightTheme }}>
+  <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
     <Theme>
       <AppInfosContext.Provider value={{ shouldUpdateStrapi: false }}>
         <StrapiAppProvider
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/index.test.js
index 9b2da329d9..1e727fc800 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/index.test.js
@@ -10,7 +10,7 @@ import { IntlProvider } from 'react-intl';
 import { Router, Switch, Route } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import moment from 'moment';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import Theme from '../../../../../../../../admin/src/components/Theme';
 import ThemeToggleProvider from '../../../../../../../../admin/src/components/ThemeToggleProvider';
 
@@ -39,7 +39,7 @@ const makeApp = history => (
     locale="en"
     defaultLocale="en"
   >
-    <ThemeToggleProvider themes={{ light: lightTheme }}>
+    <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
       <Theme>
         <Router history={history}>
           <Switch>
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
index e6dbbb83c5..13e9dfc1f4 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
@@ -10,7 +10,7 @@ import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { useRBAC } from '@strapi/helper-plugin';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import { useRolesList } from '../../../../../../../../admin/src/hooks';
 
 import Theme from '../../../../../../../../admin/src/components/Theme';
@@ -33,7 +33,7 @@ jest.mock('../../../../../../../../admin/src/hooks', () => ({
 
 const makeApp = history => (
   <IntlProvider messages={{}} textComponent="span" locale="en">
-    <ThemeToggleProvider themes={{ light: lightTheme }}>
+    <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
       <Theme>
         <Router history={history}>
           <ListPage />
diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/index.test.js b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/index.test.js
index 4ccede616b..0bd0d71185 100644
--- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/index.test.js
+++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/index.test.js
@@ -4,7 +4,7 @@
  *
  */
 
-import { Layout, lightTheme } from '@strapi/design-system';
+import { Layout, lightTheme, darkTheme } from '@strapi/design-system';
 import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import React from 'react';
@@ -31,7 +31,7 @@ const makeApp = () => {
 
   return (
     <LanguageProvider messages={messages} localeNames={localeNames}>
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <Router history={history}>
             <Layout sideNav={<ContentTypeBuilderNav />}>
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/index.test.js b/packages/core/content-type-builder/admin/src/pages/ListView/tests/index.test.js
index a8b0e4d94e..ee1dea1f75 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/index.test.js
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/index.test.js
@@ -8,7 +8,7 @@ import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import React from 'react';
 import { Router } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import LanguageProvider from '../../../../../../admin/admin/src/components/LanguageProvider';
 import Theme from '../../../../../../admin/admin/src/components/Theme';
 import ThemeToggleProvider from '../../../../../../admin/admin/src/components/ThemeToggleProvider';
@@ -54,7 +54,7 @@ const makeApp = () => {
 
   return (
     <LanguageProvider messages={messages} localeNames={localeNames}>
-      <ThemeToggleProvider themes={{ light: lightTheme }}>
+      <ThemeToggleProvider themes={{ light: lightTheme, dark: darkTheme }}>
         <Theme>
           <Router history={history}>
             <FormModalNavigationProvider>