VChatCloud 문서

# 커스터마이징

# 컴포넌트 변경

만약, VChatCloudApp 컴포넌트가 마음에 들지 않는 경우 VChatCloudApp안에 Custom Component를 사용하여 기존 컴포넌트를 대체할 수 있습니다. Custom Component에 필요한 내용은 useInject()라는 hook을 통해서 제공됩니다.

const {
  add,
  apiFileList,
  channel,
  inviteMessageList,
  messageHistoryList,
  translateClientKeyMap,
  vChatCloud,
  vChatCloudAppProps,
} = useInject();
1
2
3
4
5
6
7
8
9
10
<template>
  <VChatCloudApp
    ...
    >
    <MyComponent></MyComponent>
  </VChatCloudApp>
</template>
1
2
3
4
5
6
7

# 색상 변경

변경가능한 CSS 변수 목록은 아래와 같습니다.

CSS 변수 목록 
/* 기본모드 색상 */
:root {
  --invert-img: none;

  --toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
  --toaster-notify-background-color: #363940;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;

  --login-wrap-background-color: #c9c9f2;
  --login-logo-notice-color: #0a0a6b;
  --login-footer-color: #0a0a6b4c;

  --profile-wrap-box-shadow-color: rgba(201, 201, 201, 0.3);
  --profile-wrap-border-color: #f2f2f2;
  --profile-wrap-background-color: #fff;
  --profile-button-color: #aaa;
  --profile-button-hover-color: #aaa;
  --profile-profile-border-color: #eaeaea;
  --profile-profile-background-color: #fff;
  --profile-nick-name-input-border-color: #dddddd;
  --profile-nick-name-input-color: #aaa;
  --profile-nick-name-input-bg-color: #fff;
  --profile-nick-name-input-focus-border-color: #0033ab;
  --profile-login-button-background-color: #0a0a6b;
  --profile-login-button-color: #fff;

  --file-send-color-background: rgba(0, 0, 0, 0.15);
  --file-send-color-border: #fff;
  --file-send-color-text: #fff;
  --file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
  --file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);

  --header-color-background: #f2f2f2;
  --header-color-title: #000;
  --header-color-count: #999;
  --header-color-border: #ddd;

  --join-user-list-color-background: #fff;
  --join-user-list-color-border: #f2f2f2;
  --join-user-list-color-header-border: #ddd;
  --join-user-list-color-header-color: #000;
  --join-user-list-color-footer-background: #ddd;
  --join-user-list-color-footer: #000;
  --join-user-list-color-shadow: rgba(168, 168, 168, 0.3);

  --join-user-color-background: #f2f2f2;
  --join-user-color-profile-border: #f2f2f2;
  --join-user-color-title: #333;
  --join-user-translate-color: #999;

  --language-modal-color-background: #fff;
  --language-modal-color-border: #f2f2f2;
  --language-modal-color-header-border: #ddd;
  --language-modal-color-footer-background: #ddd;
  --language-modal-color-footer-text: #000;
  --language-modal-color-close-icon: rgba(168, 168, 168, 0.3);
  --language-modal-span-color: #000;

  --radio-group-color-border: #ddd;
  --radio-group-color-checked: #000;
  --radio-group-span-color: #000;
  --radio-group-radio-icon-bg-color: #fff;

  --checkbox-color-border: #ddd;
  --checkbox-color-background: #fff;

  --toggle-color-bar-background: #ddd;
  --toggle-color-bar-background-on: #c9ddff;
  --toggle-color-dot-background: #999;
  --toggle-color-dot-background-on: #2a61be;
  --toggle-color-label: #666;

  --invite-modal-color-background: #fff;
  --invite-modal-color-border: #f2f2f2;
  --invite-modal-color-input-border: #ddd;
  --invite-modal-color-input-text: #aaa;
  --invite-modal-color-input-background: #fff;
  --invite-modal-color-title: #333;
  --invite-modal-color-close-button-border: #0a0a6b;
  --invite-modal-color-close-button-text: #0a0a6b;
  --invite-modal-color-submit-button-border: #0a0a6b;
  --invite-modal-color-submit-button-background: #0a0a6b;
  --invite-modal-color-submit-button-text: #fff;
  --invite-modal-color-shadow: rgba(168, 168, 168, 0.3);

  --modal-color-background: #fff;
  --modal-color-border: #f2f2f2;
  --modal-color-title: #333;
  --modal-color-contents: #000;
  --modal-color-close-button-border: #0a0a6b;
  --modal-color-close-button-text: #0a0a6b;
  --modal-color-submit-button-border: #0a0a6b;
  --modal-color-submit-button-background: #0a0a6b;
  --modal-color-submit-button-text: #fff;
  --modal-color-shadow: rgba(168, 168, 168, 0.3);

  --file-drawer-wrap-box-shadow-color: rgba(168, 168, 168, 0.3);
  --file-drawer-wrap-border-color: #f2f2f2;
  --file-drawer-wrap-background-color: #fff;
  --file-drawer-header-border-bottom-color: #ddd;
  --file-drawer-title-color: #333;
  --file-drawer-tab-item-color: #666;
  --file-drawer-tab-item-focus-color: #000;
  --file-drawer-tab-item-focus-border-color: #000;
  --file-drawer-body-padding-color: #ddd;
  --file-drawer-footer-border-top-color: #ddd;
  --file-drawer-footer-select-count-color: #666;
  --file-drawer-footer-save-color: #000;
  --file-drawer-footer-image-opacity: 0.3;
  --file-drawer-footer-image-opacity-hover: 0.7;

  --preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
  --preview-popup-color-text-header: #ffffff;
  --preview-popup-color-bg-dim: #000000;

  --file-preview-wrap-border-color: #f2f2f2;
  --file-preview-wrap-background-color: #fff;
  --file-preview-wrap-focus-border-color: #4160b9;
  --file-preview-wrap-focus-background-color: #fff;
  --file-preview-selected-icon-color: #000;
  --file-preview-name-color: #000;
  --file-preview-expire-color: #999;
  --file-preview-size-color: #999;

  --image-preview-wrap-focus-border-color: #4160b9;
  --image-preview-selected-icon-color: #000;

  --video-preview-wrap-focus-border-color: #4160b9;
  --video-preview-wrap-focus-background-color: #fff;
  --video-preview-selected-icon-color: #000;

  --body-chat-contents-color: #000;
  --body-nickname-color: #000;
  --body-chat-bg-color: #fff;

  --chat-base-profile-border-color: #f2f2f2;
  --chat-base-profile-background-color: #aeaae2;
  --chat-base-nickname-color: #666;
  --chat-base-time-color: #999;

  --whisper-modal-input-border-color: #ddd;
  --whisper-modal-input-background-color: #fff;
  --whisper-modal-input-color: #000;

  --whisper-and-report-popup-border-color: #f2f2f2;
  --whisper-and-report-popup-background-color: #fff;
  --whisper-and-report-popup-box-shadow-color: rgba(168, 168, 168, 0.3);
  --whisper-and-report-popup-item-hover-color: #fff;
  --whisper-and-report-popup-item-hover-background-color: #0a0a6b;
  --whisper-and-report-popup-item-text-color: #000;

  --skeleton-loading-background: #ddd;
  --skeleton-gradient-start: #e5e5e5;
  --skeleton-gradient-middle: #f0f0f0;
  --skeleton-gradient-end: #e5e5e5;

  --default-message-color: #333;

  --open-graph-border-color: #ddd;
  --open-graph-shadow-color: rgba(157, 173, 184, 0.3);
  --open-graph-background-color: #fff;
  --open-graph-title-color: #333;
  --open-graph-description-color: #666;

  --file-message-wrap-background-color: #fff;
  --file-message-wrap-border-color: #ddd;
  --file-message-button-border-color: #ddd;
  --file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --file-message-name-color: #333;
  --file-message-expire-color: #666;
  --file-message-size-color: #666;
  --file-message-icon-opacity: 0.3;
  --file-message-icon-hover-opacity: 0.7;

  --join-message-color: #0033ab;

  --leave-message-color: #ff5a5a;

  --message-notice-bg-color: #333;
  --message-notice-text-color: #fff;
  --message-notice-content-color: #fff;
  --message-notice-shadow-color: rgba(157, 173, 184, 0.3);

  --warn-message-color: #ff7800;

  --whisper-message-sub-wrap-bg-color: #f2f2f2;
  --whisper-message-sub-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --whisper-message-about-title-color: #0a0a6b;
  --whisper-message-about-for-me-title-color: #0a0a6b;
  --whisper-message-about-sub-title-color: #666;
  --whisper-message-content-color: #010000;
  --whisper-message-time-color: #999;
  --whisper-message-for-me-bg-color: #e1dffc;

  --move-end-line-popup-wrap-background-color: #fff;
  --move-end-line-popup-wrap-border-color: #ddd;
  --move-end-line-popup-wrap-shadow-color: rgba(105, 105, 105, 0.25);
  --move-end-line-popup-wrap-text-color: #333;

  --message-input-bg-color: #fff;
  --message-input-textarea-color: #000;
  --message-input-border-color: #ddd;
  --message-input-name-color: #0000ac;
  --message-input-text-size-color: #999;
  --message-input-emoticon-area-border-color: #ddd;
  --message-input-emoticon-list-hover-bg-color: rgba(0, 0, 0, 0.1);
  --message-input-emoticon-list-emoji-bg-color: #ddd;
  --message-input-emoticon-opacity: 0.3;
  --message-input-emoticon-hover-opacity: 0.7;
  --message-input-category-bg-color: #f2f2f2;
  --message-input-category-focus-border-color: #ddd;
  --message-input-category-focus-box-shadow-color: rgba(207, 207, 207, 0.3);
  --message-input-category-focus-bg-color: #fff;
  --message-input-button-bg-color: #0a0a6b;
  --message-input-button-text-color: #fff;
  --message-input-category-opacity: 1;
}

