Darkmode

These configuration settings allow designers to enable dark mode for a website when required by the UI specifications.

The dark mode option can be found under the Tenant Settings section. Click the Manage link, as illustrated in the image.

The DarkMode Configuration Window will appear, as shown in the image below. 

The “Enable Darkmode” option is used to enable or disable Darkmode. The “Manage Excluded Styles” section is activated when the Darkmode option is enabled.

If certain elements on the website, such as images or logos, need to be excluded from dark mode, they can be specified in the Excluded Element field below.

Excluded Element: The excluded elements can be classes, IDs, or tags. Classes should be prefixed with a “.”, and IDs should be prefixed with a “#”. 

Add: This button is used to add an excluded element to the grid. 

Clear: The Clear button is used to reset the Excluded Element field. 

Search: This field allows you to filter excluded elements from the grid. 

The grid includes Edit and Delete icons, as shown in the image below.

Click the Edit icon next to the excluded element you want to modify. The selected element will be displayed in the Excluded Element fields. Make the necessary changes and click the Update button.

Once updated, the modified excluded element will appear in the grid, as shown in the image below.

Close – The Close button is used to close the Darkmode Configuration window. 

When Darkmode is enabled, the Darkmode icon will appear on the Web Part, as shown in the image below.

Clicking the Darkmode icon will switch the webpart to Darkmode, as shown in the image below.