hubs icon indicating copy to clipboard operation
hubs copied to clipboard

Fix and unify theme retrieval

Open brianpeiris opened this issue 3 years ago • 0 comments

This builds on top of #4332 and unifies theme retrieval and theme switching into helpers that live in src/utils/theme.js. Tested this in local dev and against a remote hubs cloud instance.

  • Adds an onThemeChanged helper that listens to both hubs preference changes and browser/system dark mode changes
    • This helper returns a cleanup function that can be called to remove the event listener
  • Adds a getThemeColor helper which can retrieve a single color.
  • Adds a registerDarkModeQuery helper which takes a listener, and returns the dark mode query, and a function to remove the listener.
  • Moves a bunch of config and theme related logic from src/react-components/styles/theme.js to src/utils/theme.js, for reuse
  • Moves the themes array export from src/react-components/styles/theme.js to src/utils/theme.js, so that it can be used more broadly
  • Updates sprites.js, avatar-preview.js, and pin-networked-object-button.js to use the new onThemeChanged helper, so that they update immediately when dark mode is changed at the browser or system level, in addition to theme preference changes.
  • Add an eslint exception to ignore destructured variables that begin with "_"

brianpeiris avatar Aug 10 '22 02:08 brianpeiris