bulma-darkify
Advanced tools
Add a touch of darkness to your Bulma-powered websites. This project allows you to embrace the dark side of web design while maintaining the sleekness of Bulma's UI framework. Say goodbye to bright lights and welcome the relaxing warmth of dark mode.
[data-theme] attribute.pnpm add -D bulma-darkify
or
npm install bulma-darkify --save-dev
or
yarn add -D bulma-darkify
Include the provided SCSS file into your existing SASS/SCSS file:
@import "bulma/bulma";
// Import your own dark mode variables
@import "your-dark-mode-variables";
@import "bulma-darkify/bulma-darkify";
Include only the SCSS files that you need:
// Import the relevant Bulma files before importing from bulma-darkify
@import "bulma/sass/utilities/_all";
@import "bulma/sass/elements/button";
// Import your own dark mode variables
@import "your-dark-mode-variables";
// Import from bulma-darkify
@import "bulma-darkify/scss/utilities/_all";
@include color-mode(dark) {
@import "bulma-darkify/scss/elements/button";
}
To use the dark mode, add the data-theme attribute to your HTML tag. For example:
<html lang="en" data-theme="dark">
</html>
To toggle between themes, simply change this attribute to light:
<html lang="en" data-theme="light">
</html>
This library does not come with predefined styles for dark mode. This means that you will need to define how you want the dark mode styles to appear. To do this, follow Bulma's guide on customization using SASS variables: https://bulma.io/documentation/customize/variables/.
Then, append your style names with -dark.
For example, to change a button's default background color in light mode, you would normally define a variable like:
$button-background-color: #YOUR-COLOR-HERE
For dark mode, you can change the button's background color by simply adding -dark to this variable name:
$button-background-color-dark: #YOUR-COLOR-HERE
Contributions from the community are welcomed! If you encounter a bug, have a feature request, or want to enhance this library, please open a pull request
This project is under the MIT license. Feel free to use, modify, and distribute it as you please.
FAQs
Your Bulma project, now with customizable dark-mode support.
We found that bulma-darkify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.