[DEV] test step between receipice and direct managemnt

2025-01-20 18:45:19 +01:00 · 2025-01-20 18:45:19 +01:00 · d52052de90
commit d52052de90
parent 91defa42c2
55 changed files with 828 additions and 279 deletions
--- a/front/app-build.json
+++ b/front/app-build.json
@ -1,6 +1,6 @@
 {
-  "display": "2025-01-13",
-  "version": "0.0.1-dev\n - 2025-01-13T21:39:39+01:00",
+  "display": "2025-01-14",
+  "version": "0.0.1-dev\n - 2025-01-14T20:19:20+01:00",
  "commit": "0.0.1-dev\n",
-  "date": "2025-01-13T21:39:39+01:00"
+  "date": "2025-01-14T20:19:20+01:00"
 }
--- a/front/package.json
+++ b/front/package.json
@ -38,9 +38,10 @@
    "css-mediaquery": "0.1.2",
    "dayjs": "1.11.13",
    "history": "5.3.0",
+    "next-themes": "^0.4.4",
    "react": "18.3.1",
-    "react-error-boundary": "5.0.0",
    "react-dom": "18.3.1",
+    "react-error-boundary": "5.0.0",
    "react-icons": "5.4.0",
    "react-router-dom": "7.1.1",
    "react-select": "5.9.0",
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
@ -35,6 +35,9 @@ importers:
      history:
        specifier: 5.3.0
        version: 5.3.0
+      next-themes:
+        specifier: ^0.4.4
+        version: 0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      react:
        specifier: 18.3.1
        version: 18.3.1
@ -3820,6 +3823,12 @@ packages:
    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
    engines: {node: '>= 0.4.0'}

+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
  node-domexception@1.0.0:
    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
    engines: {node: '>=10.5.0'}
@ -9838,6 +9847,11 @@ snapshots:

  netmask@2.0.2: {}

+  next-themes@0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
  node-domexception@1.0.0: {}

  node-eval@2.0.0:
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@ -17,7 +17,6 @@ import {
  SelectValueText,
  Stack,
  Text,
-  defaultSystem,
  useDisclosure,
 } from '@chakra-ui/react';

@ -26,6 +25,7 @@ import { App as SpaApp } from '@/scene/App';
 import { USERS, USERS_COLLECTION } from '@/service/session';
 import { hashLocalData } from '@/utils/sso';
 import { Toaster } from './components/ui/toaster';
