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'` |

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -19,8 +19,11 @@ import {
 } from 'twenty-ui/display';
 import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback';
 import { LightButton, LightIconButton } from 'twenty-ui/input';
-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';
 
 export enum SnackBarVariant {
   Default = 'default',
@@ -154,8 +157,8 @@ export const SnackBar = ({
   role = 'status',
   variant = SnackBarVariant.Default,
 }: SnackBarProps) => {
-  const { theme } = useContext(ThemeContext);
   const { i18n, t } = useLingui();
+  const { theme } = useContext(ThemeContext);
   const { animation: progressAnimation, value: progressValue } =
     useProgressAnimation({
       autoPlay: isUndefined(overrideProgressValue),
@@ -197,7 +200,7 @@ export const SnackBar = ({
           <IconAlertTriangle {...{ 'aria-label': ariaLabel, color, size }} />
         );
     }
-  }, [iconComponent, theme.icon.size.md, theme.snackBar, variant, i18n]);
+  }, [iconComponent, variant, i18n, theme.icon.size.md, theme.snackBar]);
 
   const handleMouseEnter = () => {
     if (progressAnimation?.state === 'running') {

packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx

@@ -13,7 +13,7 @@ import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { isDefined, formatToShortNumber } from 'twenty-shared/utils';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/formatNumber';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 
 type CurrencyDisplayProps = {
   currencyValue: FieldCurrencyValue | null | undefined;

packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx

@@ -1,9 +1,8 @@
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { IconArrowUp } from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx

@@ -7,8 +7,7 @@ import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/cur
 import { type Currency } from '@/ui/input/components/internal/types/Currency';
 import { IMaskInput } from 'react-imask';
 import { type IconComponent } 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 const StyledIMaskInput = styled(IMaskInput)`
   margin: 0;
@@ -82,7 +81,6 @@ export const CurrencyInput = ({
   decimals,
 }: CurrencyInputProps) => {
   const { theme } = useContext(ThemeContext);
-
   const [internalText, setInternalText] = useState(value);
 
   const wrapperRef = useRef<HTMLInputElement>(null);

packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx

@@ -6,7 +6,7 @@ import { useClearField } from '@/object-record/record-field/ui/hooks/useClearFie
 import { RATING_VALUES } from 'twenty-shared/constants';
 import { type FieldRatingValue } from 'twenty-shared/types';
 import { IconTwentyStarFilled } from 'twenty-ui/display';
-import { THEME_COMMON, ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -26,18 +26,17 @@ type RatingInputProps = {
   readonly?: boolean;
 };
 
-const iconSizeMd = THEME_COMMON.icon.size.md;
-
 export const RatingInput = ({
   onChange,
   value,
   readonly,
 }: RatingInputProps) => {
-  const { theme } = useContext(ThemeContext);
   const clearField = useClearField();
+  const { theme } = useContext(ThemeContext);
 
-  const activeColor = theme.font.color.secondary;
-  const inactiveColor = theme.background.quaternary;
+  const iconSizeMd = theme.icon.size.md;
+  const activeColor = themeCssVariables.font.color.secondary;
+  const inactiveColor = themeCssVariables.background.quaternary;
 
   const [hoveredValue, setHoveredValue] = useState<FieldRatingValue>(null);
 

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -7,9 +7,7 @@ import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
 import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;

packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx

@@ -10,8 +10,7 @@ import {
   type IconComponent,
   OverflowingTextWithTooltip,
 } 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 StyledIconChevronDownWrapper = styled.div<{
   disabled?: boolean;
@@ -44,7 +43,6 @@ export const MultiSelectControl = ({
   hasRightElement,
 }: MultiSelectControlProps) => {
   const { theme } = useContext(ThemeContext);
-
   const firstSelectedOption = selectedOptions?.[0];
   return (
     <StyledControlContainer

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx

@@ -1,11 +1,10 @@
 import { type SelectSizeVariant } from '@/ui/input/components/Select';
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type SelectControlTextAccent = 'default' | 'placeholder';
 
@@ -79,7 +78,6 @@ export const SelectControl = ({
   hasRightElement,
 }: SelectControlProps) => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <StyledControlContainer
       disabled={isDisabled}

packages/twenty-front/src/modules/ui/input/components/TextInput.tsx

@@ -16,9 +16,7 @@ import { type IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
 import { AutogrowWrapper } from 'twenty-ui/utilities';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
   box-sizing: border-box;
   display: inline-flex;

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx

@@ -6,12 +6,10 @@ import { CurrencyCode } from 'twenty-shared/constants';
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { type Currency } from '@/ui/input/components/internal/types/Currency';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { useContext } from 'react';
 import { IconChevronDown } from 'twenty-ui/display';
 import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
-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 StyledDropdownButtonContainer = styled.div`
   align-items: center;
   color: ${({ color }) => color ?? 'none'};
@@ -51,7 +49,6 @@ export const CurrencyPickerDropdownButton = ({
   onChange: (currency: Currency) => void;
 }) => {
   const { theme } = useContext(ThemeContext);
-
   const dropdownId = 'currency-picker-dropdown-id';
 
   const { closeDropdown } = useCloseDropdown();

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { Suspense, lazy, type ComponentType, useContext } from 'react';
+import { Suspense, lazy, useContext, type ComponentType } from 'react';
 import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
@@ -26,8 +26,7 @@ import {
 } from 'twenty-shared/utils';
 import { IconCalendarX } from 'twenty-ui/display';
 import { MenuItemLeftContent } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
   'date-picker-month-and-year-dropdown-month-select';
@@ -355,14 +354,13 @@ export const DatePicker = ({
   onRelativeDateChange,
   hideHeaderInput,
 }: DatePickerProps) => {
+  const { theme } = useContext(ThemeContext);
   const plainDate = isDefined(plainDateString)
     ? Temporal.PlainDate.from(plainDateString)
     : Temporal.Now.plainDateISO();
 
   const { userTimezone } = useUserTimezone();
 
-  const { theme } = useContext(ThemeContext);
-
   const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
   const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
   const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerWithoutCalendar.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { Suspense, lazy, type ComponentType, useContext } from 'react';
+import { Suspense, lazy, useContext, type ComponentType } from 'react';
 import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
@@ -16,8 +16,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { Temporal } from 'temporal-polyfill';
 import { type Nullable } from 'twenty-shared/types';
 import { isDefined, turnJSDateToPlainDate } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
   'date-picker-month-and-year-dropdown-month-select';
@@ -323,9 +322,8 @@ export const DatePickerWithoutCalendar = ({
   onChange,
   onClose,
 }: DatePickerWithoutCalendarProps) => {
-  const plainDate = isDefined(date) ? Temporal.PlainDate.from(date) : null;
-
   const { theme } = useContext(ThemeContext);
+  const plainDate = isDefined(date) ? Temporal.PlainDate.from(date) : null;
 
   const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
   const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx

@@ -11,7 +11,7 @@ import { getHighlightedDates } from '@/ui/input/components/internal/date/utils/g
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { Suspense, lazy, type ComponentType, useContext } from 'react';
+import { Suspense, lazy, useContext, type ComponentType } from 'react';
 import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
@@ -24,9 +24,7 @@ import { useGetShiftedDateToSystemTimeZone } from '@/ui/input/components/interna
 import { useUserFirstDayOfTheWeek } from '@/ui/input/components/internal/date/hooks/useUserFirstDayOfTheWeek';
 import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUserTimezone';
 import { Temporal } from 'temporal-polyfill';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
   'date-picker-month-and-year-dropdown-month-select';
 export const MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID =
@@ -356,7 +354,6 @@ export const DateTimePicker = ({
   timeZone,
 }: DateTimePickerProps) => {
   const { theme } = useContext(ThemeContext);
-
   const { userFirstDayOfTheWeek } = useUserFirstDayOfTheWeek();
 
   const { userTimezone } = useUserTimezone();

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx

@@ -13,8 +13,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import 'react-phone-number-input/style.css';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, IconWorld } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type StyledDropdownButtonProps = {
   isUnfolded: boolean;
@@ -75,8 +74,6 @@ export const PhoneCountryPickerDropdownButton = ({
   value: string;
   onChange: (countryCode: string) => void;
 }) => {
-  const { theme } = useContext(ThemeContext);
-
   const [selectedCountry, setSelectedCountry] = useState<Country>();
 
   const isDropdownOpen = useAtomComponentStateValue(
@@ -92,6 +89,7 @@ export const PhoneCountryPickerDropdownButton = ({
   };
 
   const countries = useCountries();
+  const { theme } = useContext(ThemeContext);
 
   useEffect(() => {
     const country = countries.find(({ countryCode }) => countryCode === value);

packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -1,11 +1,9 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { type CSSWidth } from '@/ui/types/CSSWidth';
 import { styled } from '@linaria/react';
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledDropdownMenuSkeletonContainer = styled.div`
   --horizontal-padding: ${themeCssVariables.spacing[1]};
   --vertical-padding: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx

@@ -1,8 +1,8 @@
 import { Draggable } from '@hello-pangea/dnd';
 import { isFunction } from '@sniptt/guards';
-import { isDefined } from 'twenty-shared/utils';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
+import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 
 type DraggableItemProps = {
   draggableId: string;
@@ -30,7 +30,6 @@ export const DraggableItem = ({
   containerOffsetY,
 }: DraggableItemProps) => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <Draggable
       key={draggableId}

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx

@@ -6,8 +6,7 @@ import {
   type IconComponent,
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledNonClickableStartIcon = styled.div`
   align-items: center;
@@ -42,7 +41,6 @@ export const DropdownMenuHeaderLeftComponent = ({
   | Record<never, never>
 )) => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <>
       {'Icon' in props &&

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx

@@ -4,12 +4,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { IconChevronDown } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
   align-items: center;
@@ -46,7 +45,6 @@ export const DropdownMenuInnerSelect = ({
   widthInPixels,
 }: DropdownMenuInnerSelectProps) => {
   const { theme } = useContext(ThemeContext);
-
   const { closeDropdown } = useCloseDropdown();
 
   return (

packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx

@@ -6,9 +6,8 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl
 import { isDefined } from 'twenty-shared/utils';
 import { Tag } from 'twenty-ui/components';
 import { ComponentDecorator } from 'twenty-ui/testing';
-import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-
+import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
 const StyledContainer = styled.div`
   padding: ${themeCssVariables.spacing[1]};
   width: 300px;

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -9,13 +9,11 @@ import { styled } from '@linaria/react';
 import { i18n } from '@lingui/core';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
+import { useContext } from 'react';
 import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
 import { AnimatedButton } from 'twenty-ui/input';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>`
   align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')};
   display: ${({ alignToTop }) => (alignToTop ? 'flex' : 'block')};
@@ -45,6 +43,7 @@ const AnimatedIcon = ({
   isCommandMenuOpened: boolean;
 }) => {
   const { theme } = useContext(ThemeContext);
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -68,7 +67,9 @@ const AnimatedIcon = ({
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
         }}
-        transition={{ duration: theme.animation.duration.fast }}
+        transition={{
+          duration: theme.animation.duration.fast,
+        }}
       />
 
       {/* X lines expanding from center */}
@@ -99,7 +100,9 @@ const AnimatedIcon = ({
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
         }}
-        transition={{ duration: theme.animation.duration.fast }}
+        transition={{
+          duration: theme.animation.duration.fast,
+        }}
       />
 
       {/* Bottom dot */}
@@ -112,13 +115,16 @@ const AnimatedIcon = ({
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
         }}
-        transition={{ duration: theme.animation.duration.fast }}
+        transition={{
+          duration: theme.animation.duration.fast,
+        }}
       />
     </svg>
   );
 };
 
 export const PageHeaderToggleCommandMenuButton = () => {
+  const { theme } = useContext(ThemeContext);
   const { toggleCommandMenu } = useCommandMenu();
   const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
   const isNavigationMenuInEditMode = useAtomStateValue(
@@ -133,9 +139,6 @@ export const PageHeaderToggleCommandMenuButton = () => {
   const ariaLabel = isCommandMenuOpened
     ? t`Close command menu`
     : t`Open command menu`;
-
-  const { theme } = useContext(ThemeContext);
-
   return (
     <StyledButtonWrapper alignToTop={alignWithCommandMenuTopBar}>
       <div id="toggle-command-menu-button">

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -27,9 +27,7 @@ import { styled } from '@linaria/react';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
 import { useScreenSize } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledLayout = styled.div`
   background: ${themeCssVariables.background.noisy};
   display: flex;
@@ -66,10 +64,10 @@ const StyledMainContainer = styled.div`
 export const DefaultLayout = () => {
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
-  const { theme } = useContext(ThemeContext);
   const windowsWidth = useScreenSize().width;
   const showAuthModal = useShowAuthModal();
   const useShowFullScreen = useShowFullscreen();
+  const { theme } = useContext(ThemeContext);
 
   return (
     <>

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -15,8 +15,11 @@ import {
   OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-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 StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx

@@ -8,8 +8,7 @@ import { lazy, Suspense, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const ActivityRichTextEditor = lazy(() =>
   import('@/activities/components/ActivityRichTextEditor').then((module) => ({
@@ -33,7 +32,6 @@ const StyledSkeletonContainer = styled.div`
 
 const LoadingSkeleton = () => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <StyledSkeletonContainer>
       <SkeletonTheme

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -11,8 +11,7 @@ import {
   type IconComponent,
 } 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 { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 as uuidV4 } from 'uuid';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import {

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabAvatar.tsx

@@ -2,7 +2,7 @@ import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { Avatar } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 
 export const TabAvatar = ({ tab }: { tab: SingleTabProps }) => {
   const { theme } = useContext(ThemeContext);

packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -2,8 +2,7 @@ import { styled } from '@linaria/react';
 import { type ReactNode, useContext, useState } from 'react';
 import { TableBody } from './TableBody';
 import { IconChevronDown, IconChevronUp, Label } 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';
 
 type TableSectionProps = {
   children: ReactNode;
@@ -41,8 +40,8 @@ export const TableSection = ({
   isInitiallyExpanded = true,
   title,
 }: TableSectionProps) => {
-  const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
   const { theme } = useContext(ThemeContext);
+  const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
 
   const handleToggleSection = () =>
     setIsExpanded((previousIsExpanded) => !previousIsExpanded);

packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx

@@ -5,8 +5,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { type ReactNode, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { IconChevronLeft } 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 MobileBreadcrumbProps = {
   className?: string;
@@ -45,7 +44,6 @@ export const MobileBreadcrumb = ({
   links,
 }: MobileBreadcrumbProps) => {
   const { theme } = useContext(ThemeContext);
-
   const { openSettingsMenu } = useOpenSettingsMenu();
 
   const handleBackToSettingsClick = () => {

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx

@@ -7,7 +7,6 @@ import {
   type ReactNode,
   useContext,
 } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
 import {
   IconChevronRight,
   type IconComponent,
@@ -20,6 +19,7 @@ import {
   StyledHoverableMenuItemBase,
   StyledMenuItemLeftContent,
 } from 'twenty-ui/navigation';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 
 export type MenuItemIconButton = {
   Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;
@@ -64,7 +64,6 @@ export const MenuItemWithOptionDropdown = ({
   dropdownPlacement = 'bottom-end',
 }: MenuItemWithOptionDropdownProps) => {
   const { theme } = useContext(ThemeContext);
-
   const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
     if (!onClick) return;
     event.preventDefault();

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx

@@ -7,14 +7,13 @@ import {
 } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { useContext } from 'react';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { useContext } from 'react';
 import { Avatar } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext } from 'twenty-ui/theme-constants';
 export const MultiWorkspaceDropdownClickableComponent = () => {
-  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
   const { theme } = useContext(ThemeContext);
+  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
 
   const isNavigationDrawerExpanded = useAtomStateValue(
     isNavigationDrawerExpandedState,

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx

@@ -2,14 +2,13 @@ import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
 import {
   type AnimationControls,
   motion,
   type TargetAndTransition,
 } from 'framer-motion';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 const StyledAnimatedContainerBase = styled.span`
   display: block;
 `;
@@ -50,7 +49,9 @@ export const NavigationDrawerAnimatedCollapseWrapper = ({
     <StyledAnimatedContainer
       initial={false}
       animate={animate}
-      transition={{ duration: theme.animation.duration.normal }}
+      transition={{
+        duration: theme.animation.duration.normal,
+      }}
     >
       {children}
     </StyledAnimatedContainer>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -1,5 +1,4 @@
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
 
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
@@ -8,10 +7,10 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
 import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
+import { useContext } from 'react';
 import { IconX } 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';
 
 type NavigationDrawerBackButtonProps = {
   title: string;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -25,8 +25,11 @@ import {
   TooltipDelay,
   TooltipPosition,
 } from 'twenty-ui/display';
-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';
 import {
   type TriggerEventType,
   useMouseDownNavigation,

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx

@@ -2,14 +2,13 @@ import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
-import { useContext, type ReactNode } from 'react';
+import { type ReactNode, useContext } from 'react';
 import {
   type AnimationControls,
   motion,
   type TargetAndTransition,
 } from 'framer-motion';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext } from 'twenty-ui/theme-constants';
 const StyledAnimationGroupContainerBase = styled.div``;
 
 const StyledAnimationGroupContainer = motion.create(
@@ -52,7 +51,9 @@ export const NavigationDrawerItemsCollapsableContainer = ({
     <StyledAnimationGroupContainer
       initial={false}
       animate={animate}
-      transition={{ duration: theme.animation.duration.normal }}
+      transition={{
+        duration: theme.animation.duration.normal,
+      }}
     >
       {children}
     </StyledAnimationGroupContainer>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx

@@ -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 StyledSkeletonTitle = styled.div`
   margin-bottom: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx

@@ -1,11 +1,14 @@
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
 import { motion } from 'framer-motion';
+import { useContext } from 'react';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { AnimatedCheckmark } from 'twenty-ui/display';
-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 StyledContainer = styled.div<{ isLast: boolean }>`
   align-items: center;
@@ -82,8 +85,8 @@ export const Step = ({
   children,
   activeStep = 0,
 }: StepProps) => {
-  const { theme } = useContext(ThemeContext);
   const isMobile = useIsMobile();
+  const { theme } = useContext(ThemeContext);
 
   const variantsLine = {
     previous: {

packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx

@@ -4,7 +4,7 @@ import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { type ColorScheme } from 'twenty-ui/input';
-import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
+import { ThemeProvider } from 'twenty-ui/theme-constants';
 
 type BaseThemeProviderProps = {
   children: JSX.Element | JSX.Element[];
@@ -24,14 +24,13 @@ export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => {
       ? systemColorScheme
       : persistedColorScheme;
 
-  document.documentElement.className =
-    effectiveColorScheme === 'Dark' ? 'dark' : 'light';
-
-  const theme = effectiveColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
-
   return (
     <ThemeSchemeContext.Provider value={setPersistedColorScheme}>
-      <ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>
+      <ThemeProvider
+        colorScheme={effectiveColorScheme === 'Dark' ? 'dark' : 'light'}
+      >
+        {children}
+      </ThemeProvider>
     </ThemeSchemeContext.Provider>
   );
 };