How to Remove Theme References from Your SPFx Web Part Code

In this article, we will walk through the steps to clean up your SharePoint Framework (SPFx) web part code by removing references to themes. This can be useful if you want to simplify your code or if theming is not required for your web part.

Step-by-Step Guide

1. Remove Theme Import

   First, remove the import statement for the theme interface.

   // Remove this line
   import { IReadonlyTheme } from '@microsoft/sp-component-base';

2. Remove Theme-Related Variables and Methods

   Remove the _isDarkTheme and _environmentMessage variables. Also, remove the onThemeChanged method.

3. Update the render Method

   Modify the render method to exclude theme-related properties.

   public render(): void {
       const element: React.ReactElement = React.createElement(
           MyFirstSpFxWebPart,
           {
               description: this.properties.description,
               hasTeamsContext: !!this.context.sdks.microsoftTeams,
               userDisplayName: this.context.pageContext.user.displayName
           }
       );
   
       ReactDom.render(element, this.domElement);
   }

4. Simplify the onInit Method

   Update the onInit method to remove theme-related logic.

   protected onInit(): Promise {
       return Promise.resolve();
   }

5. Remove the _getEnvironmentMessage Method

   If the _getEnvironmentMessage method is no longer needed, you can remove it entirely.

Example Code

Here is the complete updated code without theme references:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
    type IPropertyPaneConfiguration,
    PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'MyFirstSpFxWebPartWebPartStrings';
import MyFirstSpFxWebPart from './components/MyFirstSpFxWebPart';
import { IMyFirstSpFxWebPartProps } from './components/IMyFirstSpFxWebPartProps';

export interface IMyFirstSpFxWebPartWebPartProps {
    description: string;
}

export default class MyFirstSpFxWebPartWebPart extends BaseClientSideWebPart {

    public render(): void {
        const element: React.ReactElement = React.createElement(
            MyFirstSpFxWebPart,
            {
                description: this.properties.description,
                hasTeamsContext: !!this.context.sdks.microsoftTeams,
                userDisplayName: this.context.pageContext.user.displayName
            }
        );

        ReactDom.render(element, this.domElement);
    }

    protected onInit(): Promise {
        return Promise.resolve();
    }

    protected onDispose(): void {
        ReactDom.unmountComponentAtNode(this.domElement);
    }

    protected get dataVersion(): Version {
        return Version.parse('1.0');
    }

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
            pages: [
                {
                    header: {
                        description: strings.PropertyPaneDescription
                    },
                    groups: [
                        {
                            groupName: strings.BasicGroupName,
                            groupFields: [
                                PropertyPaneTextField('description', {
                                    label: strings.DescriptionFieldLabel
                                })
                            ]
                        }
                    ]
                }
            ]
        };
    }
}

Summary

By following these steps, you can effectively remove theme references from your SPFx web part code. This can help simplify your codebase and make it easier to maintain. The updated code provided above can be copied and pasted directly into your project.