+import { systemTheme } from './theme/theme';

 const AppEnvHint = () => {
  const dialog = useDisclosure();
@ -120,8 +120,9 @@ const AppEnvHint = () => {
 };

 const App = () => {
+
  return (
-    <ChakraProvider value={defaultSystem}>
+    <ChakraProvider value={systemTheme}>
      <AppEnvHint />
      <SpaApp />
      <Toaster />
--- a/front/src/components/AudioPlayer.tsx
+++ b/front/src/components/AudioPlayer.tsx
@ -2,6 +2,7 @@ import { SyntheticEvent, useEffect, useRef, useState } from 'react';

 import {
  Box,
+  Button,
  Flex,
  IconButton,
  Slider,
@ -31,8 +32,9 @@ import { useSpecificArtists } from '@/service/Artist';
 import { useSpecificGender } from '@/service/Gender';
 import { useSpecificTrack } from '@/service/Track';
 import { DataUrlAccess } from '@/utils/data-url-access';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Icon } from './Icon';

 export enum PlayMode {
  PLAY_ONE,
@ -62,7 +64,6 @@ const formatTime = (time) => {
 };

 export const AudioPlayer = ({ }: AudioPlayerProps) => {
-  const { mode } = useThemeMode();
  const { playTrackList, trackOffset, previous, next, first } =
    useActivePlaylistService();
  const audioRef = useRef<HTMLAudioElement>(null);
@ -85,7 +86,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
        : ''
    );
  }, [dataTrack, setMediaSource]);
-  const backColor = mode('back.100', 'back.800');
+  const backColor = useColorModeValue('back.100', 'back.800');
  const configButton = {
    borderRadius: 'full',
    backgroundColor: '#00000000',
@ -93,6 +94,9 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
      boxShadow: 'outline-over',
      bgColor: 'brand.500',
    },
+    width: "50px",
+    height: "50px",
+    padding: "5px",
  };

  useEffect(() => {
@ -285,11 +289,11 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
              aria-label={'Play'}
              onClick={onPlay}
            >
-              isPlaying ? (
-              <MdPause size="30px" />
+              {isPlaying ? (
+                <MdPause size="30px" />
              ) : (
-              <MdPlayArrow size="30px" />
-              )
+                <MdPlayArrow size="30px" />
+              )}
            </IconButton>
            <IconButton
              {...configButton}
@ -311,18 +315,18 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
              {...configButton}
              aria-label={'jump 15sec in future'}
              onClick={onFastForward}
-            ><MdFastForward size="30px" /></IconButton>
+            ><MdFastForward style={{ width: "100%", height: "100%" }} /></IconButton>
            <IconButton
              {...configButton}
              aria-label={'Next track'}
              marginRight="auto"
              onClick={onNavigateNext}
-            ><MdNavigateNext size="30px" /></IconButton>
+            ><MdNavigateNext style={{ width: "100%", height: "100%" }} /></IconButton>
            <IconButton
              {...configButton}
              aria-label={'continue to the end'}
              onClick={onTypePlay}
-            >playModeIcon[playingMode]</IconButton>
+            >{playModeIcon[playingMode]}</IconButton>
          </Flex>
        </Flex>
      )}
--- a/front/src/components/Layout/PageLayoutInfoCenter.tsx
+++ b/front/src/components/Layout/PageLayoutInfoCenter.tsx
@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';

 import { PageLayout } from '@/components/Layout/PageLayout';
 import { colors } from '@/theme/foundations/colors';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';

 export type LayoutProps = FlexProps & {
  children: ReactNode;
@ -22,7 +22,6 @@ export const PageLayoutInfoCenter = ({
    window.scrollTo(0, 0);
  }, [pathname]);

-  const { mode } = useThemeMode();
  return (
    <PageLayout>
      <Flex
@ -34,7 +33,7 @@ export const PageLayoutInfoCenter = ({
        borderRadius="8px"
        padding="10px"
        boxShadow={'0px 0px 16px ' + colors.back[900]}
-        backgroundColor={mode('#FFFFFF', '#000000')}
+        backgroundColor={useColorModeValue('#FFFFFF', '#000000')}
        {...rest}
      >
        {children}
--- a/front/src/components/TopBar/TopBar.tsx
+++ b/front/src/components/TopBar/TopBar.tsx
@ -2,12 +2,6 @@ import { ReactNode } from 'react';

 import {
  Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerContent,
-  DrawerHeader,
-  DrawerRoot,
  Flex,
  HStack,
  IconButton,
@ -29,15 +23,22 @@ import { useServiceContext } from '@/service/ServiceContext';
 import { SessionState } from '@/service/SessionState';
 import { colors } from '@/theme/foundations/colors';
 import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
-import { useThemeMode } from '@/utils/theme-tools';
 import { useSessionService } from '@/service/session';
 import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
+import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
+import {
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerRoot,
+} from '@/components/ui/drawer';
+import { Button } from '../ui/themed';

 export const TOP_BAR_HEIGHT = '50px';

 export const BUTTON_TOP_BAR_PROPERTY = {
-  colorPalette: '@menu',
+  theme: '@menu',
  height: TOP_BAR_HEIGHT,
 };

@ -47,11 +48,11 @@ export type TopBarProps = {
 };

 export const TopBar = ({ title, children }: TopBarProps) => {
-  const { mode, colorMode, toggleColorMode } = useThemeMode();
+  const { colorMode, toggleColorMode } = useColorMode();
  const { clearToken } = useSessionService();

  const { session } = useServiceContext();
-  const backColor = mode('back.100', 'back.800');
+  const backColor = useColorModeValue('back.100', 'back.800');
  const drawerDisclose = useDisclosure();
  const onChangeTheme = () => {
    drawerDisclose.onOpen();
@ -120,7 +121,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
      <Flex right="0">
        {session?.state !== SessionState.CONNECTED && (
          <>
-            <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onSignIn}>
+            <Button {...BUTTON_TOP_BAR_PROPERTY} theme="@primary" onClick={onSignIn}>
              <LuLogIn />
              <Text paddingLeft="3px" fontWeight="bold">
                Sign-in
@ -149,7 +150,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
              ><MdSupervisedUserCircle /></IconButton>
            </MenuTrigger>
            <MenuContent>
-              <MenuItem value="user" valueText="user" _hover={{}} color={mode('brand.800', 'brand.200')}>
+              <MenuItem value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}>
                <MdSupervisedUserCircle />
                <Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
              </MenuItem>
@ -171,71 +172,69 @@ export const TopBar = ({ title, children }: TopBarProps) => {
          </MenuRoot>
        )}
      </Flex>
-      <Drawer.Root
+      <DrawerRoot
        placement="start"
        onOpenChange={drawerDisclose.onClose}
        open={drawerDisclose.open}
        data-testid="top-bar_drawer-root"
      >
-        <Drawer.Positioner>
-          <Drawer.Content
-            data-testid="top-bar_drawer-content">
-            <Drawer.Header
-              paddingY="auto"
-              as="button"
-              onClick={drawerDisclose.onClose}
-              boxShadow={'0px 2px 4px ' + colors.back[900]}
-              backgroundColor={backColor}
-              color={mode('brand.900', 'brand.50')}
-              textTransform="uppercase"
+        <DrawerContent
+          data-testid="top-bar_drawer-content">
+          <DrawerHeader
+            paddingY="auto"
+            as="button"
+            onClick={drawerDisclose.onClose}
+            boxShadow={'0px 2px 4px ' + colors.back[900]}
+            backgroundColor={backColor}
+            color={useColorModeValue('brand.900', 'brand.50')}
+            textTransform="uppercase"
+          >
+            <HStack height={TOP_BAR_HEIGHT}>
+              <LuArrowBigLeft />
+              <Text as="span" paddingLeft="3px">
+                Karusic
+              </Text>
+            </HStack>
+          </DrawerHeader>
+          <DrawerBody paddingX="0px">
+            <Button
+              background="#00000000"
+              borderRadius="0px"
+              onClick={onSelectHome}
+              width="full"
            >
-              <HStack height={TOP_BAR_HEIGHT}>
-                <LuArrowBigLeft />
-                <Text as="span" paddingLeft="3px">
-                  Karusic
-                </Text>
-              </HStack>
-            </Drawer.Header>
-            <Drawer.Body paddingX="0px">
-              <Button
-                background="#00000000"
-                borderRadius="0px"
-                onClick={onSelectHome}
-                width="full"
-              >
-                <MdHome />
-                <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                  Home
-                </Text>
-              </Button>
-              <hr />
-              <Button
-                background="#00000000"
-                borderRadius="0px"
-                onClick={onSelectOnAir}
-                width="full"
-              >
-                <MdOutlinePlaylistPlay />
-                <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                  On air
-                </Text>
-              </Button>
-              <hr />
-              <Button
-                background="#00000000"
-                borderRadius="0px"
-                onClick={onSelectAdd}
-                width="full"
-              >
-                <MdOutlineUploadFile />
-                <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                  Add Media
-                </Text>
-              </Button>
-            </Drawer.Body>
-          </Drawer.Content>
-        </Drawer.Positioner>
-      </Drawer.Root>
+              <MdHome />
+              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
+                Home
+              </Text>
+            </Button>
+            <hr />
+            <Button
+              background="#00000000"
+              borderRadius="0px"
+              onClick={onSelectOnAir}
+              width="full"
+            >
+              <MdOutlinePlaylistPlay />
+              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
+                On air
+              </Text>
+            </Button>
+            <hr />
+            <Button
+              background="#00000000"
+              borderRadius="0px"
+              onClick={onSelectAdd}
+              width="full"
+            >
+              <MdOutlineUploadFile />
+              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
+                Add Media
+              </Text>
+            </Button>
+          </DrawerBody>
+        </DrawerContent>
+      </DrawerRoot>
    </Flex>
  );
 };
--- a/front/src/components/contextMenu/ContextMenu.tsx
+++ b/front/src/components/contextMenu/ContextMenu.tsx
@ -5,6 +5,8 @@ import {
 } from '@chakra-ui/react';
 import { LuMenu } from 'react-icons/lu';
 import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
+import { Button } from '../ui/themed';
+import { customVariant } from '@/theme/recipes/button';

 export type MenuElement = {
  name: string;
@ -15,6 +17,21 @@ export type ContextMenuProps = {
  elements?: MenuElement[];
 };

+const theme = {
+  plop: {
+    bg: { _light: 'red', _dark: 'brand.300', _pink: "orange" },
+    _hover: { bg: { _light: 'green', _dark: 'brand.400', _pink: "black" } },
+    // bg: { _light: 'brand.600', _dark: 'brand.300' },
+    // _hover: { bg: { _light: 'brand.700', _dark: 'brand.400' } },
+    /*
+    bgActive: { _light: 'brand.600', _dark: 'brand.300' },
+    color: { _light: 'white', _dark: 'brand.900' },
+    colorHover: { _light: 'brand.800', _dark: 'brand.100' },
+    boxShadowHover: 'outline-over'
+    */
+  }
+};
+
 export const ContextMenu = ({ elements }: ContextMenuProps) => {
  if (!elements) {
    return <></>;
@ -25,9 +42,9 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
      <MenuTrigger asChild
        data-testid="context-menu_trigger">
        {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
-        <IconButton as='span'>
+        <Button {...theme.plop} /*theme="@primary"*/>
          <LuMenu />
-        </IconButton>
+        </Button>
      </MenuTrigger>
      <MenuContent
        data-testid="context-menu_content">
@ -38,6 +55,6 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
          </MenuItem>
        ))}
      </MenuContent>
-    </MenuRoot>
+    </MenuRoot >
  );
 };
--- a/front/src/components/popup/AlbumEditPopUp.tsx
+++ b/front/src/components/popup/AlbumEditPopUp.tsx
@ -1,17 +1,9 @@
 import { useRef, useState } from 'react';

 import {
-  Button,
  Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
  Text,
  useDisclosure,
-  DialogRoot,
-  DialogCloseTrigger,
 } from '@chakra-ui/react';
 import {
  MdAdminPanelSettings,
@ -32,6 +24,8 @@ import { useAlbumService, useSpecificAlbum } from '@/service/Album';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksWithAlbumId } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
+import { Button } from '../ui/themed';

 export type AlbumEditPopUpProps = {};

@ -174,7 +168,7 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
                <Button
                  onClick={disclosure.onOpen}
                  marginRight="auto"
-                  colorPalette="red"
+                  theme="@danger"
                  disabled={countTracksOfAnAlbum !== 0}
                >
                  <MdDeleteForever /> Remove Media
--- a/front/src/components/popup/ArtistEditPopUp.tsx
+++ b/front/src/components/popup/ArtistEditPopUp.tsx
@ -1,17 +1,11 @@
 import { useRef, useState } from 'react';

 import {
-  Button,
  Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
  Text,
  useDisclosure,
-  DialogRoot,
 } from '@chakra-ui/react';
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 import {
  MdAdminPanelSettings,
  MdDeleteForever,
@ -31,6 +25,7 @@ import { useArtistService, useSpecificArtist } from '@/service/Artist';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAnArtist } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '../ui/themed';

 export type ArtistEditPopUpProps = {};

@ -171,7 +166,7 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
                <Button
                  onClick={disclosure.onOpen}
                  marginRight="auto"
-                  colorPalette="red"
+                  theme="@danger"
                  disabled={countTracksOnAnArtist !== 0}
                >
                  <MdDeleteForever /> Remove Media
--- a/front/src/components/popup/ConfirmPopUp.tsx
+++ b/front/src/components/popup/ConfirmPopUp.tsx
@ -2,14 +2,10 @@ import { useRef } from 'react';

 import {
  Button,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogRoot,
  UseDisclosureReturn,
 } from '@chakra-ui/react';

+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 export type ConfirmPopUpProps = {
  title: string;
  body: string;
--- a/front/src/components/popup/GenderEditPopUp.tsx
+++ b/front/src/components/popup/GenderEditPopUp.tsx
@ -1,16 +1,9 @@
 import { useRef, useState } from 'react';

 import {
-  Button,
  Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
  Text,
  useDisclosure,
-  DialogRoot,
 } from '@chakra-ui/react';
 import {
  MdAdminPanelSettings,
@ -18,6 +11,8 @@ import {
  MdEdit,
  MdWarning,
 } from 'react-icons/md';
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 import { useNavigate, useParams } from 'react-router-dom';

 import { Gender, GenderResource } from '@/back-api';
@ -31,6 +26,7 @@ import { useGenderService, useSpecificGender } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAGender } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '../ui/themed';

 export type GenderEditPopUpProps = {};

@ -170,7 +166,7 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
                <Button
                  onClick={disclosure.onOpen}
                  marginRight="auto"
-                  colorPalette="red"
+                  theme="@danger"
                  disabled={countTracksOnAGender !== 0}
                >
                  <MdDeleteForever /> Remove gender
--- a/front/src/components/popup/PopUpUploadProgress.tsx
+++ b/front/src/components/popup/PopUpUploadProgress.tsx
@ -1,37 +1,13 @@
-import { ReactElement, useRef, useState } from 'react';
+import { useRef } from 'react';

 import {
-  Button,
  Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
  Progress,
  Text,
-  useDisclosure,
-  DialogRoot,
 } from '@chakra-ui/react';
-import {
-  MdAdminPanelSettings,
-  MdDeleteForever,
-  MdEdit,
-  MdWarning,
-} from 'react-icons/md';
-import { useNavigate, useParams } from 'react-router-dom';

-import { Artist, ArtistResource } from '@/back-api';
-import { FormCovers } from '@/components/form/FormCovers';
-import { FormGroup } from '@/components/form/FormGroup';
-import { FormInput } from '@/components/form/FormInput';
-import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
-import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
-import { useArtistService, useSpecificArtist } from '@/service/Artist';
-import { useServiceContext } from '@/service/ServiceContext';
-import { useCountTracksOfAnArtist } from '@/service/Track';
-import { isNullOrUndefined } from '@/utils/validator';
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
+import { Button } from '../ui/themed';

 export type PopUpUploadProgressProps = {
  title: string;
@ -112,7 +88,7 @@ export const PopUpUploadProgress = ({
        </DialogBody>
        <DialogFooter>
          {isFinished ? (
-            <Button onClick={onClose} colorPalette="@success">
+            <Button onClick={onClose} theme="@success">
              Ok
            </Button>
          ) : (
--- a/front/src/components/popup/TrackEditPopUp.tsx
+++ b/front/src/components/popup/TrackEditPopUp.tsx
@ -1,15 +1,12 @@
 import { useRef, useState } from 'react';

 import {
-  Button,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogRoot,
  Text,
  useDisclosure,
 } from '@chakra-ui/react';
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
+
 import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';

@ -28,6 +25,7 @@ import { useOrderedGenders } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useSpecificTrack, useTrackService } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '../ui/themed';

 export type TrackEditPopUpProps = {};

@ -115,7 +113,7 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
                <Button
                  onClick={disclosure.onOpen}
                  marginRight="auto"
-                  colorPalette="@danger"
+                  theme="@danger"
                >
                  <MdDeleteForever /> Remove Media
                </Button>
--- a/front/src/components/ui/close-button.tsx
+++ b/front/src/components/ui/close-button.tsx
@ -0,0 +1,17 @@
+import type { ButtonProps } from "@chakra-ui/react"
+import { IconButton as ChakraIconButton } from "@chakra-ui/react"
+import * as React from "react"
+import { LuX } from "react-icons/lu"
+
+export type CloseButtonProps = ButtonProps
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  return (
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  )
+})
--- a/front/src/components/ui/color-mode.tsx
+++ b/front/src/components/ui/color-mode.tsx
@ -0,0 +1,29 @@
+"use client"
+
+import { ThemeProvider, useTheme, ThemeProviderProps } from "next-themes"
+
+export interface ColorModeProviderProps extends ThemeProviderProps { }
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" themes={['pink', 'dark', 'light']} disableTransitionOnChange {...props} />
+  )
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    console.log(`plop: ${resolvedTheme}`);
+    setTheme(resolvedTheme === "light" ? "pink" : resolvedTheme === "pink" ? "dark" : "light")
+  }
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode()
+  return colorMode === "light" ? light : dark
+}
--- a/front/src/components/ui/dialog.tsx
+++ b/front/src/components/ui/dialog.tsx
@ -0,0 +1,62 @@
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  backdrop?: boolean
+}
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>(function DialogContent(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    ...rest
+  } = props
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  )
+})
+
+export const DialogCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDialog.CloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  return (
+    <ChakraDialog.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref}>
+        {props.children}
+      </CloseButton>
+    </ChakraDialog.CloseTrigger>
+  )
+})
+
+export const DialogRoot = ChakraDialog.Root
+export const DialogFooter = ChakraDialog.Footer
+export const DialogHeader = ChakraDialog.Header
+export const DialogBody = ChakraDialog.Body
+export const DialogBackdrop = ChakraDialog.Backdrop
+export const DialogTitle = ChakraDialog.Title
+export const DialogDescription = ChakraDialog.Description
+export const DialogTrigger = ChakraDialog.Trigger
+export const DialogActionTrigger = ChakraDialog.ActionTrigger
--- a/front/src/components/ui/drawer.tsx
+++ b/front/src/components/ui/drawer.tsx
@ -0,0 +1,52 @@
+import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface DrawerContentProps extends ChakraDrawer.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  offset?: ChakraDrawer.ContentProps["padding"]
+}
+
+export const DrawerContent = React.forwardRef<
+  HTMLDivElement,
+  DrawerContentProps
+>(function DrawerContent(props, ref) {
+  const { children, portalled = true, portalRef, offset, ...rest } = props
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraDrawer.Positioner padding={offset}>
+        <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDrawer.Content>
+      </ChakraDrawer.Positioner>
+    </Portal>
+  )
+})
+
+export const DrawerCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDrawer.CloseTriggerProps
+>(function DrawerCloseTrigger(props, ref) {
+  return (
+    <ChakraDrawer.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref} />
+    </ChakraDrawer.CloseTrigger>
+  )
+})
+
+export const DrawerTrigger = ChakraDrawer.Trigger
+export const DrawerRoot = ChakraDrawer.Root
+export const DrawerFooter = ChakraDrawer.Footer
+export const DrawerHeader = ChakraDrawer.Header
+export const DrawerBody = ChakraDrawer.Body
+export const DrawerBackdrop = ChakraDrawer.Backdrop
+export const DrawerDescription = ChakraDrawer.Description
+export const DrawerTitle = ChakraDrawer.Title
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
--- a/front/src/components/ui/index.ts
+++ b/front/src/components/ui/index.ts
--- a/front/src/components/ui/themed.tsx
+++ b/front/src/components/ui/themed.tsx
@ -0,0 +1,7 @@
+
+import buttonRecipe from '@/theme/recipes/button';
+import { chakra } from '@chakra-ui/react';
+
+// we export the element with the application recipe theme.
+// cf doc: https://www.chakra-ui.com/docs/theming/recipes
+export const Button = chakra("button", buttonRecipe)
--- a/front/src/errors/ErrorBoundary.tsx
+++ b/front/src/errors/ErrorBoundary.tsx
@ -1,12 +1,10 @@
 import React, { FC } from 'react';

 import {
-  Alert,
  AlertDescription,
  AlertRoot,
  AlertTitle,
  Box,
-  Button,
  Collapsible,
  useDisclosure,
 } from '@chakra-ui/react';
