10 minutes | Paragon Dark Mode | @Gabriel Weinberg | We’re discussing dark mode as a feature within the edX.org instance of the LMS, and I suggested that we first explore this as a design system tokens project.
Is there anything in addition to runtime theming that saves engineering time if we were to use Paragon as a platform to implement dark mode in the LMS?
What is needed on the design tokens project, engineering, design and accessiblity, to enable dark mode?
Does that feel like a large scope engineering effort? Open to discussion and feedback! Notes and feedback from the team: Some components have opt in prop for “dark” but would be a CSS variable instead Design tokens has a concept of variant for light and dark and is baked into the architecture of the tokens project. Its not just light and dark, but also enables things like high contrast mode Is it on a component by component basis? some of them have a dark variant Starts with system preference, and the user can change the preference in the application, and that gets stored locally Design is a heavier lift because we ouwld need to look at styles and components and make decisions about colors and backgrounds with respect to contrast and other a11y principles and brand, and Figma library to support dark and light on design On the eng side, take what comes out of design and creating tokens out of those variants From the 2U side, we would want to make sure that the values we choose also are compatible with the default theme Dark mode is a high level user preference through an operating system, and specific mode are usually under an accessibility feature set (high contrast mode) test dark with high contrast in addition to standard mode. there is an OS-level inversion as well. Stay aware of OS and browser preferences There are areas of the platform such as instructor dashboard that are not MFEs and cannot consume Paragon dark mode or design tokens Some xblocks may or may not consume Paragon LTI integrations may not support dark mode inherently Thorough testing in the LMS is needed Learning MFE might have a lot of exceptions that will not easily consume dark mode bc of xblocks and LTIs, learner dash might be a lower lift
|