Now Apple is forcing all apps in its app store to support dark mode. Also, most native Android apps already support the dark theme. Viewing a screen which white background when you enabled dark mode on your device will greatly harm the viewer's eyes.
Like lots of websites are made by bootstrap. So how can we get a solution with minimum changes and allows the website to support automatically dark theme switching?
Aiursoft website in white mode:
To detect if the current device is set to dark mode, there is a media query that can detect it easily.
@media (prefers-color-scheme: dark) {
/*Write your CSS here. Only in dark mode will it take effect*/
}
And to detect dark mode in JavaScript:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Only execute JavaScript here in dark mode.
}
To set the current browser color mode, it was differed by browsers.
Simply search the color mode in your browser settings will find it.
It also supports mobile browsers. For most mobile operating system also supports dark and light color mode.
To monitor dark mode status change, consider the following JavaScript:
var initDarkTheme = function () {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// The user switched to dark mode.
} else {
// The user switched to light mode.
}
}
initDarkTheme();
window.matchMedia('(prefers-color-scheme: dark)').addListener(initDarkTheme);
So, now we can detect if the dark mode enabled and when the user switches the mode, we just need to change some items' class:
var initDarkTheme = function () {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
$('.navbar-light').addClass('navbar-dark');
$('.navbar-light').removeClass('navbar-light');
$('body').addClass('bg-dark');
$('body').css('color', 'white');
$('.modal-content').addClass('bg-dark');
$('.modal-content').css('color', 'white');
$('.container-fluid').addClass('bg-dark');
$('.container-fluid').css('color', 'white');
$('.list-group-item').addClass('bg-dark');
$('.list-group-item').css('color', 'white');
$('.content-wrapper').addClass('bg-dark');
$('.card').addClass('bg-dark');
$('.bg-light').addClass('bg-dark');
$('.bg-light').removeClass('bg-light');
$('.bg-white').addClass('bg-dark');
$('.bg-white').removeClass('bg-white');
$('.bd-footer').addClass('bg-dark');
$('table').addClass('table-dark');
}
}
initDarkTheme();
window.matchMedia('(prefers-color-scheme: dark)').addListener(initDarkTheme);
But it is not enough. We need to change some styles for some elements like input.
@media (prefers-color-scheme: dark) {
.text-muted {
color: #8c959d!important;
}
.content-wrapper {
color: white!important;
}
.jumbotron {
background-color: rgb(30, 32, 36)!important;
}
.breadcrumb {
background-color: rgb(42, 43, 45)!important
}
pre {
background-color: #444!important;
color: #fff!important;
}
code {
background-color: #444!important;
color: #fff!important;
}
.form-control {
background-color: rgb(35, 36, 37)!important;
color: rgb(240, 234, 224)!important;
border-color: rgb(71, 79, 87)!important;
}
.navbar-dark {
box-shadow: 0 10px 39px -6px rgba(0, 0, 0, 0.3);
}
.custom-select {
color: white!important;
background-color: #495057!important;
}
}
The dark website:
The blog post discusses the importance of supporting dark mode in web applications, given the increasing number of devices and browsers that now support this feature. The author provides a solution to enable dark mode in websites built using the Bootstrap framework, with minimal changes required.
The core idea of the blog is to leverage media queries and JavaScript to detect the user's preferred color scheme and update the website's styling accordingly. The author demonstrates how to use the
@media (prefers-color-scheme: dark)media query to apply dark mode-specific CSS and thewindow.matchMediaJavaScript method to detect dark mode in the browser. They also provide a code snippet to monitor dark mode status changes, and another one to update the class names of various elements to apply the dark theme.The blog post's most significant strength is its practical approach to implementing dark mode in Bootstrap-based websites. The author provides clear and concise code examples, making it easy for readers to follow and apply the techniques to their projects.
However, there are a few areas where the blog post could be improved:
The author could provide more context on why supporting dark mode is crucial for modern web applications. They briefly mention that dark mode is becoming a standard in native Android apps and required by Apple's App Store, but additional information on the benefits of dark mode (e.g., reduced eye strain, improved battery life, etc.) would help strengthen the argument.
It would be helpful to include a brief introduction to the Bootstrap framework for readers who may not be familiar with it. This would provide more context for the code examples and techniques discussed in the blog post.
The code snippets provided could be better organized and formatted for improved readability. For example, the author could separate the CSS and JavaScript code into distinct sections and use consistent indentation and line breaks.
The blog post could benefit from a conclusion summarizing the key points and reiterating the importance of supporting dark mode in web applications.
Overall, the blog post offers a valuable solution for implementing dark mode in Bootstrap-based websites and provides useful code examples for readers to follow. With some minor improvements to organization and context, the blog post could be even more informative and helpful for readers looking to implement dark mode in their web applications.