---
# System prepended metadata

title: Native Theming Discussion

---

# Native Theming Discussion

Notes from a quick followup discussion on native theming, what is done, what is missing, what needs to change.

## Native Modules

## Themes and Theme Providers

- how to attach custom info to our themes
- how to make it easy to convert - maybe our theme is a transport for your theme


```
// Layers this onto existing stuff
createRegistry(LPCThemeModule, 'LPC', invalidate)

LPC: { ... }
```

Questions:
- Do people actually create multiple themes
- Can we unify with fluent

```tsx
const myTheme = createTheme / loadTheme

<ThemeProvider theme={myTheme}>
```

```
.. ThemingModuleHelper.getPlatformThemeDefinition();

<ThemeProvider registry={...} theme={...} />
```

Proposal: Themes as recipes

All themes are produced by
1. get parent theme
2. get partial via direct, or function, or native module invocation
3. merge parent & partial => full theme
4. repeat 1-3 indefinitely at any step

Make theme transformations arrays

```ts
registry.setTheme(name: string, ...defs: ()[])
```

-- Theme chaining

```ts
type ThemeRef = {
  child: (creationStuff)
  inner: Theme
}

const myTheme = createNativeTheme('TaskBar').child(doLPCMods())

const myTheme = createTheme(something).child(
  // load native module stuff
).child(
  // do some more
);

```

## Global Tokens, Alias Tokens, Component Tokens

## CSS Variable Approach

### Codemod - turn theme into keys

```ts
colors: {
 buttonBackground: string 
};
typography: {
}

type Keys = 'colors.buttonBackground' | `colors.buttonText` ...
```

### Reference theme values by key

Goal to write tokens like:

```ts

const Button = compose({
  tokens: [
    {
      backgroundColor: Var('componentValues.buttonBackground', Var('colors.neutral3', 'gray'))
    }
  ]
})
```

in enable css var mode

```ts
backgroundColor: `var(--componentValues-buttonBackground, var(--colors.neutral3, gray))`
```

in native or non-css mode

```ts
function Var(key: ThemeKeys, fallback): (theme: ITheme) => {
  
}
```

A theme might look like:

```ts
interface ITheme = {
  // these get specified
  colors: {
    neutral
    ...
  },
  // these are only specified for customization
  otherStuff: {
    buttonBackground?: 
  }
}
```

```
Theme                   Theme          ??
buttonRootFillRest -> NeutralFill -> Gray80 -> #F3f3f3
stable... ?             ?????         
```