Here we're adopting CSS custom properties (CSS variables) for building the design system and implementing a dark mode. Previously we used styled-theming for this, but I had trouble getting themed properties to appear correctly on the app's initial load. By moving to a CSS-native solution, we also get a straightforward dark mode implementation based on gatsby-plugin-dark-mode. Notes:
- Design tokens are now CSS custom properties in globalStyle.js. Colours are still interpolated from the design/color.js module in case we need to access colours from JavaScript.
- It's straightforward to theme icons embedded in JSX as <svg> elements since the fill property can take the value of a custom property. Background image icons in CSS are trickier. In one case we use a mask-image technique, in another case we had to create a specialized icon with a fixed colour.
- Added some styling (including an elevation system) for the search hit components and made those hits look better in dark mode.
- Did some initial work on fixing mobile issues in the responsive design; the logic in the media queries is still quite limited.
See https://github.com/lsst-sqre/www_lsst_io/pull/17 for screen shots.
Story
Here we're adopting CSS custom properties (CSS variables) for building the design system and implementing a dark mode. Previously we used styled-theming for this, but I had trouble getting themed properties to appear correctly on the app's initial load. By moving to a CSS-native solution, we also get a straightforward dark mode implementation based on gatsby-plugin-dark-mode. Notes:
See https://github.com/lsst-sqre/www_lsst_io/pull/17 for screen shots.