All files / src/libs vuetify.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// region Dependency Injection
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import * as labsComponents from 'vuetify/labs/components'
import * as directives from 'vuetify/directives'
import {aliases, mdi} from 'vuetify/iconsets/mdi'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles';
import {md3} from 'vuetify/blueprints'
 
// endregion Dependency Injection
 
// region constants
// endregion constants
 
// region props
// endregion props
 
// region variable
// endregion variable
 
// region properties
const brandLight = {
  dark: false,
  colors: {
    background: '#F7F8FA',
    surface: '#FFFFFF',
    primary: '#111827',     // ほぼ黒：アクセントを“色”でなく“コントラスト”で表現
    secondary: '#6B7280',   // ミュートグレー
    info: '#2563EB',
    success: '#059669',
    warning: '#D97706',
    error: '#DC2626',
    'on-surface': '#0F172A',
  },
  // 必要に応じてCSS変数
  variables: {
    'border-radius-root': '14px',
  },
}
 
const brandDark = {
  dark: true,
  colors: {
    background: '#0F1115',
    surface: '#13161B',
    primary: '#E5E7EB',     // 明色
    secondary: '#9CA3AF',
    info: '#60A5FA',
    success: '#34D399',
    warning: '#F59E0B',
    error: '#F87171',
    'on-surface': '#E5E7EB',
  },
  variables: {
    'border-radius-root': '14px',
  },
}
 
// “Vuetifyっぽさ”を生む要素を標準でオフ/薄くするデフォルト
const blueprint = {
  ...md3,
  defaults: {
    global: { ripple: false, density: 'comfortable' },
 
    VAppBar: { elevation: 0, flat: true },
    VNavigationDrawer: { elevation: 0, rail: false },
    VFooter: { elevation: 0, absolute: false },
    VCard: { elevation: 0, rounded: 'xl', variant: 'flat' },
 
    // ボタンは"ゴースト"寄りに
    VBtn: { rounded: 'xl', elevation: 0, variant: 'text', class: 'btn-ghost' },
 
    // 入力系はシャドウ無し・枠弱め
    VTextField: { variant: 'outlined', hideDetails: 'auto', density: 'comfortable' },
    VSelect: { variant: 'outlined', hideDetails: 'auto', density: 'comfortable' },
    VTextarea: { variant: 'outlined', hideDetails: 'auto', density: 'comfortable' },
  },
}
 
const vuetify = createVuetify(
    {
        date: {
            formats: {
                dayOfMonth: (date: Date) => date.getDate(),
            },
        },
        components: {
            ...components,
            ...labsComponents,
        },
        directives,
      blueprint,
        icons: {
            defaultSet: "mdi",
            aliases,
            sets: {
                mdi,
            },
        },
        // theme: {
        //     defaultTheme: 'light'
        // },
      theme: {
        defaultTheme: 'brandLight',
        themes: { brandLight, brandDark },
      },
    }
);
 
// endregion properties
 
// region emits
// endregion emits
 
// region validator
// endregion validator
 
// region methods
// endregion methods
 
// region export
export default vuetify;
 
// endregion export