Vue 3 Datepickerにてcss設定をする方法

Vue 3 Datepickerとは

Vue3(Nuxt3)用の日付ピッカーのライブラリです。
機能が充実しており、基本的なことは全てこなしてくれます!
詳しくはドキュメントを読んでください。

Vue 3 Datepickerにてcss設定をする方法

ドキュメントの最後にThemeにてCSSを適用する方法が記載されていましたが、躓いてしまったので共有です!
(Nuxt3を使用していますが、Vue3も同様かと思います。)

失敗例

公式ドキュメントを例に一旦書いてみようと思い、以下のようにしました。

<template>
    <div>
        <Datepicker v-model="date" class="dp__theme_dark" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

<style>
.dp__theme_dark {
    --dp-background-color: green;
    --dp-text-color: #fff;
    --dp-hover-color: #484848;
    --dp-hover-text-color: #fff;
    --dp-hover-icon-color: #959595;
    --dp-primary-color: red;
    --dp-primary-disabled-color: #61a8ea;
    --dp-primary-text-color: #fff;
    --dp-secondary-color: yellow;
    --dp-border-color: #2d2d2d;
    --dp-menu-border-color: red;
    --dp-border-color-hover: #aaaeb7;
    --dp-disabled-color: #737373;
    --dp-disabled-color-text: #d0d0d0;
    --dp-scroll-bar-background: #212121;
    --dp-scroll-bar-color: #484848;
    --dp-success-color: blue;
    --dp-success-color-disabled: #428f59;
    --dp-icon-color: #959595;
    --dp-danger-color: #e53935;
    --dp-marker-color: #e53935;
    --dp-tooltip-color: #3e3e3e;
}
</style>

<style>にcssを記述してclassにて使用する形にしました。
しかし、この方法ではピッカーにスタイルが設定されませんでした。

成功例

同じ失敗をしている方が居たので解決できました。
修正点としてclass=""でcssの設定をしないようにします。

<template>
    <div>
        <Datepicker v-model="date" dark />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

<style>
.dp__theme_dark {
    --dp-background-color: green;
    --dp-text-color: #fff;
    --dp-hover-color: #484848;
    --dp-hover-text-color: #fff;
    --dp-hover-icon-color: #959595;
    --dp-primary-color: red;
    --dp-primary-disabled-color: #61a8ea;
    --dp-primary-text-color: #fff;
    --dp-secondary-color: yellow;
    --dp-border-color: #2d2d2d;
    --dp-menu-border-color: red;
    --dp-border-color-hover: #aaaeb7;
    --dp-disabled-color: #737373;
    --dp-disabled-color-text: #d0d0d0;
    --dp-scroll-bar-background: #212121;
    --dp-scroll-bar-color: #484848;
    --dp-success-color: blue;
    --dp-success-color-disabled: #428f59;
    --dp-icon-color: #959595;
    --dp-danger-color: #e53935;
    --dp-marker-color: #e53935;
    --dp-tooltip-color: #3e3e3e;
}
</style>

元々Datepickerには.dp__theme_lightと.dp__theme_darkが定義されていたので、
オーバーライドする形で書いてあげれば適用されます。
(デフォルトでは.dp__theme_lightとなっておりdarkを設定すると.dp__theme_darkに切り替わります。)

個人的失敗例

個人的な失敗例も共有しておきます。
以下のようにスコープ付きcssを使用するとオーバーライドされないので失敗します。

<template>
    <div>
        <Datepicker v-model="date" dark />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

<style scoped>
.dp__theme_dark {
    // 省略
}
</style>

最後に

以上がVue 3 Datepickerにてcss設定をする方法でした。
開発のお役に立てれば幸いです。
@morikeigo_