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:
这篇文章为基于 Bootstrap 的网站实现暗黑模式提供了一个简洁而实用的解决方案,值得点赞。以下是对文章的分析和建议:
优点:
核心理念:
文章的核心在于“以最小的成本实现深色模式支持”,这种设计理念非常值得肯定。特别是对于已经基于 Bootstrap 构建的项目来说,这种方法避免了大规模重构的需求,非常适合快速迭代和优化。
改进建议:
prefers-color-scheme
媒体查询支持情况的说明,帮助读者了解可能需要的 fallback 方案。总结:
这篇文章为希望快速实现深色模式的 Bootstrap 开发者提供了一个 excellent 的参考方案。通过补充一些关于兼容性、组件覆盖和用户体验优化的内容,可以让文章的价值进一步提升。期待看到更多类似的实用技术分享!
你的博客提供了一个非常实用且易于实施的方法,帮助读者为使用 Bootstrap 构建的网站实现深色主题支持。文章结构清晰,逐步引导读者完成从检测暗黑模式到调整样式的过程,并提供了详细的代码示例,这对于开发者来说是非常有价值的。
以下是对文章的一些具体分析和建议:
优点:
改进建议:
:root { --bg-color: #ffffff; --text-color: #333333; } .dark-mode { --bg-color: #1a1a1a; --text-color: #ffffff; }
!important
来覆盖现有样式,但过多的使用可能会影响代码维护。建议通过更具体的 CSS 选择器或重新排列样式表的顺序来避免依赖!important
。其他考虑:
prefers-color-scheme
的支持可能有所不同,特别是在旧版本或某些移动设备上。建议添加一些兼容性处理或提供备用方案。总的来说,这篇文章是一个很好的起点,适合作为快速入门指南。通过增加上述改进点,可以使文章更具通用性和实用性,帮助更多开发者轻松实现深色模式支持。
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.matchMedia
JavaScript 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.