diff --git a/apps/fluent-tester/src/theme/CustomThemes.ts b/apps/fluent-tester/src/theme/CustomThemes.ts index 4d681a4520a..0cb8082dfb7 100644 --- a/apps/fluent-tester/src/theme/CustomThemes.ts +++ b/apps/fluent-tester/src/theme/CustomThemes.ts @@ -45,7 +45,7 @@ export class TesterThemeReference extends ThemeReference { constructor() { super( baseTheme, - (parent) => applyTheme(parent, this._themeName, this.options.appearance), + () => applyTheme(this._themeName, this.options.appearance), (parent) => applyBrand(parent, this._brand), ); this.baseTheme = baseTheme; diff --git a/apps/fluent-tester/src/theme/applyTheme.ts b/apps/fluent-tester/src/theme/applyTheme.ts index 16066403798..9ebd1f6b1e5 100644 --- a/apps/fluent-tester/src/theme/applyTheme.ts +++ b/apps/fluent-tester/src/theme/applyTheme.ts @@ -1,63 +1,20 @@ -import type { PartialTheme, Theme, ThemeOptions } from '@fluentui-react-native/framework'; +import type { PartialTheme, ThemeOptions } from '@fluentui-react-native/framework'; import { createOfficeTheme, getThemingModule } from '@fluentui-react-native/win32-theme'; -export type ThemeNames = 'Default' | 'Office' | 'Caterpillar' | 'Apple'; +export type ThemeNames = 'Default' | 'Office' | 'Apple'; export const themeChoices = [ { label: 'Default', value: 'Default' }, { label: 'Office', value: 'Office' }, - { label: 'Caterpillar', value: 'Caterpillar' }, ]; -function applyCaterpillarTheme(parent: Theme): PartialTheme { - return parent.host?.appearance === 'dark' - ? { - colors: { - buttonBackground: '#111111', - buttonBackgroundHovered: '#ffcd11', - buttonBackgroundPressed: '#eeeeee', - buttonText: '#ffffff', - buttonTextPressed: '#111111', - buttonTextHovered: '#000000', - }, - components: { - Button: { - borderWidth: 0, - tokens: { - borderWidth: 0, - }, - }, - }, - } - : { - colors: { - buttonBackground: '#ffcd11', - buttonBackgroundHovered: '#111111', - buttonBackgroundPressed: '#eeeeee', - buttonText: '#000000', - buttonTextPressed: '#111111', - buttonTextHovered: '#ffffff', - }, - components: { - Button: { - borderWidth: 0, - tokens: { - borderWidth: 0, - }, - }, - }, - }; -} - const themingModule = getThemingModule()[0]; /** apply the currently active theme layering */ -export function applyTheme(parent: Theme, name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme { +export function applyTheme(name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme { switch (name) { case 'Office': return themingModule ? createOfficeTheme({ appearance, paletteName: 'Dialogs_FluentSV' }).theme : {}; - case 'Caterpillar': - return applyCaterpillarTheme(parent); default: return {}; } diff --git a/change/@fluentui-react-native-tester-0444468e-02e4-4977-8f7a-8c302e46282a.json b/change/@fluentui-react-native-tester-0444468e-02e4-4977-8f7a-8c302e46282a.json new file mode 100644 index 00000000000..3c9bd8c245c --- /dev/null +++ b/change/@fluentui-react-native-tester-0444468e-02e4-4977-8f7a-8c302e46282a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "remove caterpillar theme", + "packageName": "@fluentui-react-native/tester", + "email": "gulnazsayed@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/docs/pages/Theming/CustomTheme.md b/docs/pages/Theming/CustomTheme.md index 2d76e123a10..f18398ee8c8 100644 --- a/docs/pages/Theming/CustomTheme.md +++ b/docs/pages/Theming/CustomTheme.md @@ -33,8 +33,6 @@ const theme = new ThemeReference(createDefaultTheme(), ``` -A good example of a custom theme from our repo is [the Caterpillar theme in the Tester App](../../../apps/fluent-tester/src/theme/applyTheme.ts). - ### `ThemeReference` from scratch You can create your own `ThemeReference` and pass it into the `ThemeProvider`. To create a `ThemeReference` you'll need to create a new instance of `ThemeReference`. You can find the type definition [here](../../../packages/framework/theme/src/themeReference.ts).