/* 다크모드 색상 */
:root .Dark {
  --invert-img: invert(100%);

  --toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
  --toaster-notify-background-color: #333;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;

  --login-wrap-background-color: #292929;
  --login-logo-notice-color: #ddd;
  --login-footer-color: #aaa;

  --profile-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
  --profile-wrap-border-color: #444;
  --profile-wrap-background-color: #313131;
  --profile-button-color: #aaa;
  --profile-button-hover-color: #fff;
  --profile-profile-border-color: #444;
  --profile-profile-background-color: #fff;
  --profile-nick-name-input-border-color: #444;
  --profile-nick-name-input-color: #fff;
  --profile-nick-name-input-bg-color: #313131;
  --profile-nick-name-input-focus-border-color: #fff;
  --profile-login-button-background-color: #fff;
  --profile-login-button-color: #000;

  --file-send-color-background: rgba(0, 0, 0, 0.15);
  --file-send-color-border: #fff;
  --file-send-color-text: #fff;
  --file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
  --file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);

  --header-color-background: #191919;
  --header-color-title: #fff;
  --header-color-count: #ddd;
  --header-color-border: #ddd;

  --join-user-list-color-background: #333;
  --join-user-list-color-border: #444;
  --join-user-list-color-header-border: #444;
  --join-user-list-color-header-color: #fff;
  --join-user-list-color-footer-background: #222;
  --join-user-list-color-footer: #fff;
  --join-user-list-color-shadow: rgba(0, 0, 0, 0.3);

  --join-user-color-background: #f2f2f2;
  --join-user-color-profile-border: #f2f2f2;
  --join-user-color-title: #fff;
  --join-user-translate-color: #aaa;

  --language-modal-color-background: #313131;
  --language-modal-color-border: #444;
  --language-modal-color-header-border: #444;
  --language-modal-color-footer-background: #222;
  --language-modal-color-footer-text: #fff;
  --language-modal-color-close-icon: rgba(0, 0, 0, 0.3);
  --language-modal-span-color: #fff;

  --radio-group-color-border: #ddd;
  --radio-group-color-checked: #000;
  --radio-group-span-color: #fff;
  --radio-group-radio-icon-bg-color: #fff;

  --checkbox-color-border: #ddd;
  --checkbox-color-background: #fff;

  --toggle-color-bar-background: #666;
  --toggle-color-bar-background-on: #fff;
  --toggle-color-dot-background: #999;
  --toggle-color-dot-background-on: #0ed893;
  --toggle-color-label: #ddd;

  --invite-modal-color-background: #313131;
  --invite-modal-color-border: #444;
  --invite-modal-color-input-border: #444;
  --invite-modal-color-input-text: #fff;
  --invite-modal-color-input-background: #191919;
  --invite-modal-color-title: #fff;
  --invite-modal-color-close-button-border: #fff;
  --invite-modal-color-close-button-text: #fff;
  --invite-modal-color-submit-button-border: #fff;
  --invite-modal-color-submit-button-background: #fff;
  --invite-modal-color-submit-button-text: #000;
  --invite-modal-color-shadow: rgba(0, 0, 0, 0.3);

  --modal-color-background: #313131;
  --modal-color-border: #444;
  --modal-color-title: #fff;
  --modal-color-contents: #fff;
  --modal-color-close-button-border: #fff;
  --modal-color-close-button-text: #fff;
  --modal-color-submit-button-border: #fff;
  --modal-color-submit-button-background: #fff;
  --modal-color-submit-button-text: #000;
  --modal-color-shadow: rgba(0, 0, 0, 0.3);

  --file-drawer-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
  --file-drawer-wrap-border-color: #444;
  --file-drawer-wrap-background-color: #333;
  --file-drawer-header-border-bottom-color: #444;
  --file-drawer-title-color: #fff;
  --file-drawer-tab-item-color: #fff;
  --file-drawer-tab-item-focus-color: #fff;
  --file-drawer-tab-item-focus-border-color: #fff;
  --file-drawer-body-padding-color: #ddd;
  --file-drawer-footer-border-top-color: #444;
  --file-drawer-footer-select-count-color: #fff;
  --file-drawer-footer-save-color: #fff;
  --file-drawer-footer-image-opacity: 0.3;
  --file-drawer-footer-image-opacity-hover: 0.7;

  --preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
  --preview-popup-color-text-header: #ffffff;
  --preview-popup-color-bg-dim: #000000;

  --file-preview-wrap-border-color: #f2f2f2;
  --file-preview-wrap-background-color: #fff;
  --file-preview-wrap-focus-border-color: #0ed893;
  --file-preview-wrap-focus-background-color: #fff;
  --file-preview-selected-icon-color: #000;
  --file-preview-name-color: #000;
  --file-preview-expire-color: #999;
  --file-preview-size-color: #999;

  --image-preview-wrap-focus-border-color: #0ed893;
  --image-preview-selected-icon-color: #000;

  --video-preview-wrap-focus-border-color: #0ed893;
  --video-preview-wrap-focus-background-color: #292929;
  --video-preview-selected-icon-color: #000;

  --body-chat-contents-color: #fff;
  --body-nickname-color: #fff;
  --body-chat-bg-color: #292929;

  --chat-base-profile-border-color: #444;
  --chat-base-profile-background-color: #aeaae2;
  --chat-base-nickname-color: #aaa;
  --chat-base-time-color: #aaa;

  --whisper-modal-input-border-color: #444;
  --whisper-modal-input-background-color: #191919;
  --whisper-modal-input-color: #fff;

  --whisper-and-report-popup-border-color: #444;
  --whisper-and-report-popup-background-color: #313131;
  --whisper-and-report-popup-box-shadow-color: rgba(0, 0, 0, 0.3);
  --whisper-and-report-popup-item-hover-color: #fff;
  --whisper-and-report-popup-item-hover-background-color: #313131;
  --whisper-and-report-popup-item-text-color: #fff;

  --skeleton-loading-background: #ddd;
  --skeleton-gradient-start: #e5e5e5;
  --skeleton-gradient-middle: #f0f0f0;
  --skeleton-gradient-end: #e5e5e5;

  --default-message-color: #fff;

  --open-graph-border-color: #444;
  --open-graph-shadow-color: rgba(0, 0, 0, 0.3);
  --open-graph-background-color: #fff;
  --open-graph-title-color: #333;
  --open-graph-description-color: #666;

  --file-message-wrap-background-color: #fff;
  --file-message-wrap-border-color: #444;
  --file-message-button-border-color: #ddd;
  --file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --file-message-name-color: #333;
  --file-message-expire-color: #666;
  --file-message-size-color: #666;
  --file-message-icon-opacity: 0.3;
  --file-message-icon-hover-opacity: 0.7;

  --join-message-color: #00ffc0;

  --leave-message-color: #ff3a54;

  --message-notice-bg-color: #111;
  --message-notice-text-color: #fff;
  --message-notice-content-color: #fff;
  --message-notice-shadow-color: rgba(0, 0, 0, 0.3);

  --warn-message-color: #fff000;

  --whisper-message-sub-wrap-bg-color: #353535;
  --whisper-message-sub-wrap-shadow-color: rgba(0, 0, 0, 0.3);
  --whisper-message-about-title-color: #00ffc0;
  --whisper-message-about-for-me-title-color: #dfb84e;
  --whisper-message-about-sub-title-color: #aaa;
  --whisper-message-content-color: #fff;
  --whisper-message-time-color: #aaa;
  --whisper-message-for-me-bg-color: #384150;

  --move-end-line-popup-wrap-background-color: #353535;
  --move-end-line-popup-wrap-border-color: #353535;
  --move-end-line-popup-wrap-shadow-color: rgba(0, 0, 0, 0.25);
  --move-end-line-popup-wrap-text-color: #aaa;

  --message-input-bg-color: #292929;
  --message-input-textarea-color: #fff;
  --message-input-border-color: #444;
  --message-input-name-color: #aaa;
  --message-input-text-size-color: #ddd;
  --message-input-emoticon-area-border-color: #444;
  --message-input-emoticon-list-hover-bg-color: rgba(255, 255, 255, 0.1);
  --message-input-emoticon-list-emoji-bg-color: rgba(255, 255, 255, 0.1);
  --message-input-emoticon-opacity: 0.3;
  --message-input-emoticon-hover-opacity: 0.7;
  --message-input-category-bg-color: #353535;
  --message-input-category-focus-border-color: #353535;
  --message-input-category-focus-box-shadow-color: rgba(0, 0, 0, 0.3);
  --message-input-category-focus-bg-color: #292929;
  --message-input-button-bg-color: #fff;
  --message-input-button-text-color: #000;
  --message-input-category-opacity: 0.5;
}
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437

색상을 변경하고 싶다면 아래와 같이 변수를 덮어쓸 수 있습니다.

변수 재지정 방법 
/* 기본모드 색상 */
:root {
  --invert-img: none;

  --toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
  --toaster-notify-background-color: #363940;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;
  ...
}

/* 다크모드 색상 */
:root .Dark {
  --invert-img: invert(100%);

  --toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
  --toaster-notify-background-color: #333;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

←

Copyright 2022. E7Works Inc. & JOYTUNE Corp. All Rights Reserved.