Conversation
It's still a basic dark mode, but should do the trick for now.
xp4u1
left a comment
xp4u1
left a comment
There was a problem hiding this comment.
Great additions! At first glance, it looks really good.
We need to come up with some ideas. Here are some examples:
- The borders on the week view are to bright.
- I used a custom pastel color palette for the notifications (on the settings page). It looks quite off against the dark background, and the text color is set to white globally, which reduces the contrast.
I don’t have the option to test on mobile today. The reason I haven’t added dark mode yet is that the last time I implemented it on an Ionic/Capacitor app, it wasn’t a pleasant experience. Capacitor didn’t set the media attributes as expected (see Dark mode in Discite).
You should be able to build an apk. Just build with yarn build and use the Ionic CLI to open and run through Android Studio.
I will not merge this PR unless we test it properly on both mobile platforms. Unfortunately, dark mode is not a straightforward feature to implement.
src/App.tsx
Outdated
| new Promise(async () => { | ||
| try { | ||
| await StatusBar.setStyle({ style: Style.Light }); | ||
| await StatusBar.setBackgroundColor({ color: "#f1f3f4" }); | ||
| } catch { | ||
| // Ignore to supress errors while running the app in a browser. | ||
| } | ||
| }); | ||
|
|
There was a problem hiding this comment.
This is not unnecessary code. The status bar has to be updated based on the current theme.
| /* import '@ionic/react/css/palettes/dark.always.css'; */ | ||
| /* import '@ionic/react/css/palettes/dark.class.css'; */ | ||
| // import "@ionic/react/css/palettes/dark.system.css"; TODO: add dark mode | ||
| import "@ionic/react/css/palettes/dark.system.css"; |
There was a problem hiding this comment.
Ionic's system dark mode works really well in web browsers, but we need to optimize the experience for Capacitor (Android/iOS).
There was a problem hiding this comment.
I understand your concerns, i agree that the changes should work fine on all the platforms. I can test this pr on android but i don't own any apple device.
2 participants
This should do the trick for now. I set up the background color correctly and defined one for the background cards. I'm still concerned about the usability of light mode (wrt the contrast, which is not the best imho).
I'd ask someone to check the mobile version of this commits or to provide build instruction as i was unable to build an APK from this project.
Closes #7