Vueはcss変数を使ってテーマ色を変更します.

Vueはcss変数を使ってテーマ色を変更します.

Vue css変数を使ってテーマ色を変更します.

css変数の使い方

.Vueでcss変数

を使用する.
Vueはcss変数を使ってテーマ色を変更します.
css変数を使ってテーマ色を変更します.一般的にいくつかのテーマ色をユーザーが選択するために提供したり、直接にピック&プレイスを使ってユーザーに好きな色を選択させたりします.
css変数の使い方
カスタム属性を宣言します.属性名は2つのマイナス記号(–)で始まります.属性値は任意の効果的なCSS値です.他の属性と同様に、カスタム属性もルールセット内に書かれています.

element {
     
  --main-bg-color: #000;
}

なお、規則セットで指定されたセレクタは、カスタム属性の可視作用領域を定義しています.通常の最適な実践はルート疑似クラスで定義されています.このようにしてHTMLドキュメントのどこにでもアクセスできます.

:root {
     
  --main-bg-color: brown;
}

前に述べたように、ローカル変数を使用する場合は、var()関数で包んで、合法的な属性値を表します.

element {
     
  background-color: var(--main-bg-color);
}

Vueでcss変数を使う
まずdataでスタイルオブジェクトを定義します.

 data() {
     
    return {
     
      styleObj: {
     
        '--themeColor': this.attr.customProps.themeColor.value
      },
    }
}

templateでスタイルをバインドする

<template>
  <div id="tabsCourseList" class="tabs-course-list" 				  :style="styleObj">div>
template>

色の変化は変数に値を割り当てるだけでいいです.ここはpropsですので、ウォッチを使って監督してみました.

watch: {
     
    'attr.customProps.themeColor.value': {
     
      handler: function(val, oldval) {
     
        console.log(val)
        this.styleObj['--themeColor'] = val
      },
      deep: true
    }

  },

cssでこの変数を使えばいいです.

.li-head{
     
    background-color: var(--themeColor);
  }

以上で、css変数でテーマ色を変更できます.