Make twenty-ui theming a consumer-facing API (#22007)

**What**
- Add `useTheme()` and `useThemeColorScheme()` as the public theme
accessors, and migrate the 88 internal `useContext(ThemeContext)` call
sites to them. `ThemeContext` stays exported.
- Make `ThemeProvider` overridable and scopeable: new `applyToRoot`
(default `true`), `overrides` (a `--t-*` map), and `className` props.
When scoping is requested it renders a `display: contents` wrapper that
also serves as the themed portal container, exposed via
`ThemeScopeContext` / `useThemeContainer()`. `AppTooltip` and `Modal`
portal into that container, falling back to `document.body`.
- Document the `--t-*` override contract in the README; barrels
regenerated.

**Why**
Consumers had no stable theme accessor (they reached into the raw
context) and no supported way to re-theme. This adds both without
behavior change.

**Reviewer notes**
- The default path is unchanged: `applyToRoot` defaults to `true`, so
the colorScheme class still lands on `<html>` and portaled overlays
(tooltips, dropdowns, modals) stay themed. The global class is
load-bearing for body portals; scoping is opt-in.
- `twenty-front` is untouched (migrating its consumers is a separate
follow-up).

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22007?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

This commit is contained in:

Raphaël Bosi

2026-06-23 14:16:09 +02:00

committed by

GitHub

parent 85406a58fb

commit 0f451897cf

97 changed files with 330 additions and 319 deletions

									
										packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
									
		+3
		-3
	
												View File
												
				@@ -1,7 +1,7 @@

				import { Toggle } from '@ui/input';

				import { ThemeContext } from '@ui/theme-constants';

				import { useTheme } from '@ui/theme-constants';

				import { clsx } from 'clsx';

				import { useContext, useId } from 'react';

				import { useId } from 'react';

				import styles from './AdvancedSettingsToggle.module.scss';

				@@ -18,7 +18,7 @@ export const AdvancedSettingsToggle = ({

				  label = 'Advanced',

				  className,

				}: AdvancedSettingsToggleProps) => {

				  const { theme } = useContext(ThemeContext);

				  const theme = useTheme();

				  const onChange = (newValue: boolean) => {

				    setIsAdvancedModeEnabled(newValue);