Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added dark theme to example #2242

Merged
merged 7 commits into from
Jul 11, 2024
Merged

feat: added dark theme to example #2242

merged 7 commits into from
Jul 11, 2024

Conversation

alduzy
Copy link
Member

@alduzy alduzy commented Jul 9, 2024

Description

This PR adds dark theme to the example app. The theme changes automatically based on the device's appearance setting and can be changed by clicking a button.

Changes

  • added dark styles to screens and components
  • added a state and listener for basic theme management
  • added a dark mode button

Screenshots / GIFs

Screen.Recording.2024-07-09.at.17.01.37.mov
Screen.Recording.2024-07-09.at.17.55.02.mov

Test code and steps to reproduce

  • Use the Example app
  • Toggle the theme with a button or by changing device's setting
  • Browse screens

Checklist

  • Included code example that can be used to test this change
  • Ensured that CI passes

Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks solid. I haven't played out around with the app itself yet.

My only suggestion for now, seeing the repetition in the Text / View components would be to create some wrappers such as ThemedText / ThemedView that would use value from context and adjust the style internally. Using HOC is also reasonable here. This way we could avoid much of the repetition.

@alduzy alduzy requested a review from kkafar July 10, 2024 14:49
Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks solid 💪🏻

@alduzy alduzy merged commit c2ac40f into main Jul 11, 2024
1 check passed
@alduzy alduzy deleted the @alduzy/example-dark-mode branch July 11, 2024 08:23
ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this pull request Oct 9, 2024
## Description

This PR adds dark theme to the example app. The theme changes
automatically based on the device's appearance setting and can be
changed by clicking a button.

## Changes

- added dark styles to screens and components
- added a state and listener for basic theme management
- added a dark mode button

## Screenshots / GIFs


https://github.com/software-mansion/react-native-screens/assets/91994767/c156eaa7-7603-4f92-b1a2-5599e33ecc3f


https://github.com/software-mansion/react-native-screens/assets/91994767/5e479905-b046-4ea4-bfc1-1667837eee60

## Test code and steps to reproduce

- Use the Example app
- Toggle the theme with a button or by changing device's setting
- Browse screens

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants