diff --git a/packages/twenty-front/src/modules/settings/data-model/assets/cover-dark.png b/packages/twenty-front/src/modules/settings/data-model/assets/cover-dark.png new file mode 100644 index 000000000..e46347662 Binary files /dev/null and b/packages/twenty-front/src/modules/settings/data-model/assets/cover-dark.png differ diff --git a/packages/twenty-front/src/modules/settings/data-model/assets/cover-light.png b/packages/twenty-front/src/modules/settings/data-model/assets/cover-light.png new file mode 100644 index 000000000..fad6f00fe Binary files /dev/null and b/packages/twenty-front/src/modules/settings/data-model/assets/cover-light.png differ diff --git a/packages/twenty-front/src/modules/settings/data-model/assets/cover.png b/packages/twenty-front/src/modules/settings/data-model/assets/cover.png deleted file mode 100644 index b3242ac40..000000000 Binary files a/packages/twenty-front/src/modules/settings/data-model/assets/cover.png and /dev/null differ diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx index cf0ad4cc7..0f7fa0b90 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx @@ -8,11 +8,15 @@ import { Card } from '@/ui/layout/card/components/Card'; import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut'; import { cookieStorage } from '~/utils/cookie-storage'; -import CoverImage from '../assets/cover.png'; +import DarkCoverImage from '../assets/cover-dark.png'; +import LightCoverImage from '../assets/cover-light.png'; const StyledCoverImageContainer = styled(Card)` align-items: center; - background-image: url(${CoverImage.toString()}); + background-image: ${({ theme }) => + theme.name === 'light' + ? `url('${LightCoverImage.toString()}')` + : `url('${DarkCoverImage.toString()}')`}; background-size: cover; border-radius: ${({ theme }) => theme.border.radius.md}; box-sizing: border-box;