简单自定义主题 Bulma CSS框架 + Buefy Vue 框架

前言

机缘巧合之下，接触到了一个使用Buefy构建的项目。
在尝试途中发现Bulma的文档真的强大，
让之前没有接触过SCSS的我能轻易的自定义主题。

Bulma是一套文档齐全的CSS框架
Buefy是基于Bulma构建的Vue框架

这篇文章主要说一下自己对于bulma简短的使用经验

效果图：

原来样式：

整体来说实现了底色半透明，文字颜色转变，hover效果改变等
基本上没动过Vue的组件，通过修改变量文档实现了主题修改

如何查找需要修改的变量？

以Button为例
https://bulma.io/documentation/elements/button/

文档最后基本都有变量部分，可以简单的修改变量来修改样式

修改的变量

$dark: rgb(10,10,10,0.8);
$primary: rgb(255,255,255,0.92);
$background: rgba(255,255,255,0.1);
$beige-light: rgba(0,0,0,0.8);
$beige-lighter: rgba(0,0,0,0.5);
$primary-invert: $dark;
$scheme-main: $dark;
$border: $background;

$grey: $primary;
$grey-dark: $primary;
$grey-darker: $primary;
$grey-light: $primary;

$text: $white-ter;
$text-light: $white-bis;
$text-strong: $white;

$link: $white-bis;
$link-hover: $white;

$navbar-background-color: $dark;

$button-background-color: transparent;
$button-text-hover-background-color: $background;

$menu-item-hover-background-color: $background;

$divider-color: $white-bis;
$divider-background-color: $white-ter;

$table-background-color: transparent;
$table-row-hover-background-color: $background;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

相关链结

Bulma: https://bulma.io/
buefy: https://buefy.org/

项目：https://github.com/lrzjason/buefy-souls

PS：我只是项目的参与者，项目并不是由我发起和构建的，目前beta阶段，最终网站应该也不是这个样子。