Some even provide additional options for scheduling when to enable dark mode - usually dependent on the time of the day.Īlso, we now have browsers providing browser-level color scheme settings either as a built-in feature, via a browser extension, or via some preference simulator. Most devices these days (smartphones, tablets, laptops, etc) provide a setting for enabling the dark mode color scheme at a system-wide level. This way you’ll have your own “toolbox”, a collection of reusable and themeable UI components to use in your future apps. When you start building your own themeable UI components, make sure to publish them yourself to Bit.dev. You can use cloud component hubs like Bit.dev to explore components from different component libraries. I recommend you learn it by looking at others' design systems. This post will not focus on building a design system or a UI library that enables theming. Depending on the app requirement, it is possible to use a combination that involves both inheriting the user’s preferred color scheme set on the device and allowing the user to manually override the app’s theme at any time, via some preferences.React Native 0.62, on the other hand, ships with the Appearance API and the useColorScheme hook for the same purpose. For React applications running on the web, CSS media queries alongside the window.matchMedia API can be leveraged for detecting and observing changes to the user’s preferred color scheme.Hence the need to detect and stay in sync with the user’s preferred color scheme on the device. Simply letting the user toggle between light and dark modes via a simple switch can be counter-intuitive, especially when the user has a preferred color scheme already configured on the device or browser.Building apps with dark mode theming has become pretty common these days, hence it makes sense to understand some of the major ingredients needed to implement it - themes, switch, and context.The reasoning behind this is somewhat straightforward - viewing the content in dark mode is not just easier on the eyes but also conserves device battery, as expressed by this Popular Science article. Most of the popular applications, and even devices, have rolled out releases that feature a dark mode ( night mode) color scheme.ĭark mode emphasizes the use of light-colored text and elements on a dark background - while maintaining good contrast. Following the trend these last couple of years, you can agree that dark mode design is gradually becoming a thing.
0 Comments
Leave a Reply. |