🍕
Quasarで色の設定をしてみました

2024/10/26に公開
Nuxt
Vue.js
quasar
tech
 環境
nuxt3
quasar導入ずみ
Nuxt3 × Quasar



 1. 使える色

自分で設定するサイトの主な色たち

ブランドカラー
sassの変数に設定しますquasar-variables.sass
// ブランドカラーの設定
$primary   : #26A69A
$secondary : #26A69A
$accent    : #9C27B0
$dark      : #1D1D1D    
$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037
Quasarのコンポーネントはこれを参照するようになっているので、これを設定しておけばなんかいい感じにはなるみたいです

layoutをさくっと作って、コピペしてみたところ、ヘッダーの色はprimaryになっていました





Quasarで用意されている色たち

[カラーリスト]https://quasar.dev/style/color-palette#color-list
19色×14段階の266色あります〜


自分で定義した色

Adding Your Own Colors
ブランドカラーの指定じゃ足りない場合などに便利です
ボタンの背景のprimaryと文字色のprimaryなど部品によって変わりそうだったので、自分で定義した色が簡単に使えるのは助かります

以下のcssを読み込ませるだけです
(要望)ブランドカラーの方はsassでの変数定義なので、こちらもsassで定義できると最高ですね、、、cssだから変数として使えないし。ファイルも別々になりますし。
.text-dorayaki {
    color: #f9e894 !important;
}
.bg-dorayaki {
    background: #7f6011 !important;
}
グローバルに読み込めるようにしておきます
quasar関連のcss読み込み用ファイル
assets/styles/quasar.sass
...略...
// color.cssの読み込み
@import 'color.css'
nuxt.configで読み込み
nuxt.config
export default defineNuxtConfig({
    ...略...
    css: [
      // Quasarに必要なCSSを読み込むsassファイルを読み込む
      "~/assets/styles/quasar.sass",
    ],
})



 2. 使い方
クラス名で指定します
文字色ならtext-、背景色ならbg-をプレフィックスにして色をクラス名に指定します
わざわざstyle=coler...とかやらなくていいので楽です<h3 class="text-primary">
  文字色指定
</h3>
<h3 class="bg-primary">
  背景色指定
</h3>
<h3 class="text-lime-7 bg-grey-6">
  Quasarの色でも〜
</h3>
<h3 class="text-dorayaki bg-dorayaki">
  自分で設定した色でも〜
</h3>

scssの変数として呼び出します
普通にできます
<template>
    <h3 class="text-set">
      文字色指定
    </h3>
    <h3 class="bg-set">
      背景色指定
    </h3>
  </template>
  <script>
  </script>
  <style scoped lang="scss">
  .text-set {
    color: $info;
  }
  .bg-set {
    background-color: $pink-4;
  }
  </style>


 おまけ: Theme Builder
Theme Builder
GUIでブランドカラーを決めることができて便利です！！

exportしたコードをコピペして利用することができます
sass,scss,Quaser CLI,Vue CLI の形式でexportできます
quasar-variables.sass
$primary   : #be84e8
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1d1d1d
$dark-page : #121212

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037
環境

1. 使える色

2. 使い方

おまけ: Theme Builder

Discussion
