😈 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/bulma-dracula@1.0.0/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 🇮🇩