GeekyAnts / GeekyAnts/NativeBase

Icon inside IconButton ignores dark mode setting from default theme

Open
#5,709 0 comments 2 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

The Icon inside an IconButton should have its properties changed when toggled to dark mode, according to '_dark' pseudo props defined in the IconButton default theme

### CodeSandbox/Snack link

https://snack.expo.dev/@rogerlga/nativebase-iconbutton-issue

### Steps to reproduce

1. Open the Snack link provided
2. Click on the top icon (IconButton)
3. Unlike other elements in the screen (including the bottom icon, that is a plain Icon), the top icon (IconButton) doesn't change its color. The icon color should change to 'muted.50', as coded in the IconButton default theme.

Note that if `_dark={{ _icon: { color: 'muted.50' } }}` in line 17 is uncommented, the code works as expected, but it should behave this way without this piece of code, as it is exactly what is coded in the IconButton default theme (variant 'unstyled' in the example, but the same issue occurs for the other variants).

### NativeBase Version

3.4.28

### Platform

- [X] Android
- [ ] CRA
- [X] Expo
- [X] iOS
- [X] Next

### Other Platform

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.