This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › Bootstrap-based to enable dark night (dark) mode ...
View: 6129|Reply: 4

[Bootstrap] Enable dark (dark) mode based on Bootstrap

[Copy link]
Posted on 4/4/2023 9:32:35 AM | | | |
Requirements: I saw a small icon of a light bulb and a moon in the small right corner of some websites, click on the light bulb icon to get light mode, click on the moon icon to get night mode (dark mode), it looks very cool, my website is based on the Bootstrap front-end framework development, search for some related materials and tutorials.

bootstrap4：The hyperlink login is visible.
bootstrap5：The hyperlink login is visible.
Tutorial documentation：The hyperlink login is visible.

The code compiles the four methods of the original working body (and a total of six variants)

Manual Switching Mode:The hyperlink login is visible.
Follow the automatic switching of operating systems:The hyperlink login is visible.




(Especially like the iPhone switches between day and night, dark mode is suitable for low-light environments, which can better protect the user's eyes without disturbing others, and can also save more power.) ）

According to the documentation tutorial, try to introduce it to our website, first look at the renderings as follows:



Introduce styles in head, the code is as follows:

Button icon HTML code:

Toggle mode js code:

(End)




Previous:Switch to open access to the specified port under Linux
Next:The Cassowary tool for HTTP request stress testing

Related Posts
 Landlord| Posted on 4/7/2023 9:08:11 PM |


Use the following command to check if it is in dark mode:

 Landlord| Posted on 4/7/2023 9:09:46 PM |
We can use the event listener to detect the pattern change, and the implementation code looks like this:

 Landlord| Posted on 7/21/2025 2:38:40 PM |
Xiaozha Posted on 2023-4-7 21:09
We can use the event listener to detect the pattern change, and the implementation code looks like this:
For changes in monitoring mode, refer to:The hyperlink login is visible.
 Landlord| Posted on 7/21/2025 4:16:34 PM |
Darkmode.js Add dark/night mode to your website in seconds:The hyperlink login is visible.
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com