Description
Check existing issues
- I have checked for existing issues to avoid duplicates
Actual Behavior
When changing from light mode to dark mode (adding calcite-mode-dark class to <body>), the calcite-avatar component changes the text color, but not the background color.
The same things happens to when switching from dark mode to light mode.
This makes the text quite hard to read.
Expected Behavior
When changing from light mode to dark mode (adding calcite-mode-dark class to <body>), the calcite-avatar component changes the text color and the background color.
Reproduction Sample
https://codepen.io/CJoubert/pen/yyNqeJG
Reproduction Steps
- Have an avatar component
- Programmatically add/remove
calcite-mode-darkclass to/from the<body>element - Observe that the background color doesn't change
Reproduction Version
3.2
Relevant Info
The background color of the calcite-avatar component does change if you manually add calcite-mode-dark class to body (and refresh).
Regression?
No response
Priority impact
impact - p3 - not time sensitive
Impact
No big impact, but would be nice to get fixes at some point.
In ArcGIS urban we have the option to switch between light/dark mode, with this switch being shown very close to the avatar.
Calcite package
- @esri/calcite-components
- @esri/calcite-components-react
- @esri/calcite-design-tokens
- @esri/calcite-ui-icons
- @esri/eslint-plugin-calcite-components
Esri team
ArcGIS Urban