feat: add dark mode
Description
Adds dark mode support to design.gitlab.com by toggling gl-dark class on root <html> element.
Note: control to toggle color mode and store current selected mode is not in-scope for this change. This introduces the initial design token usage to allow us to iterate on content (i.e. images) before publicly exposing dark mode.
Local validation
- Pull down branch or view review app
- Add
gl-darkclass to root<html>element- See screenshot below for DevTools, or
- Add bookmarklet
javascript:(function() { document.documentElement.classList.toggle('gl-dark'); })();
- Note sidebar link states
:hover,:focus,:active - Note sidebar logo states
:hover,:focus,:active - Note component overview cards
/components/overview - Note admonition styles
/product-foundations/design-tokens-using
Screenshots
Edited by Scott de Jonge