Deprecate runtime theme objects in favor of CSS variables (#18402)

## Summary - **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon dimensions are now resolved at runtime via `resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring values always come from computed CSS variables - **No more consumer imports from `twenty-ui/theme`**: moved `ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`, `MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to `twenty-ui/theme-constants` - **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` / `ThemeType`**: replaced across ~300 files with `themeCssVariables` (for CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber` (for JS runtime values) - **Simplify provider chain**: only `ColorSchemeProvider` remains — it toggles `light`/`dark` class on `document.documentElement` and provides `colorScheme` via React context - **Fix pre-existing test failures**: `useIcons.test.ts` (non-configurable ES module spy) and `turnRecordFilterGroupIntoGqlOperationFilter.test.ts` (`Omit<RecordFilter, 'id'>` type mismatch) ### Theme access pattern (before → after) | Context | Before | After | |---------|--------|-------| | CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` | `${themeCssVariables.font.color.primary}` | | JS runtime (icon size, animation) | `theme.icon.size.md` / `ICON_SIZES.md` | `resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` | | Color scheme check | `theme.name === 'dark'` | `useContext(ColorSchemeContext).colorScheme === 'dark'` |
2026-03-05 14:39:01 +01:00
parent 7293d4c1f8
commit 647c32ff3e
432 changed files with 1243 additions and 1433 deletions
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 export const SettingsAccountLoader = () => {
  const { theme } = useContext(ThemeContext);
@@ -6,15 +6,14 @@ import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicro
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { ConnectedAccountProvider, SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconAt, IconGoogle, IconMicrosoft } from 'twenty-ui/display';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledCardsContainer = styled.div`
  display: flex;
@@ -23,11 +22,10 @@ const StyledCardsContainer = styled.div`
 `;

 export const SettingsAccountsListEmptyStateCard = () => {
+  const { theme } = useContext(ThemeContext);
  const { triggerApisOAuth } = useTriggerApisOAuth();

  const { t } = useLingui();
-  const { theme } = useContext(ThemeContext);
-
  const isGoogleMessagingEnabled = useAtomStateValue(
    isGoogleMessagingEnabledState,
  );
@@ -1,15 +1,18 @@
 import { styled } from '@linaria/react';
+import { useContext } from 'react';

 import { SettingsCard } from '@/settings/components/SettingsCard';
-import { useContext } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui/theme-constants';

 const StyledCardsContainer = styled.div`
  display: flex;
@@ -22,8 +25,8 @@ const StyledCardsContainer = styled.div`
 `;

 export const SettingsAccountsSettingsSection = () => {
-  const { t } = useLingui();
  const { theme } = useContext(ThemeContext);
+  const { t } = useLingui();
  return (
    <Section>
      <H2Title
@@ -1,5 +1,4 @@
 import { type ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { useContext } from 'react';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -12,7 +11,8 @@ import {
  IconMicrosoft,
  IconSend,
 } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 const ImapSmtpCaldavIcon = (
  props: IconComponentProps & { account: ConnectedAccount },
@@ -1,13 +1,12 @@
 import { type MessageFolder } from '@/accounts/types/MessageFolder';
-import { useContext } from 'react';
 import {
  IconFolder,
  IconFolderRoot,
  IconInbox,
  IconSend,
 } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 type SettingsAccountsMessageFolderIconProps = {
  folder: MessageFolder;
  isChildFolder?: boolean;
@@ -18,6 +17,7 @@ export const SettingsAccountsMessageFolderIcon = ({
  isChildFolder = false,
 }: SettingsAccountsMessageFolderIconProps) => {
  const { theme } = useContext(ThemeContext);
+
  if (folder.isSentFolder) {
    return <IconSend size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />;
  }
@@ -1,10 +1,9 @@
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
 import { t } from '@lingui/core/macro';
 import { IconFolder } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledEmptyState = styled.div`
  align-items: center;
@@ -2,8 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledSkeletonContainer = styled.div`
  display: flex;
@@ -37,7 +36,6 @@ const SKELETON_ROWS = [

 export const SettingsMessageFoldersSkeletonLoader = () => {
  const { theme } = useContext(ThemeContext);
-
  return (
    <SkeletonTheme
      baseColor={theme.background.tertiary}
@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 export const SettingsAdminTabSkeletonLoader = () => {
  const { theme } = useContext(ThemeContext);
@@ -5,7 +5,8 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { isDefined } from 'twenty-shared/utils';
 import { type IconComponent } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
-import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type TableItem = {
  Icon?: IconComponent;
@@ -31,6 +32,7 @@ export const SettingsAdminTableCard = ({
  valueAlign = 'left',
  className,
 }: SettingsAdminTableCardProps) => {
+  const { theme } = useContext(ThemeContext);
  return (
    <Card
      rounded={rounded}
@@ -51,7 +53,7 @@ export const SettingsAdminTableCard = ({
                height={themeCssVariables.spacing[6]}
                gap={themeCssVariables.spacing[2]}
              >
-                {item.Icon && <item.Icon size={ICON_SIZES.md} />}
+                {item.Icon && <item.Icon size={theme.icon.size.md} />}
                <span>{item.label}</span>
              </TableCell>
              <TableCell
@@ -10,11 +10,10 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { t } from '@lingui/core/macro';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { useContext } from 'react';
 import { IconChevronLeft, IconEye, IconEyeOff } from 'twenty-ui/display';
 import { MenuItem, MenuItemSelectTag } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 type ConfigVariableOptionsDropdownContentProps = {
  selectedCategory: ConfigVariableFilterCategory | null;
  onSelectCategory: (category: ConfigVariableFilterCategory | null) => void;
@@ -39,7 +38,6 @@ export const ConfigVariableOptionsDropdownContent = ({
  onShowHiddenChange,
 }: ConfigVariableOptionsDropdownContentProps) => {
  const { theme } = useContext(ThemeContext);
-
  const isConfigVariablesInDbEnabled = useAtomStateValue(
    isConfigVariablesInDbEnabledState,
  );
@@ -1,12 +1,11 @@
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconChevronRight } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ConfigVariable } from '~/generated-metadata/graphql';

 type SettingsAdminConfigVariablesRowProps = {
@@ -1,13 +1,13 @@
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { CustomError } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 import { ConfigSource } from '~/generated-metadata/graphql';

 export const useSourceContent = (source: ConfigSource) => {
-  const { t } = useLingui();
  const { theme } = useContext(ThemeContext);
+  const { t } = useLingui();

  switch (source) {
    case ConfigSource.DATABASE:
@@ -1,5 +1,4 @@
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { useContext } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import {
@@ -10,7 +9,8 @@ import {
  IconTool,
  IconUserCircle,
 } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import {
  HealthIndicatorId,
  type SystemHealthService,
@@ -1,12 +1,11 @@
 import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
 import { SettingsAdminWorkerMetricsTooltip } from '@/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { ResponsiveLine } from '@nivo/line';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import {
  QueueMetricsTimeRange,
  useGetQueueMetricsQuery,
@@ -1,8 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import { IconPoint } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledWrapper = styled.div`
  position: relative;
@@ -37,6 +36,7 @@ export const AdvancedSettingsContentWrapperWithDot = ({
  dotPosition = 'centered',
 }: AdvancedSettingsContentWrapperWithDotProps) => {
  const { theme } = useContext(ThemeContext);
+
  return (
    <StyledWrapper>
      {!hideDot && (
@@ -5,8 +5,7 @@ import { t } from '@lingui/core/macro';
 import { Card, CardContent } from 'twenty-ui/layout';
 import { IconChevronRight } from 'twenty-ui/display';
 import { Pill } from 'twenty-ui/components';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsCardProps = {
  description?: string;
@@ -5,8 +5,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledNameCell = styled.div`
  align-items: center;
@@ -30,7 +29,6 @@ export const SettingsConnectedAccountsTableRow = ({
  account,
 }: SettingsConnectedAccountsTableRowProps) => {
  const { theme } = useContext(ThemeContext);
-
  const IconComponent = SettingsConnectedAccountIcon({ account });

  return (
@@ -1,11 +1,10 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { getItemTagInfo } from '@/settings/data-model/utils/getItemTagInfo';
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
 import { Avatar } from 'twenty-ui/display';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsItemTypeTagProps = {
  item: {
@@ -28,7 +27,6 @@ export const SettingsItemTypeTag = ({
  className,
  item: { isCustom, isRemote, applicationId },
 }: SettingsItemTypeTagProps) => {
-  const { theme } = useContext(ThemeContext);
  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
  const itemTagInfo = getItemTagInfo({
    item: { isCustom, isRemote, applicationId },
@@ -36,6 +34,8 @@ export const SettingsItemTypeTag = ({
      currentWorkspace?.workspaceCustomApplication?.id,
  });

+  const { theme } = useContext(ThemeContext);
+
  return (
    <StyledContainer className={className}>
      <Avatar
@@ -5,8 +5,7 @@ import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkel

 import { type IconComponent, IconPlus } from 'twenty-ui/display';
 import { Card, CardFooter } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';

 const StyledFooter = styled(CardFooter)`
@@ -4,8 +4,7 @@ import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronRight, type IconComponent } from 'twenty-ui/display';
 import { CardContent } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledRow = styled(CardContent)`
  align-items: center;
@@ -14,8 +14,7 @@ import {
  OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
 import { Toggle } from 'twenty-ui/input';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledSettingsCardToggleContent = styled(StyledSettingsCardContent)`
  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import { type IconComponent } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 type SettingsOptionIconCustomizerProps = {
  Icon: IconComponent;
@@ -22,6 +22,7 @@ export const SettingsOptionIconCustomizer = ({
  rotate = -4,
 }: SettingsOptionIconCustomizerProps) => {
  const { theme } = useContext(ThemeContext);
+
  return (
    <StyledIconCustomizer zoom={zoom} rotate={rotate}>
      <Icon
@@ -3,8 +3,7 @@ import { useContext } from 'react';
 import { CardContent } from 'twenty-ui/layout';
 import { type IconComponent } from 'twenty-ui/display';
 import { Radio } from 'twenty-ui/input';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledRadioCardContent = styled(CardContent)`
  display: flex;
@@ -56,7 +55,6 @@ export const SettingsRadioCard = ({
  Icon,
 }: SettingsRadioCardProps) => {
  const { theme } = useContext(ThemeContext);
-
  const onClick = () => handleSelect(value);

  return (
@@ -4,8 +4,7 @@ import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  display: flex;
@@ -4,16 +4,15 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { styled } from '@linaria/react';
-import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
+import { t } from '@lingui/core/macro';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import { SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 const StyledContainer = styled.div`
@@ -52,13 +51,13 @@ const StyledButton = styled(Button)`
 `;

 export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
+  const { theme } = useContext(ThemeContext);
  const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
  const { closeDropdown } = useCloseDropdown();
  const navigate = useNavigateSettings();
  const location = useLocation();
  const { objectNamePlural = '' } = useParams();
  const [searchParams] = useSearchParams();
-  const { theme } = useContext(ThemeContext);

  const fieldType = searchParams.get('fieldType') as SettingsFieldType;
  const isConfigureStep = location.pathname.includes('/configure');
@@ -1,4 +1,5 @@
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { type z } from 'zod';

@@ -12,7 +13,6 @@ import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/uti
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { useLingui } from '@lingui/react/macro';
-import { useContext } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -22,8 +22,7 @@ import {
  TooltipDelay,
 } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/computeMetadataNameFromLabel';

 export const settingsDataModelFieldIconLabelFormSchema = (
@@ -96,7 +95,6 @@ export const SettingsDataModelFieldIconLabelForm = ({
  } = useFormContext<SettingsDataModelFieldIconLabelFormValues>();

  const { theme } = useContext(ThemeContext);
-
  const label = watch('label');

  const { t } = useLingui();
@@ -19,8 +19,7 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { H2Title, IconSearch } from 'twenty-ui/display';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { type SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/new-field/SettingsObjectNewFieldSelect';

@@ -43,8 +43,7 @@ import {
 import { LightButton, LightIconButton } from 'twenty-ui/input';
 import { CardContent, CardFooter } from 'twenty-ui/layout';
 import { MenuItem } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';

 export const settingsDataModelFieldSelectFormSchema = z.object({
@@ -159,6 +158,7 @@ export const SettingsDataModelFieldSelectForm = ({
  fieldType,
  disabled = false,
 }: SettingsDataModelFieldSelectFormProps) => {
+  const { theme } = useContext(ThemeContext);
  const { initialDefaultValue, initialOptions } =
    useSelectSettingsFormInitialValues({
      fieldMetadataId: existingFieldMetadataId,
@@ -302,8 +302,6 @@ export const SettingsDataModelFieldSelectForm = ({
    setFormValue('options', newOptions, { shouldDirty: true });
  };

-  const { theme } = useContext(ThemeContext);
-
  return (
    <>
      <Controller
@@ -6,8 +6,8 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { t } from '@lingui/core/macro';
 import {
  ColorSample,
@@ -23,9 +23,9 @@ import {
  MenuItem,
  MenuItemSelectColor,
 } from 'twenty-ui/navigation';
-import { MAIN_COLOR_NAMES, ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/computeOptionValueFromLabel';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';

 const useColorLabels = (): ColorLabels => ({
  gray: t`Gray`,
@@ -130,7 +130,9 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
  return (
    <StyledRow className={className}>
      <StyledIconGripVertical
-        style={{ minWidth: theme.icon.size.md }}
+        style={{
+          minWidth: theme.icon.size.md,
+        }}
        size={theme.icon.size.md}
        stroke={theme.icon.stroke.sm}
        color={theme.font.color.extraLight}
@@ -2,7 +2,8 @@ import { v4 } from 'uuid';

 import { type FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { generateNewSelectOptionLabel } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOptionLabel';
-import { getNextThemeColor } from 'twenty-ui/theme';
+import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+import { getNextThemeColor } from 'twenty-ui/theme-constants';
 import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/computeOptionValueFromLabel';

 export const generateNewSelectOption = (
@@ -11,7 +12,10 @@ export const generateNewSelectOption = (
 ): FieldMetadataItemOption => {
  const newOptionLabel = label ?? generateNewSelectOptionLabel(options);
  return {
-    color: getNextThemeColor(options[options.length - 1]?.color),
+    color: getNextThemeColor(
+      MAIN_COLOR_NAMES,
+      options[options.length - 1]?.color,
+    ),
    id: v4(),
    label: newOptionLabel,
    position: options.length,
@@ -12,11 +12,8 @@ import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fiel
 import { SettingsDataModelSetLabelIdentifierRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect';
 import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue';
 import { useIcons } from 'twenty-ui/display';
-import {
-  ICON_SIZES,
-  ICON_STROKES,
-  themeCssVariables,
-} from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 type SettingsDataModelFieldPreviewProps = {
@@ -66,6 +63,7 @@ export const SettingsDataModelFieldPreview = ({
      objectNameSingular: objectNameSingular,
    });

+  const { theme } = useContext(ThemeContext);
  const { getIcon } = useIcons();
  const FieldIcon = getIcon(fieldMetadataItem.icon);

@@ -115,7 +113,10 @@ export const SettingsDataModelFieldPreview = ({
          <StyledFieldPreview shrink={shrink}>
            {!!withFieldLabel && (
              <StyledFieldLabel>
-                <FieldIcon size={ICON_SIZES.md} stroke={ICON_STROKES.sm} />
+                <FieldIcon
+                  size={theme.icon.size.md}
+                  stroke={theme.icon.stroke.sm}
+                />
                {fieldMetadataItem.label}:
              </StyledFieldLabel>
            )}
@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';

 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -11,8 +10,8 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
 import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
 import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue';
 import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 } from 'uuid';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

@@ -62,9 +61,7 @@ export const SettingsDataModelRelationFieldPreview = ({
    useObjectMetadataItem({
      objectNameSingular: relationTargetObjectNameSingular,
    });
-
  const { theme } = useContext(ThemeContext);
-
  const { getIcon } = useIcons();
  const FieldIcon = getIcon(fieldMetadataItem.icon);

@@ -1,10 +1,10 @@
 import { type Edge, type Node } from '@xyflow/react';
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';

 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsDataModelOverviewEffectProps = {
  setEdges: (edges: Edge[]) => void;
@@ -15,7 +15,6 @@ export const SettingsDataModelOverviewEffect = ({
  setEdges,
  setNodes,
 }: SettingsDataModelOverviewEffectProps) => {
-  const { theme } = useContext(ThemeContext);
  const { activeNonSystemObjectMetadataItems: items } =
    useFilteredObjectMetadataItems();

@@ -62,7 +61,7 @@ export const SettingsDataModelOverviewEffect = ({
              type: 'smoothstep',
              style: {
                strokeWidth: 1,
-                stroke: theme.color.gray,
+                stroke: themeCssVariables.color.gray,
              },
              markerEnd: 'marker',
              markerStart: 'marker',
@@ -102,7 +101,7 @@ export const SettingsDataModelOverviewEffect = ({
    };

    loadDagreAndLayout();
-  }, [items, setEdges, setNodes, theme]);
+  }, [items, setEdges, setNodes]);

  return <></>;
 };
@@ -3,10 +3,9 @@ import { Handle, Position } from '@xyflow/react';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { useContext } from 'react';
 import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { RelationType } from '~/generated-metadata/graphql';

 type ObjectFieldRowProps = {
@@ -27,9 +26,9 @@ const StyledFieldName = styled.div`
 `;

 export const ObjectFieldRow = ({ field }: ObjectFieldRowProps) => {
+  const { theme } = useContext(ThemeContext);
  const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
  const { getIcon } = useIcons();
-  const { theme } = useContext(ThemeContext);

  const relatedObjectId = field.relation?.targetObjectMetadata.id;

@@ -1,10 +1,9 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';

 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type ObjectFieldRowWithoutRelationProps = {
  field: FieldMetadataItem;
@@ -26,8 +25,8 @@ const StyledFieldName = styled.div`
 export const ObjectFieldRowWithoutRelation = ({
  field,
 }: ObjectFieldRowWithoutRelationProps) => {
-  const { getIcon } = useIcons();
  const { theme } = useContext(ThemeContext);
+  const { getIcon } = useIcons();

  const Icon = getIcon(field?.icon);

@@ -15,8 +15,7 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui/display';
 import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
 type SettingsDataModelOverviewObjectProps =
@@ -1,8 +1,8 @@
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext } from 'twenty-ui/theme-constants';
 export const SettingsDataModelOverviewRelationMarkers = () => {
  const { theme } = useContext(ThemeContext);
+
  return (
    <svg style={{ position: 'absolute', top: 0, left: 0 }}>
      <defs>
@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';

 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -6,8 +5,8 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Checkbox } from 'twenty-ui/input';
 import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsAvailableStandardObjectItemTableRowProps = {
  isSelected?: boolean;
@@ -42,7 +41,6 @@ export const SettingsAvailableStandardObjectItemTableRow = ({
  onClick,
 }: SettingsAvailableStandardObjectItemTableRowProps) => {
  const { theme } = useContext(ThemeContext);
-
  const { getIcon } = useIcons();
  const Icon = getIcon(objectItem.icon);

@@ -1,12 +1,11 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { Link } from 'react-router-dom';

 import { type SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
 import { type IconComponent, IconTwentyStar } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsObjectFieldDataTypeProps = {
  to?: string;
@@ -68,7 +67,6 @@ export const SettingsObjectFieldDataType = ({
  onClick,
 }: SettingsObjectFieldDataTypeProps) => {
  const { theme } = useContext(ThemeContext);
-
  const fieldTypeConfig = getSettingsFieldTypeConfig(value);
  const Icon: IconComponent =
    IconFromProps ?? fieldTypeConfig?.Icon ?? IconTwentyStar;
@@ -24,8 +24,7 @@ import {
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { RelationType } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { type SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
@@ -89,6 +88,7 @@ export const SettingsObjectFieldItemTableRow = ({
  mode,
  status,
 }: SettingsObjectFieldItemTableRowProps) => {
+  const { theme } = useContext(ThemeContext);
  const { t } = useLingui();
  const { fieldMetadataItem, objectMetadataItem } =
    settingsObjectDetailTableItem;
@@ -99,7 +99,6 @@ export const SettingsObjectFieldItemTableRow = ({

  const navigate = useNavigateSettings();

-  const { theme } = useContext(ThemeContext);
  const { getIcon } = useIcons();
  const Icon = getIcon(fieldMetadataItem.icon);

@@ -185,7 +184,9 @@ export const SettingsObjectFieldItemTableRow = ({
        <StyledNameTableCell>
          {!!Icon && (
            <Icon
-              style={{ minWidth: theme.icon.size.md }}
+              style={{
+                minWidth: theme.icon.size.md,
+              }}
              size={theme.icon.size.md}
              stroke={theme.icon.stroke.sm}
            />
@@ -1,4 +1,4 @@
-import { useContext, type ReactNode } from 'react';
+import { type ReactNode, useContext } from 'react';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';

@@ -12,8 +12,7 @@ import {
 } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 export type SettingsObjectMetadataItemTableRowProps = {
  action: ReactNode;
@@ -57,8 +56,8 @@ export const SettingsObjectMetadataItemTableRow = ({
  link,
  totalObjectCount,
 }: SettingsObjectMetadataItemTableRowProps) => {
-  const { t } = useLingui();
  const { theme } = useContext(ThemeContext);
+  const { t } = useLingui();

  const { getIcon } = useIcons();
  const Icon = getIcon(objectMetadataItem.icon);
@@ -68,7 +67,9 @@ export const SettingsObjectMetadataItemTableRow = ({
      <StyledNameTableCell>
        {!!Icon && (
          <Icon
-            style={{ minWidth: theme.icon.size.md }}
+            style={{
+              minWidth: theme.icon.size.md,
+            }}
            size={theme.icon.size.md}
            stroke={theme.icon.stroke.sm}
          />
@@ -17,8 +17,7 @@ import { FieldMetadataType, SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath, isDefined } from 'twenty-shared/utils';
 import { IconChevronRight, useIcons } from 'twenty-ui/display';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 type SettingsObjectRelationItemTableRowProps = {
@@ -99,9 +98,9 @@ export const SettingsObjectRelationItemTableRow = ({
  fieldMetadataItem,
  objectMetadataItem,
 }: SettingsObjectRelationItemTableRowProps) => {
+  const { theme } = useContext(ThemeContext);
  const { t } = useLingui();
  const navigate = useNavigateSettings();
-  const { theme } = useContext(ThemeContext);
  const { getIcon } = useIcons();

  const Icon = getIcon(fieldMetadataItem.icon);
@@ -163,7 +162,9 @@ export const SettingsObjectRelationItemTableRow = ({
      <StyledNameTableCell>
        {!!Icon && (
          <Icon
-            style={{ minWidth: theme.icon.size.md }}
+            style={{
+              minWidth: theme.icon.size.md,
+            }}
            size={theme.icon.size.md}
            stroke={theme.icon.stroke.sm}
          />
@@ -1,6 +1,6 @@
 import { t } from '@lingui/core/macro';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
+import { useContext } from 'react';

 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import {
@@ -9,8 +9,7 @@ import {
  useIcons,
 } from 'twenty-ui/display';
 import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 export type SettingsDataModelObjectPreviewProps = {
  className?: string;
@@ -103,6 +102,7 @@ const SettingsDataModelObjectPreviewOtherObjects = ({
  selected: number;
 }) => {
  const { theme } = useContext(ThemeContext);
+
  return (
    <>
      <StyledSeparator />
@@ -10,9 +10,7 @@ import { Card } from 'twenty-ui/layout';

 import DarkCoverImage from '@/settings/data-model/assets/cover-dark.png';
 import LightCoverImage from '@/settings/data-model/assets/cover-light.png';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledCoverImageContainer = styled(Card)`
  align-items: center;
  background-size: cover;
@@ -29,13 +27,14 @@ const StyledButtonContainer = styled.div`
  padding-top: ${themeCssVariables.spacing[5]};
 `;
 export const SettingsObjectCoverImage = () => {
+  const { colorScheme } = useContext(ThemeContext);
+
  const { t } = useLingui();
-  const { theme } = useContext(ThemeContext);
  return (
    <StyledCoverImageContainer
      style={{
        backgroundImage:
-          theme.name === 'light'
+          colorScheme === 'light'
            ? `url('${LightCoverImage.toString()}')`
            : `url('${DarkCoverImage.toString()}')`,
      }}
@@ -6,8 +6,8 @@ import { type SettingsDataModelObjectAboutFormValues } from '@/settings/data-mod
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { TextArea } from '@/ui/input/components/TextArea';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { plural } from 'pluralize';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -22,8 +22,7 @@ import {
 } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { Card } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type StringKeyOf } from 'type-fest';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/computeMetadataNameFromLabel';
@@ -115,10 +114,10 @@ export const SettingsDataModelObjectAboutForm = ({
  objectMetadataItem,
  conflictingObjectMetadataItem,
 }: SettingsDataModelObjectAboutFormProps) => {
+  const { theme } = useContext(ThemeContext);
  const { control, watch, setValue } =
    useFormContext<SettingsDataModelObjectAboutFormValues>();
  const { t } = useLingui();
-  const { theme } = useContext(ThemeContext);
  const navigateSettings = useNavigateSettings();

  const isLabelSyncedWithName = watch('isLabelSyncedWithName');
@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';

 import {
@@ -8,8 +7,8 @@ import {
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { IconChevronRight } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme-constants';
 import { type ApiKey } from '~/generated-metadata/graphql';

 export const StyledApisFieldTableRow = styled(TableRow)`
@@ -2,14 +2,13 @@ import { styled } from '@linaria/react';

 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { useContext } from 'react';
 import { getUrlHostnameOrThrow, isValidUrl } from 'twenty-shared/utils';
 import {
  IconChevronRight,
  OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type Webhook } from '~/generated-metadata/graphql';

 export const StyledApisFieldTableRow = styled(TableRow)`
@@ -42,7 +41,6 @@ export const SettingsDevelopersWebhookTableRow = ({
  to: string;
 }) => {
  const { theme } = useContext(ThemeContext);
-
  return (
    <StyledApisFieldTableRow to={to}>
      <StyledUrlTableCell>
@@ -26,8 +26,7 @@ import {
  useIcons,
 } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const WEBHOOK_ENTITY_DROPDOWN_ID = 'webhook-entity-select';

@@ -1,11 +1,10 @@
 import { styled } from '@linaria/react';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { useContext } from 'react';
 import { IconChevronRight } from 'twenty-ui/display';
 import { StyledTableRow } from '@/settings/logic-functions/components/SettingsLogicFunctionsTable';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledNameTableCell = styled(TableCell)`
  color: ${themeCssVariables.font.color.primary};
@@ -8,9 +8,8 @@ import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
 import 'graphiql/graphiql.css';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type GraphQLPlaygroundProps = {
  onError(): void;
@@ -39,7 +38,7 @@ export const GraphQLPlayground = ({
  const playgroundApiKey = useAtomStateValue(playgroundApiKeyState);
  const baseUrl = REACT_APP_SERVER_BASE_URL + '/' + schemaToPath[schema];

-  const { theme } = useContext(ThemeContext);
+  const { colorScheme } = useContext(ThemeContext);

  if (!playgroundApiKey) {
    onError();
@@ -57,7 +56,7 @@ export const GraphQLPlayground = ({
  return (
    <StyledGraphiQLContainer>
      <GraphiQL
-        forcedTheme={theme.name as 'light' | 'dark'}
+        forcedTheme={colorScheme}
        plugins={[explorer]}
        fetcher={fetcher}
        defaultHeaders={JSON.stringify({
@@ -6,9 +6,8 @@ import { styled } from '@linaria/react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  border: 1px solid ${themeCssVariables.border.color.medium};
@@ -51,7 +50,7 @@ type RestPlaygroundProps = {
 };

 export const RestPlayground = ({ onError, schema }: RestPlaygroundProps) => {
-  const { theme } = useContext(ThemeContext);
+  const { theme, colorScheme } = useContext(ThemeContext);
  const playgroundApiKey = useAtomStateValue(playgroundApiKeyState);

  if (!playgroundApiKey) {
@@ -85,7 +84,7 @@ export const RestPlayground = ({ onError, schema }: RestPlaygroundProps) => {
              },
            },
            baseServerURL: REACT_APP_SERVER_BASE_URL + '/' + schema,
-            forceDarkModeState: theme.name === 'dark' ? 'dark' : 'light',
+            forceDarkModeState: colorScheme === 'dark' ? 'dark' : 'light',
            hideClientButton: true,
            hideDarkModeToggle: true,
            hideModels: schema === 'metadata',
@@ -4,9 +4,7 @@ import { type ReactNode, useContext } from 'react';
 import DarkCoverImage from '@/settings/playground/assets/cover-dark.png';
 import LightCoverImage from '@/settings/playground/assets/cover-light.png';
 import { Card } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledCard = styled(Card)`
  align-items: center;
  background-size: cover;
@@ -29,9 +27,10 @@ export const StyledSettingsApiPlaygroundCoverImage = ({
  children,
  className,
 }: StyledSettingsApiPlaygroundCoverImageProps) => {
-  const { theme } = useContext(ThemeContext);
+  const { colorScheme } = useContext(ThemeContext);
+
  const coverImage =
-    theme.name === 'light'
+    colorScheme === 'light'
      ? LightCoverImage.toString()
      : DarkCoverImage.toString();
  return (
@@ -14,8 +14,7 @@ import {
  TooltipDelay,
  useIcons,
 } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPartialMembers';

@@ -62,7 +61,6 @@ type SettingsRolesTableRowProps = {

 export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
  const { theme } = useContext(ThemeContext);
-
  const { getIcon } = useIcons();
  const Icon = getIcon(role.icon ?? 'IconUser');

@@ -12,8 +12,7 @@ import {
  OverflowingTextWithTooltip,
  useIcons,
 } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type Agent, type ApiKeyForRole } from '~/generated-metadata/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateString } from '~/utils/string/formatDateString';
@@ -55,10 +54,10 @@ type SettingsRoleAssignmentTableRowProps = {
 export const SettingsRoleAssignmentTableRow = ({
  roleTarget,
 }: SettingsRoleAssignmentTableRowProps) => {
-  const { theme } = useContext(ThemeContext);
  const currentWorkspaceMembers = useAtomStateValue(
    currentWorkspaceMembersState,
  );
+  const { theme } = useContext(ThemeContext);
  const { getIcon } = useIcons();
  const { dateFormat, timeZone } = useContext(UserContext);
  const dateLocale = useAtomStateValue(dateLocaleState);
@@ -10,8 +10,7 @@ import { useSearchParams } from 'react-router-dom';
 import { SettingsPath } from 'twenty-shared/types';
 import { H2Title, IconSearch, useIcons } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 const StyledTypeSelectContainer = styled.div`
@@ -6,13 +6,12 @@ import { SettingsRolePermissionsObjectLevelUpdateFieldsValueForObject } from '@/
 import { OBJECT_LEVEL_PERMISSION_TABLE_GRID_AUTO_COLUMNS } from '@/settings/roles/role-permissions/object-level-permissions/constants/ObjectLevelPermissionTableGridAutoColumns';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledNameTableCell = styled(TableCell)`
  color: ${themeCssVariables.font.color.primary};
@@ -43,8 +42,8 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
  isEditable = true,
  fromAgentId,
 }: SettingsRolePermissionsObjectLevelTableRowProps) => {
-  const { getIcon } = useIcons();
  const { theme } = useContext(ThemeContext);
+  const { getIcon } = useIcons();

  const Icon = getIcon(objectMetadataItem.icon);

@@ -66,7 +65,9 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
      <StyledNameTableCell>
        {!!Icon && (
          <Icon
-            style={{ minWidth: theme.icon.size.md }}
+            style={{
+              minWidth: theme.icon.size.md,
+            }}
            size={theme.icon.size.md}
            stroke={theme.icon.stroke.sm}
          />
@@ -13,8 +13,7 @@ import { styled } from '@linaria/react';
 import { useContext, useMemo } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 } from 'uuid';
 import {
  type FieldPermission,
@@ -161,7 +160,9 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow =
        <StyledNameTableCell>
          {!!Icon && (
            <Icon
-              style={{ minWidth: theme.icon.size.md }}
+              style={{
+                minWidth: theme.icon.size.md,
+              }}
              size={theme.icon.size.md}
              stroke={theme.icon.stroke.sm}
            />
@@ -1,9 +1,8 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { IconReload, IconX } from 'twenty-ui/display';
 import { Checkbox } from 'twenty-ui/input';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { AnimatedRotate } from 'twenty-ui/utilities';

 export type OverridableCheckboxType = 'default' | 'override' | 'no_cta';
@@ -24,8 +24,7 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
 import { type CompositeFieldType } from '@/settings/data-model/types/CompositeFieldType';
 import { createRecordLevelPermissionVariablePicker } from '@/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  align-items: stretch;
@@ -99,7 +98,6 @@ export const SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput =
    recordFilterId,
  }: SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInputProps) => {
    const { theme } = useContext(ThemeContext);
-
    const { objectMetadataItem } = useContext(AdvancedFilterContext);

    const currentRecordFilters = useAtomComponentStateValue(
@@ -1,10 +1,9 @@
 /* @license Enterprise */

-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { IconVariablePlus } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 import { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent';
 import { SettingsRolePermissionsObjectLevelRecordLevelPermissionMeValueSelect } from '@/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionMeValueSelect';
@@ -2,10 +2,9 @@ import {
  SETTINGS_ROLE_OBJECT_PERMISSION_ICON_CONFIG,
  type SettingsRoleObjectPermissionKey,
 } from '@/settings/roles/role-permissions/objects-permissions/constants/SettingsRoleObjectPermissionIconConfig';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type PermissionIconProps = {
  permission: SettingsRoleObjectPermissionKey;
@@ -39,11 +38,10 @@ const StyledIcon = styled.div<{ isRevoked?: boolean }>`
 `;

 export const PermissionIcon = ({ permission, state }: PermissionIconProps) => {
-  const { theme } = useContext(ThemeContext);
-
  const { Icon, IconForbidden } =
    SETTINGS_ROLE_OBJECT_PERMISSION_ICON_CONFIG[permission];

+  const { theme } = useContext(ThemeContext);
  const isRevoked = state === 'revoked';

  return (
@@ -4,11 +4,10 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { Checkbox } from 'twenty-ui/input';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 } from 'uuid';

 const StyledTableRow = styled(TableRow)<{ isDisabled: boolean }>`
@@ -1,13 +1,12 @@
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';

 import { H2Title, IconKey, IconRobot, IconUsers } from 'twenty-ui/display';
 import { Checkbox } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';

 const StyledCheckboxContainer = styled.div<{ disabled: boolean }>`
@@ -52,7 +51,6 @@ export const SettingsRoleApplicability = ({
  isEditable,
 }: SettingsRoleApplicabilityProps) => {
  const { theme } = useContext(ThemeContext);
-
  const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);

  const options = [
@@ -3,7 +3,7 @@
 import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
-import { useContext, type ChangeEvent, useRef } from 'react';
+import { type ChangeEvent, useContext, useRef } from 'react';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useFormContext } from 'react-hook-form';
@@ -18,8 +18,7 @@ import {
 } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';

@@ -57,8 +56,8 @@ const StyledButtonCopy = styled.div`
 `;

 export const SettingsSSOSAMLForm = () => {
-  const { enqueueErrorSnackBar } = useSnackBar();
  const { theme } = useContext(ThemeContext);
+  const { enqueueErrorSnackBar } = useSnackBar();
  const { setValue, getValues, watch, trigger } = useFormContext();
  const { t } = useLingui();
  const { copyToClipboard } = useCopyToClipboard();