@ -14,7 +12,8 @@ import {
  FallbackProps,
  ErrorBoundary as ReactErrorBoundary,
 } from 'react-error-boundary';
-import { LuChevronDown, LuChevronUp } from 'react-icons/lu';
+import { Button } from '@/components/ui/themed';
+import { LuChevronUp, LuChevronDown } from 'react-icons/lu';

 const ErrorFallback = ({ error }: FallbackProps) => {
  const { open, onToggle } = useDisclosure();
@ -26,13 +25,12 @@ const ErrorFallback = ({ error }: FallbackProps) => {
          <AlertTitle>An unexpected error has occurred.</AlertTitle>
          <AlertDescription display="block" lineHeight="1.4">
            <Button
-              colorPalette="link"
+              theme="@secondary"
              color="red.800"
-              size="sm"
-              //rightIcon={open ? <LuChevronUp /> : <LuChevronDown />}
+              //size="sm"
              onClick={onToggle}
            >
-              Show details
+              Show details {open ? <LuChevronUp /> : <LuChevronDown />}
            </Button>
            <Collapsible.Root open={open}>
              <Collapsible.Content>
--- a/front/src/main.tsx
+++ b/front/src/main.tsx
@ -3,6 +3,7 @@ import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';

 import App from '@/App';
+import { ColorModeProvider } from './components/ui/color-mode';

 // Render the app
 const rootElement = document.getElementById('root');
@ -10,7 +11,9 @@ if (rootElement && !rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
-      <App />
+      <ColorModeProvider>
+        <App />
+      </ColorModeProvider>
    </StrictMode>
  );
 }
--- a/front/src/scene/album/AlbumDetailPage.tsx
+++ b/front/src/scene/album/AlbumDetailPage.tsx
@ -15,13 +15,12 @@ import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
 import { useTracksOfAnAlbum } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';

 export const AlbumDetailPage = () => {
  const { albumId } = useParams();
  const albumIdInt = albumId ? parseInt(albumId, 10) : undefined;
-  const { mode } = useThemeMode();
  const { playInList } = useActivePlaylistService();
  const { dataAlbum } = useSpecificAlbum(albumIdInt);
  const { tracksOnAnAlbum } = useTracksOfAnAlbum(albumIdInt);
@ -107,13 +106,13 @@ export const AlbumDetailPage = () => {
              //height="60px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
            >
              <DisplayTrackFull
--- a/front/src/scene/album/AlbumsPage.tsx
+++ b/front/src/scene/album/AlbumsPage.tsx
@ -9,14 +9,13 @@ import { SearchInput } from '@/components/SearchInput';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { DisplayAlbum } from '@/components/album/DisplayAlbum';
 import { useOrderedAlbums } from '@/service/Album';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_SPACING, BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
 import { Flex, HStack } from '@chakra-ui/react';

 export const AlbumsPage = () => {
  const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
  const { isLoading, dataAlbums } = useOrderedAlbums(filterTitle);
-  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (albumId: number) => {
    navigate(`/album/${albumId}`);
@ -44,13 +43,13 @@ export const AlbumsPage = () => {
              height={BASE_WRAP_HEIGHT}
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data.id)}
            >
--- a/front/src/scene/artist/ArtistAlbumDetailPage.tsx
+++ b/front/src/scene/artist/ArtistAlbumDetailPage.tsx
@ -15,13 +15,12 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
 import { useSpecificArtist } from '@/service/Artist';
 import { useTracksOfAnAlbum } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';

 export const ArtistAlbumDetailPage = () => {
  const { artistId, albumId } = useParams();
  const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
  const albumIdInt = albumId ? parseInt(albumId, 10) : undefined;
-  const { mode } = useThemeMode();
  const { playInList } = useActivePlaylistService();
  const { dataArtist } = useSpecificArtist(artistIdInt);
  const { dataAlbum } = useSpecificAlbum(albumIdInt);
@ -124,13 +123,13 @@ export const ArtistAlbumDetailPage = () => {
              height="60px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
            >
              <DisplayTrack
--- a/front/src/scene/artist/ArtistDetailPage.tsx
+++ b/front/src/scene/artist/ArtistDetailPage.tsx
@ -12,13 +12,12 @@ import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
 import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
 import { useSpecificArtist } from '@/service/Artist';
 import { useAlbumIdsOfAnArtist } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';

 export const ArtistDetailPage = () => {
  const { artistId } = useParams();
  const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
-  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (albumId: number) => {
    navigate(`/artist/${artistIdInt}/album/${albumId}`);
@ -96,13 +95,13 @@ export const ArtistDetailPage = () => {
              height={BASE_WRAP_HEIGHT}
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data)}
            >
--- a/front/src/scene/artist/ArtistsPage.tsx
+++ b/front/src/scene/artist/ArtistsPage.tsx
@ -11,7 +11,7 @@ import { PageLayout } from '@/components/Layout/PageLayout';
 import { SearchInput } from '@/components/SearchInput';
 import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
 import { useOrderedArtists } from '@/service/Artist';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
 import { MdOutlineForkRight } from 'react-icons/md';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
@ -21,7 +21,6 @@ import { DataTools, TypeCheck } from '@/utils/data-tools';
 const LIMIT_RANDOM_VALUES = 25;

 export const ArtistsPage = () => {
-  const { mode } = useThemeMode();
  const [filterName, setFilterName] = useState<string | undefined>(undefined);
  const navigate = useNavigate();
  const { playInList } = useActivePlaylistService();
@ -72,13 +71,13 @@ export const ArtistsPage = () => {
              height={BASE_WRAP_HEIGHT}
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data)}
            >
--- a/front/src/scene/gender/GenderDetailPage.tsx
+++ b/front/src/scene/gender/GenderDetailPage.tsx
@ -16,12 +16,11 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificGender } from '@/service/Gender';
 import { useTracksOfAGender } from '@/service/Track';
 //import { useTracksOfAGender } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';

 export const GenderDetailPage = () => {
  const { genderId } = useParams();
  const genderIdInt = genderId ? parseInt(genderId, 10) : undefined;
-  const { mode } = useThemeMode();
  const { playInList } = useActivePlaylistService();
  const { dataGender } = useSpecificGender(genderIdInt);
  const { tracksOnAGender } = useTracksOfAGender(genderIdInt);
@ -102,13 +101,13 @@ export const GenderDetailPage = () => {
              //height="60px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
            >
              <DisplayTrackFull
--- a/front/src/scene/gender/GendersPage.tsx
+++ b/front/src/scene/gender/GendersPage.tsx
@ -9,13 +9,12 @@ import { SearchInput } from '@/components/SearchInput';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { DisplayGender } from '@/components/gender/DisplayGender';
 import { useOrderedGenders } from '@/service/Gender';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { Flex, HStack } from '@chakra-ui/react';

 export const GendersPage = () => {
  const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
  const { isLoading, dataGenders } = useOrderedGenders(filterTitle);
-  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (genderId: number) => {
    navigate(`/gender/${genderId}`);
@ -43,13 +42,13 @@ export const GendersPage = () => {
              height="120px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data.id)}
            >
--- a/front/src/scene/home/AddPage.tsx
+++ b/front/src/scene/home/AddPage.tsx
@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';

 import {
-  Button,
  Flex,
  Input,
  Table,
@ -32,6 +31,7 @@ import { useGenderService, useOrderedGenders } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useTrackService } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '@/components/ui/themed';

 export class ElementList {
  constructor(
@ -540,7 +540,7 @@ export const AddPage = () => {
              </Table.Root>
              <Flex marginY="15px">
                <Button
-                  colorPalette="@primary"
+                  theme="@primary"
                  onClick={sendFile}
                  disabled={!needSend}
                  marginLeft="auto"
--- a/front/src/scene/home/HomePage.tsx
+++ b/front/src/scene/home/HomePage.tsx
@ -7,7 +7,8 @@ import { useNavigate } from 'react-router-dom';

 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
-import { useThemeMode } from '@/utils/theme-tools';
+
+import { useColorModeValue } from '@/components/ui/color-mode';

 type HomeListType = {
  id: number;
@ -19,37 +20,36 @@ const homeList: HomeListType[] = [
  {
    id: 1,
    name: 'Genders',
-    icon: <LuCrown size="60%" height="full" />,
+    icon: <LuCrown style={{ width: "100px", height: "100px" }} />,
    to: 'gender',
  },
  {
    id: 2,
    name: 'Artists',
-    icon: <MdGroup size="60%" height="full" />,
+    icon: <MdGroup style={{ width: "100px", height: "100px" }} />,
    to: 'artist',
  },
  {
    id: 3,
    name: 'Albums',
-    icon: <LuDisc3 size="60%" height="full" />,
+    icon: <LuDisc3 style={{ width: "100px", height: "100px" }} />,
    to: 'album',
  },
  {
    id: 4,
    name: 'Tracks',
-    icon: <LuFileAudio size="60%" height="full" />,
+    icon: <LuFileAudio style={{ width: "100px", height: "100px" }} />,
    to: 'track',
  },
  {
    id: 5,
    name: 'Playlists',
-    icon: <LuEar size="60%" height="full" />,
+    icon: <LuEar style={{ width: "100px", height: "100px" }} />,
    to: 'playlists',
  },
 ];

 export const HomePage = () => {
-  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (data: HomeListType) => {
    navigate(data.to);
@ -65,13 +65,13 @@ export const HomePage = () => {
              height="190px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data)}
            >
--- a/front/src/scene/onAir/OnAirPage.tsx
+++ b/front/src/scene/onAir/OnAirPage.tsx
@ -1,26 +1,18 @@
-import { Box, Button, Flex, Text } from '@chakra-ui/react';
-import { LuDisc3 } from 'react-icons/lu';
-import { MdEdit } from 'react-icons/md';
-import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { Route, Routes, useNavigate } from 'react-router-dom';

-import { Covers } from '@/components/Cover';
 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
-import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
+import { TopBar } from '@/components/TopBar/TopBar';
 import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
 import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
-import { DisplayTrack } from '@/components/track/DisplayTrack';
-import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
-import { useSpecificAlbum } from '@/service/Album';
-import { useTracksOfAnAlbum } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
 import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';

 export const OnAirPage = () => {
-  const { mode } = useThemeMode();
  const { playInList } = useActivePlaylistService();
  const { playTrackList, trackOffset, setNewPlaylist } = useActivePlaylistService();
  const navigate = useNavigate();
@ -92,13 +84,13 @@ export const OnAirPage = () => {
              //height="60px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
            >
              <DisplayTrackFullId
--- a/front/src/scene/track/TrackSelectionPage.tsx
+++ b/front/src/scene/track/TrackSelectionPage.tsx
@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { DataTools, TypeCheck } from '@/utils/data-tools';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';

 export const alphabet = [
  'a',
@ -39,7 +39,6 @@ export const alphabet = [
 const possibilities = [...alphabet, '^^'];

 export const TrackSelectionPage = () => {
-  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (data: string) => {
    navigate(`/track/${data}`);
@ -55,13 +54,13 @@ export const TrackSelectionPage = () => {
              height="75px"
              border="1px"
              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data)}
            >
--- a/front/src/scene/track/TracksStartLetterDetailPage.tsx
+++ b/front/src/scene/track/TracksStartLetterDetailPage.tsx
@ -1,22 +1,20 @@
 import { ReactElement } from 'react';

-import { Box, Flex, Text } from '@chakra-ui/react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Box, Flex } from '@chakra-ui/react';
+import { useParams } from 'react-router-dom';

 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
-import { DisplayTrack } from '@/components/track/DisplayTrack';
 import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
 import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
 import { alphabet } from '@/scene/track/TrackSelectionPage';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
-import { useTrackService, useTracksWithStartName } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useTracksWithStartName } from '@/service/Track';
+import { useColorModeValue } from '@/components/ui/color-mode';

 export const TracksStartLetterDetailPage = () => {
  const { startLetter } = useParams();
-  const { mode } = useThemeMode();
  const { isLoading, tracksStartsWith } = useTracksWithStartName(
    startLetter !== '^^'
      ? startLetter
@ -63,13 +61,13 @@ export const TracksStartLetterDetailPage = () => {
                //height="60px"
                border="1px"
                borderColor="brand.900"
-                backgroundColor={mode('#FFFFFF88', '#00000088')}
+                backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
                key={data}
                padding="5px"
                as="button"
                _hover={{
                  boxShadow: 'outline-over',
-                  bgColor: mode('#FFFFFFF7', '#000000F7'),
+                  bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
                }}
              >
                <DisplayTrackSkeleton />
@ -82,13 +80,13 @@ export const TracksStartLetterDetailPage = () => {
                //height="60px"
                border="1px"
                borderColor="brand.900"
-                backgroundColor={mode('#FFFFFF88', '#00000088')}
+                backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
                key={data.id}
                padding="5px"
                as="button"
                _hover={{
                  boxShadow: 'outline-over',
-                  bgColor: mode('#FFFFFFF7', '#000000F7'),
+                  bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
                }}
              >
                <DisplayTrackFull
--- a/front/src/theme/foundations/index.ts
+++ b/front/src/theme/foundations/index.ts
@ -0,0 +1,9 @@
+import { colors } from './colors';
+import { shadows } from './shadows';
+
+const foundations = {
+  colors,
+  shadows,
+};
+
+export default foundations;
--- a/front/src/theme/foundations/shadows.ts
+++ b/front/src/theme/foundations/shadows.ts
@ -0,0 +1,21 @@
+import { colors } from './colors';
+
+const createOutline = (colorScheme = 'gray') =>
+  `0 0 0 3px ${colorScheme}.500/3`;
+
+export const shadows = {
+  outline: createOutline('brand'),
+  'outline-brand': '0 0 0 1px brand.900',
+  'outline-gray': createOutline('gray'),
+  'outline-over': `4px 4px 5px #00000088`,
+  'outline-darkgray': `0 0 0 3px gray.500/8`,
+  'outline-success': createOutline('success'),
+  'outline-warning': createOutline('warning'),
+  'outline-error': createOutline('error'),
+  'outline-doing': createOutline('doing'),
+  'outline-paused': createOutline('paused'),
+  layout: '0 0 24px 1px rgba(0, 0, 0, 0.05)',
+  smooth: 'inset 0px 0px 16px rgba(0, 0, 0, 0.05)',
+  // smooth-light is used for dark backgrounds
+  'smooth-light': 'inset 0px 0px 16px rgba(255, 255, 255, 0.1)',
+};
--- a/front/src/theme/recipes/badge.ts
+++ b/front/src/theme/recipes/badge.ts
@ -0,0 +1,24 @@
+export default {
+  sizes: {
+    '2xs': {
+      fontSize: '0.5em',
+    },
+    xs: {
+      fontSize: '0.6em',
+    },
+    sm: {
+      fontSize: '0.7em',
+    },
+    md: {
+      fontSize: '0.8em',
+      textTransform: 'none',
+    },
+    lg: {
+      fontSize: '0.9em',
+      textTransform: 'none',
+    },
+  },
+  defaultProps: {
+    size: 'md',
+  },
+};
--- a/front/src/theme/recipes/button.ts
+++ b/front/src/theme/recipes/button.ts
@ -0,0 +1,109 @@
+import { defineRecipe, defineStyle, RecipeVariantRecord, SystemStyleObject } from '@chakra-ui/react';
+
+// https://medium.com/@a.heydari.dev/simplifying-chakra-ui-v3-recipes-vs-chakra-factory-a-developers-perspective-4020b62f1b4d
+
+// const shimmer = keyframes`
+//   100% {
+//     transform: translateX(100%);
+//   }
+// `;
+
+export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => {
+  return defineStyle({
+    bg,
+    color,
+    border: '1px solid transparent',
+    _focus: {
+      border: '1px solid',
+      borderColor: 'black',
+    },
+    _hover: {
+      bg: bgHover,
+      color: colorHover,
+      boxShadow: boxShadowHover,
+      _disabled: {
+        bg,
+        boxShadow: 'none',
+      },
+    },
+    _active: {
+      bg: bgActive,
+    },
+  });
+};
+
+const buttonRecipe = defineRecipe({
+  variants: {
+    theme: {
+      "@primary":
+        customVariant({
+          bg: { _light: 'brand.600', _dark: 'brand.300' },
+          bgHover: { _light: 'brand.700', _dark: 'brand.400' },
+          bgActive: { _light: 'brand.600', _dark: 'brand.300' },
+          color: { _light: 'white', _dark: 'brand.900' },
+          colorHover: { _light: 'brand.800', _dark: 'brand.100' },
+          boxShadowHover: 'outline-over'
+        }),
+      "@secondary":
+        customVariant({
+          bg: { _light: 'brand.100', _dark: 'brand.900' },
+          bgHover: { _light: 'brand.200', _dark: 'brand.800' },
+          bgActive: { _light: 'brand.300', _dark: 'brand.700' },
+          color: { _light: 'brand.700', _dark: 'brand.50' },
+          colorHover: { _light: 'brand.800', _dark: 'brand.100' },
+          boxShadowHover: 'outline-over',
+        }),
+      "@danger":
+        customVariant({
+          bg: { _light: 'error.600', _dark: 'error.600' },
+          bgHover: { _light: 'error.700', _dark: 'error.500' },
+          bgActive: { _light: 'error.600', _dark: 'error.500' },
+          color: { _light: 'white', _dark: 'error.900' },
+          colorHover: { _light: 'error.700', _dark: 'error.900' },
+          boxShadowHover: 'outline-over',
+        }),
+      "@success":
+        customVariant({
+          bg: { _light: 'green.300', _dark: 'green.300' },
+          bgHover: { _light: 'green.400', _dark: 'green.400' },
+          bgActive: { _light: 'green.500', _dark: 'green.400' },
+          color: { _light: 'white', _dark: 'green.900' },
+          colorHover: { _light: 'green.500', _dark: 'green.900' },
+          boxShadowHover: 'outline-over',
+        }),
+
+      "@progress":
+        defineStyle({
+          bg: { _light: `brand.500`, _dark: `brand.300` },
+          overflow: 'hidden',
+          /*
+          _after: !props.isLoading
+            ? {
+              content: '""',
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              transform: 'translateX(-100%)',
+              bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`,
+            }
+            : undefined,
+            */
+        }),
+
+      "@menu": defineStyle({
+        bg: 'back.100',
+        color: 'brand.900',
+        borderRadius: 0,
+        border: 0,
+        _hover: { background: 'back.300' },
+        _focus: { border: 'none' },
+        fontSize: '20px',
+        textTransform: 'uppercase',
+      }),
+    },
+  },
+});
+
+export default buttonRecipe;
--- a/front/src/theme/recipes/checkbox.ts
+++ b/front/src/theme/recipes/checkbox.ts
@ -0,0 +1,5 @@
+export default {
+  defaultProps: {
+    colorScheme: 'brand',
+  },
+};
--- a/front/src/theme/recipes/drawer.ts
+++ b/front/src/theme/recipes/drawer.ts
@ -0,0 +1,29 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+const drawerRecipe = defineRecipe({
+    base: {
+        bg: { _light: 'white', _dark: 'gray.800' },
+        color: { _light: 'gray.900', _dark: 'whiteAlpha.900' },
+        boxShadow: { _light: 'lg', _dark: 'dark-lg' },
+        padding: 4,
+        borderRadius: 'md',
+    },
+    variants: {
+        variant: {
+            solid: {
+                bg: { _light: 'blue.500', _dark: 'blue.300' },
+                color: 'white',
+            },
+            outline: {
+                border: '1px solid',
+                borderColor: { _light: 'gray.300', _dark: 'whiteAlpha.300' },
+                bg: { _light: 'white', _dark: 'gray.900' },
+            },
+        }
+    },
+    defaultVariants: {
+        variant: 'solid',
+    },
+});
+
+export default drawerRecipe;
--- a/front/src/theme/recipes/flex.ts
+++ b/front/src/theme/recipes/flex.ts
@ -0,0 +1,20 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+
+const flexTheme = defineRecipe({
+  variants: {
+    variant: {
+      '@menu': {
+        bg: { _light: 'back.100', _dark: 'back.800' },
+        color: { _light: 'brand.900', _dark: 'brand.100' },
+        borderRadius: 0,
+        border: 0,
+        _hover: { background: { _light: 'back.300', _dark: 'back.600' } },
+        _focus: { border: 'none' },
+        fontSize: '20px',
+      },
+    },
+  },
+});
+
+export default flexTheme;
--- a/front/src/theme/recipes/index.ts
+++ b/front/src/theme/recipes/index.ts
@ -0,0 +1,13 @@
+export { default as Badge } from './badge';
+export { default as Button } from './button';
+export { default as Checkbox } from './checkbox';
+export { default as Input } from './input';
+//export { default as NumberInput } from './numberInput.ts_';
+export { default as Popover } from './popover';
+export { default as Radio } from './radio';
+export { default as Select } from './select';
+export { default as Switch } from './switch';
+export { default as Textarea } from './textarea';
+//export { default as Modal } from './modal';
+export { default as Flex } from './flex';
+export { default as Drawer } from './drawer';
--- a/front/src/theme/recipes/input.ts
+++ b/front/src/theme/recipes/input.ts
@ -0,0 +1,21 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+const inputTheme = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
+          borderColor: { _light: 'gray.200', _dark: 'whiteAlpha.100' },
+          color: { _light: 'gray.800', _dark: 'gray.50' },
+          _focus: {
+            borderColor: { _light: 'gray.800', _dark: 'gray.50' },
+            boxShadow: `0 0 0 1px gray.800`,
+          },
+        },
+      },
+    },
+  },
+});
+
+export default inputTheme;
--- a/front/src/theme/recipes/modal.ts__
+++ b/front/src/theme/recipes/modal.ts__
@ -0,0 +1,17 @@
+import { modalAnatomy as parts } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyle = definePartsStyle({
+  header: {
+    textAlign: 'center',
+  },
+});
+
+const modalTheme = defineMultiStyleConfig({
+  baseStyle,
+});
+
+export default modalTheme;
--- a/front/src/theme/recipes/numberInput.ts_
+++ b/front/src/theme/recipes/numberInput.ts_
@ -0,0 +1,27 @@
+import { numberInputAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+import { getColor, mode } from '@chakra-ui/theme-tools';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(numberInputAnatomy.keys);
+
+const baseStyle = definePartsStyle((props) => {
+
+  return {
+    field: {
+      border: 0,
+      _focusVisible: {
+        borderColor: {_light:'brand.500', _dark:'brand.300'},
+        boxShadow: `0 0 0 1px 'brand.500'`,
+        ring: '1px',
+        ringColor: {_light:'brand.500', _dark:'brand.300'},
+        ringOffset: '1px',
+        ringOffsetColor: {_light:'brand.500', _dark:'brand.300'},
+      },
+    },
+  };
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});
--- a/front/src/theme/recipes/popover.ts
+++ b/front/src/theme/recipes/popover.ts
@ -0,0 +1,77 @@
+export default {
+  sizes: {
+    '3xs': {
+      content: {
+        width: '3xs',
+      },
+    },
+    '2xs': {
+      content: {
+        width: '2xs',
+      },
+    },
+    xs: {
+      content: {
+        width: 'xs',
+      },
+    },
+    sm: {
+      content: {
+        width: 'sm',
+      },
+    },
+    md: {
+      content: {
+        width: 'md',
+      },
+    },
+    lg: {
+      content: {
+        width: 'lg',
+      },
+    },
+    xl: {
+      content: {
+        width: 'xl',
+      },
+    },
+    '2xl': {
+      content: {
+        width: '2xl',
+      },
+    },
+    '3xl': {
+      content: {
+        width: '3xl',
+      },
+    },
+    '4xl': {
+      content: {
+        width: '4xl',
+      },
+    },
+    '5xl': {
+      content: {
+        width: '5xl',
+      },
+    },
+    '6xl': {
+      content: {
+        width: '6xl',
+      },
+    },
+    '7xl': {
+      content: {
+        width: '7xl',
+      },
+    },
+    '8xl': {
+      content: {
+        width: '8xl',
+      },
+    },
+  },
+  defaultProps: {
+    size: 'xs',
+  },
+};
--- a/front/src/theme/recipes/radio.ts
+++ b/front/src/theme/recipes/radio.ts
@ -0,0 +1,5 @@
+export default {
+  defaultProps: {
+    colorScheme: 'brand',
+  },
+};
--- a/front/src/theme/recipes/select.ts
+++ b/front/src/theme/recipes/select.ts
@ -0,0 +1,20 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+const selectTheme = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
+          borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' },
+          _focus: {
+            borderColor: { _light: 'brand.500', _dark: 'brand.300' },
+            boxShadow: `0 0 0 1px black`,
+          },
+        },
+      },
+    },
+  },
+});
+
+export default selectTheme;
--- a/front/src/theme/recipes/switch.ts
+++ b/front/src/theme/recipes/switch.ts
@ -0,0 +1,5 @@
+export default {
+  defaultProps: {
+    colorScheme: 'brand',
+  },
+};
--- a/front/src/theme/recipes/textarea.ts
+++ b/front/src/theme/recipes/textarea.ts
@ -0,0 +1,18 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+
+const textAreaTheme = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
+        borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' },
+        _focus: {
+          borderColor: { _light: 'brand.500', _dark: 'brand.300' },
+          boxShadow: `0 0 0 1px brand.500`,
+        },
+      },
+    }
+  },
+});
+export default textAreaTheme;
--- a/front/src/theme/styleguide/buttons.stories.tsx
+++ b/front/src/theme/styleguide/buttons.stories.tsx
@ -1,4 +1,4 @@
-import { Button, Group, IconButton, VStack } from '@chakra-ui/react';
+import { Group, VStack } from '@chakra-ui/react';
 import { HiMinus, HiPlus } from 'react-icons/hi';

 const meta = {
@ -19,8 +19,8 @@ export const Default = {
 export const Primary = {
  render: () => (
    <Group>
-      <Button colorPalette="@primary">Primary Button</Button>
-      <IconButton colorPalette="@primary" aria-label="Add" ><HiPlus /></IconButton>
+      <Button theme="@primary">Primary Button</Button>
+      <IconButton theme="@primary" aria-label="Add" ><HiPlus /></IconButton>
    </Group>
  ),
 };
@ -28,8 +28,8 @@ export const Primary = {
 export const Secondary = {
  render: () => (
    <Group>
-      <Button colorPalette="@secondary">Secondary Button</Button>
-      <IconButton colorPalette="@secondary" aria-label="Add" ><HiPlus /></IconButton>
+      <Button theme="@secondary">Secondary Button</Button>
+      <IconButton theme="@secondary" aria-label="Add" ><HiPlus /></IconButton>
    </Group>
  ),
 };
@ -37,8 +37,8 @@ export const Secondary = {
 export const Danger = {
  render: () => (
    <Group>
-      <Button colorPalette="@danger">Danger Button</Button>
-      <IconButton colorPalette="@danger" aria-label="Remove"><HiMinus /></IconButton>
+      <Button theme="@danger">Danger Button</Button>
+      <IconButton theme="@danger" aria-label="Remove"><HiMinus /></IconButton>
    </Group>
  ),
 };
@ -58,7 +58,7 @@ export const Progress = {
        </Button>
        <IconButton
          variant="solid"
-          colorPalette="red"
+          theme="@danger"
          aria-label="Remove"
        ><HiMinus /></IconButton>
      </VStack>
--- a/front/src/theme/styles.ts
+++ b/front/src/theme/styles.ts
@ -1,13 +1,4 @@
-// import { Styles } from '@chakra-ui/theme-tools';
-// import { mode } from '@chakra-ui/theme-tools';
+import { Styles } from '@chakra-ui/theme-tools';

-// export const styles: Styles = {
-//   global: (props) => ({
-//     body: {
-//       overflowY: 'none',
-//       bg: mode('back.50', 'back.700')(props),
-//       color: mode('text.900', 'text.50')(props),
-//       fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
-//     },
-//   }),
-// };
+export const styles: Styles = {
+};
--- a/front/src/theme/theme.ts
+++ b/front/src/theme/theme.ts
@ -1,9 +1,23 @@
-
-import { createSystem, defaultConfig } from "@chakra-ui/react"
+import * as recipes from './recipes';
+import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
 import { colors } from "./foundations/colors"

-export const system = createSystem(defaultConfig, {
+const baseTheme: SystemConfig = {
+  globalCss: {
+    body: {
+      overflowY: 'none',
+      bg: { _light: 'back.50', _dark: 'back.700' },
+      color: { _light: 'text.900', _dark: 'text.50' },
+      fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
+    },
+    svg: {
+      width: "32px",
+      height: "32px",
+      aspectRatio: "square",
+    }
+  },
  theme: {
+    ...recipes,
    tokens: {
      fonts: {
        heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
@ -25,4 +39,6 @@ export const system = createSystem(defaultConfig, {
      },
    },
  },
-})
+};
+const config = mergeConfigs(defaultConfig, baseTheme);
+export const systemTheme = createSystem(config);
--- a/front/src/utils/theme-tools.ts
+++ b/front/src/utils/theme-tools.ts
@ -1,20 +0,0 @@
-import { useCallback } from 'react';
-
-export const useThemeMode = () => {
-  //const { colorMode, toggleColorMode, setColorMode } = useColorMode();
-  const colorMode = "dark";
-  const toggleColorMode = () => { }
-  const setColorMode = (_value: string) => { }
-
-  const mode = useCallback(
-    (lightValue, darkValue) => (colorMode === 'dark' ? darkValue : lightValue),
-    [colorMode]
-  );
-
-  return {
-    toggleColorMode,
-    setColorMode,
-    mode,
-    colorMode,
-  };
-};
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@ -38,7 +38,9 @@
  "include": [
    "next-env.d.ts",
    "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.tsx",
+    "src/theme/recipes/numberInput.ts_",
+    "src/theme/recipes/modal.ts__"
  ],
  "exclude": [
    "node_modules"