Skip to main content Link Menu Expand (external link) Left Arrow Right Arrow Document Search Copy Copied

Styling Modern Web Apps

In this section, we will learn how to style our SPA by applying a consistent theme throughout the user interface with support for light and dark mode. We will use the theme colors and guidelines defined in the McMaster Digital Brand Standards document as an example. The McMaster Digital Brand Standards PDF document provides a good overview of the brand guidelines designed to ensure recognition of the McMaster University brand and consistency of its message. The design guidelines presented in this section of the workshop were pulled from this PDF document and modified to apply to Material UI (MUI) components. We will also learn how to style a number of MUI components and modify their behavior to adhere to the McMaster Digital Brand Standards.

Pre-workshop Setup

If you have not done so already, please clone the wsr_web-design-guide repo using the following command:

git clone

Then, checkout the styling branch using the following command or using the IDE GUI:

git checkout styling

Workshop Recording

Table of contents