VueJS で JS 定義の名前を CSS 変数として使用するためのソリューション。
<p>各テーマカラーの CSS 変数 (--v-theme-primary など) を作成する Vuetify を使用しています。 CSS で色を --v-theme-{something} に設定し、{something} の値を JS から取得できるようにしたいと考えています。例: </p>
<pre class="brush:js;toolbar:false;"><テンプレート>
<div :class="$style['coloured-text']">Asd</div>
</テンプレート>
<script lang="ts" セットアップ>
const color = ref("プライマリ")
</スクリプト>
<style lang="scss" モジュール>
.coloured-text {
背景色: var(--v-theme-[[v-bind(color)]]);
}
</スタイル>
</pre>
<p> [[v-bind(color)]] は無効な構文です。デモンストレーションのために取り上げただけです。カラーがJSから取得されるCSSでvar(--v-theme-{color})を使用できるように、そこにカラーリファレンスからのカラー名または何かを配置できるようにしたいと考えています。この例では、var(--v-theme-primary) になります。 <br /><br />何かアイデアはありますか？このアプローチは実現可能でしょうか? </p>
