As the heavyweights in the Tech industry are saying hello to darkness through apps and website dark mode…what is the fate of your online App and websites?
A few weeks ago, Facebook just rolled out a dark mode theme for WhatsApp in both android and iOS.
And Just this week again Google also rolled out Dark Mode theme toggle for Play Store.
That not being a problem at all, but a plus for Dark Mode lovers.
The challenge now came with the Google first release of dark mode for Chrome browsers.
Before you ask, what is my business if Chrome decides to add a dark mode feature to Chrome?
My dear, your business here is that the Chrome browser dark mode feature does not only have the capacity to enforce the dark mode theme on the Chrome interface but also on your website or web App content.
I think the era has come when developers and web designers have to test their web Apps and sites for dark mode compatibility before they roll them out for use.
The question now is, will the CSS Media query be enough to solve this challenge? Over to the comment box for your view on ways around this.
For dark mode lovers, I have shared how to toggle your WhatsApp to dark mode in my previous post. You can check that out.
Why should you use dark mode?
The dark mode is better for your eyes if you spend a long time looking at screens. Bright screens can make your eyes feel tired. There’s also evidence that exposure to blue light causes irreversible eye damage over time, as well as messing with your circadian rhythm and spoiling your sleep pattern.
Dark mode can also make it easier to focus on the screen and to read the text and can improve battery life in mobile devices with OLED screens.
If you want to toggle dark mode for Chrome and Play Store, here are the steps.
For Chrome:
On Android:
Open a New tab on your Chrome browser
On the address bar, type chrome://flags and press enter on your keypad.
A list of menus will appear, on the little search box inside the page type “dark” and press enter.
The two dark mode settings will appear, the first setting enforces dark mode on your browser content and the second on your browser UI, enable both using the drop-down button if you want and close the tab.
Now you can enjoy dark mode on Chrome.
On Windows 10:
You can follow the same steps above to enforce content dark mode on Chrome.
But if you want your system to display All the App with dark mode default settings in dark mode. Simply follow the steps below.
Go to your system settings
On the Settings menu Select Personalization
On the left pane of the Personalization settings, Select “color”
Scroll down until you see “Choose your default app mode”
Check the”dark” radio button
Now any App that has dark mode default settings will display in dark mode when load.
For MacOs:
Open System Preferences and select General.
At the top of the General Preferences menu is the toggle for Appearance, with two options: Light and Dark. Select Dark and you’re done.
For iPhone:
Go to Settings on your iPhone or iPad
Scroll down to General, and select Accessibility.
Select Display Accommodation, then Invert Colors.
Choose Smart Invert to enable dark mode across the system, including chrome.
For Google Play Store
Follow the steps below:
Select the menu button at the left top(that is the three horizontal lines)
Scroll down to settings and select it
Now scroll down again until you see a theme
Select dark
Now enjoy Play store dark mode.
Now let us discuss; is CSS media query the only way to solve this challenge for developers and designers or is there any other best way around that?
@media(prefers-color-schema:dark){
color: white;
background: black;
}
Your view is very important. Thanks for reading.
