Enable dark mode and fix theme

front/.storybook/main.js

@@ -34,7 +34,9 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/preset-create-react-app",
-    "@storybook/addon-coverage"
+    "@storybook/addon-coverage",
+    "@storybook/addon-styling"
+
   ],
   framework: {
     name: '@storybook/react-webpack5',

front/.storybook/preview.ts

@@ -1,10 +1,24 @@
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { Preview } from '@storybook/react';
+import { ThemeProvider } from '@emotion/react';
+import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import { lightTheme, darkTheme } from '../src/modules/ui/layout/styles/themes';
+
 
 initialize();
 
 const preview: Preview = {
-  decorators: [mswDecorator],
+  decorators: [
+    mswDecorator,
+    withThemeFromJSXProvider({
+        themes: {
+          light: lightTheme,
+          dark: darkTheme,
+        },
+        defaultTheme: "light",
+        Provider: ThemeProvider,
+      })
+  ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {