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 https://github.com/McMasterRS/wsr_web-design-guide.git
Then, checkout the styling branch using the following command or using the IDE GUI:
git checkout styling