v2: inherit theme changes from v3

Changes

This essentially backports #1735 to v2. It's necessary for applications to incrementally migrate to v3 while maintaining a coherent look.

(I've already noticed a few places where theme v2 UI stays in light theme when application theme switches to dark)

Testing

Tested behavior in vite playground by installing itwinui-v3 as an npm alias.

Before	After

main.tsx

```tsx import * as React from 'react'; import { createRoot } from 'react-dom/client'; import styled from '@emotion/styled'; import { ThemeProvider } from '@itwin/itwinui-react'; import { ThemeProvider as ThemeProviderV3 } from 'itwinui-v3'; import App from './App'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; const Shell = () => { const [theme, setTheme] = React.useState<'light' | 'dark'>(() => matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light', ); const [highContrast, setHighContrast] = React.useState(false); return ( <>

{ const newThemeValue = theme === 'dark' ? 'light' : 'dark'; setTheme(newThemeValue); }} > {theme === 'dark' ? : } { const newHcValue = !highContrast; setHighContrast(newHcValue); }} > {highContrast ? 'High Contrast' : 'Regular contrast'}

); }; const Main = styled.main` padding: 2rem 1rem; height: 100vh; `; const ThemeToggle = styled.button` all: unset; display: inline-grid; place-items: center; position: fixed; font-family: system-ui; user-select: none; top: 0; right: 0; min-width: 2.5rem; height: 2.5rem; cursor: pointer; border-radius: 50%; &:hover { background: hsl(0 0% 0% / 0.2); } & > * { width: 1.5rem; height: 1.5rem; fill: currentColor; } `; const HighContrastToggle = styled(ThemeToggle)` right: 2.5rem; `; createRoot(document.getElementById('root')!).render( , ); ```

Note for reviewers: If you're testing this locally, it probably should be done in a separate clone of the repo, because it is so different from the v3 codebase.

Docs

Changeset added.

iTwin / iTwinUI