📅 最后修改于: 2023-12-03 15:13:41.116000 🧑 作者: Mango
Bootstrap 5 Auto Darkmode 5 is a CSS utility for adding automatic dark mode support to Bootstrap 5 websites. With this utility, you can easily change the color scheme of your website based on the user's preference or the time of day.
Bootstrap 5 Auto Darkmode 5 can be installed via NPM:
npm install bootstrap-auto-darkmode
You can also download the CSS file from the GitHub repository:
<link href="path/to/bootstrap-auto-darkmode.css" rel="stylesheet">
To use Bootstrap 5 Auto Darkmode 5, simply add the data-auto-darkmode attribute to the body tag of your HTML document:
<body data-auto-darkmode>
<!-- your website content here -->
</body>
This will enable the automatic dark mode feature. By default, the dark mode will be activated at night and deactivated during the day.
You can also customize the dark mode behavior by adding additional attributes to the body tag:
data-auto-darkmode-enabled - Set this attribute to true or false to enable or disable auto dark mode.data-auto-darkmode-dark - Set this attribute to a specific time of day (in 24-hour format) when dark mode should be enabled. For example, data-auto-darkmode-dark="18:00" will enable dark mode at 6pm.data-auto-darkmode-light - Set this attribute to a specific time of day (in 24-hour format) when light mode should be enabled. For example, data-auto-darkmode-light="6:00" will enable light mode at 6am.<body data-auto-darkmode data-auto-darkmode-enabled="true" data-auto-darkmode-dark="18:00" data-auto-darkmode-light="6:00">
<!-- your website content here -->
</body>
Bootstrap 5 Auto Darkmode 5 is a simple and effective solution for adding automatic dark mode support to your Bootstrap 5 websites. With just a few lines of code, you can improve the user experience and make your website more accessible to a wider audience.