uiPress version 3 offers an integrated system for applying styles to blocks in dark mode, specific states or app states such as when the admin menu is collapsed.

Dark mode

All uiPress blocks by default will support dark mode, however if you want to make specific changes for a block in dark mode you can easily use the colour mode switcher.

Navigate to the block you want to style and select the styles tab. Next to each style sub heading you will see a sun icon. Clicking this will toggle the style into dark mode editing, now when you make changes it will only apply to dark mode. Toggle back to default (light mode) by clicking the icon again.

Pseudos and app states

To add styles to block’s Pseudo or for app states you can follow the same steps as for dark mode but click the dropdown next to the style category header.

This will reveal the states list, here you can select which state you would like to target. If you would like to apply certain styles for when the admin menu is collapsed for example you can select the ‘Menu collapsed’ option. Now whatever changes you make to the style section will only apply when the admin menu is collapsed.