Stylesheet and scripts for implementing dark mode with Bootstrap 4
Bootstrap Darkmode is a project that provides a stylesheet and two scripts that allow users to implement a dark theme on their website. It is loaded based on user preference and can be toggled via a switch. The theme is saved using localStorage. The project also includes a test page that showcases all default bootstrap components in both light and dark themes. For Angular users, there is a specific package called ng-bootstrap-darkmode.
To install Bootstrap Darkmode using npm, yarn, or PNPM, follow these steps:
npm install bootstrap-darkmode
@import 'bootstrap-darkmode';
Put the stylesheet link in the <head> section of your HTML.
Make sure to also include bootstrap.
Load the theme script as the first script inside the <body> tag.
If you prefer to build it yourself, follow these steps:
Clone the repo
Run npm build
Locate darktheme.css and theme.js in the dist/ directory
Follow the same steps as above for including the stylesheet and script, but use local paths for the files instead.
For users of ng-bootstrap-darkmode, there are specific setup instructions provided.
Bootstrap Darkmode is a project that enables the implementation of a dark theme on websites. It provides a stylesheet and scripts for loading and toggling the theme based on user preference. The theme is saved using localStorage. There are options for installation via npm or by building the project yourself. Additionally, there is a specific package available for Angular users called ng-bootstrap-darkmode. The project allows for customization of colors and behavior through SCSS variables and JavaScript functions.