くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Bulmaのカラーテーマ「bulmaswatch」をBuefyで使ってみる

普段Bulmaを使っているけど、カラーテーマないかなと思ってたら、
Bulmaswatchというのを見つけたのでその備忘録。

インストール

まずは、bulmaswatchをインストール

$ npm install bulmaswatch

cssに組み込む

BuefyのCustomizationに従い、SCSSを用意。
そこに、bulmaswatchで使いたいテーマをimportする形。

今回は、Ceruleanというテーマの例

// ~/assets/buefy.scss

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Import Bulma and Bulmaswatch styles
@import "~bulmaswatch/cerulean/variables.scss";
@import "~bulma";
@import "~bulmaswatch/cerulean/overrides.scss";

// Import Buefy styles
@import "~buefy/src/scss/buefy";

以上!! 簡単(´ω`)

参考にしたサイト様