Zenn
🎨

Vueで日付によってテーマを変える

2020/11/28に公開
Vue.js
Vuetify
tech

はじめに

ハロウィンの日になるとGithubはハロウィンのテーマに変わりますよね。

そんな感じで特定の日付になったらテーマが変わる機能をVue, Vuetifyで作ろうと思います。

環境

"vue": "^2.6.12",
"vuetify": "^2.2.11"

テーマを用意する

まず、何もない日に使うデフォルトのテーマとイベントのある日に使うテーマを用意します。
※vuetify.jsと同じディレクトリにthemes.jsを作成してます。

themes.js
import { colors } from 'vuetify/lib';

const defaultTheme = {
    primary: colors.purple,
    secondary: colors.grey.darken1,
    accent: colors.shades.black,
}

const events = [
    {
        eventName: "Xmas",
        timeStamp: "2020-12-25",
        colors: {
            primary: '#33743B',
            secondary: '#C92629',
            accent: '#9F863F',
        }
    },
    {
        eventName: "Halloween",
        timeStamp: '2020-10-31',
        colors: {
            primary: '#000000',
            secondary: '#FF6600',
            accent: '#FFBB00',
        }
    },
]

テーマを返す関数を作成

テーマが用意出来たら日付からテーマを返す関数を作成します。
テーマを書いたファイルに追加していきます。

日付の一致するイベントを取得して、イベントがあればそのテーマを返し、無ければデフォルトのテーマを返しています。

themes.js
export function getThemeByEvent() {
    const today = new Date();
    const todaysEvent = events.find((event) => {
        const eventDay = new Date(event.timeStamp);
        return eventDay.getMonth() === today.getMonth()
            && eventDay.getDate() === today.getDate();
    });
    if(todaysEvent) {
        return todaysEvent.colors;
    }
    return defaultTheme;
}

作成した関数を利用

作成した関数をvuetify.jsで利用します。

vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { getThemeByEvent } from './themes.js';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
      dark: false,
    themes: {
      light: getThemeByEvent(),
    }
  }
});

おわりに

以上です。
vuetifyはvue3ではまだ使えませんが、2020年末までにはvue3に対応したvuetify3アルファ版が、2021年の夏頃には正式版が公開される予定みたいですね。

Discussion