😈 bulma-dracula

Bulma css with Dracula dark color themes

Homepage

https://mazipan.github.io/bulma-dracula/

Screenshoot

Usage

Install dependency:

$ yarn add bulma-dracula
# OR
$ npm i bulma-dracula

Import in your .scss files:

// this is already bundled with bulma.css
@import "~bulma-dracula/src/bulma-dracula.scss";

CDN on unpkg:

https://unpkg.com/[email protected]/dist/bulma-dracula.css

Change 1.0.0 with latest version or you can just hit https://unpkg.com/bulma-dracula

Override Variables

Bulma Dracula already bundled with Bulma CSS, that's why it can not be overriden. You can override with only use our SCSS variable definitions.

• Install Bulma and Bulma Dracula seperately:

$ yarn add bulma bulma-dracula
# OR
$ npm i bulma bulma-dracula

• Use Bulma Dracula variables:

@import "~bulma-dracula/src/bulma-dracula-vars.scss";
// You can override the default Bulma Dracula variables here
@import "~bulma/bulma";

Dracula Color Palette

This repo will override these variables https://bulma.io/documentation/customize/variables/ with below palletes:

Palette | Hex | RGB | HSL | --- | --- | --- | --- | Background | #282a36 | 40 42 54 | 231° 15% 18% | Current Line | #44475a | 68 71 90 | 232° 14% 31% | Selection | #44475a | 68 71 90 | 232° 14% 31% | Foreground | #f8f8f2 | 248 248 242 | 60° 30% 96% | Comment | #6272a4 | 98 114 164 | 225° 27% 51% | Cyan | #8be9fd | 139 233 253 | 191° 97% 77% | Green | #50fa7b | 80 250 123 | 135° 94% 65% | Orange | #ffb86c | 255 184 108 | 31° 100% 71% | Pink | #ff79c6 | 255 121 198 | 326° 100% 74% | Purple | #bd93f9 | 189 147 249 | 265° 89% 78% | Red | #ff5555 | 255 85 85 | 0° 100% 67% | Yellow | #f1fa8c | 241 250 140 | 65° 92% 76% |

Support me

• Via trakteer
• Direct support, send me an email

Copyright © 2019, Released under MIT license. By Irfan Maulana from 🇮🇩