@@ -327,130 +327,23 @@ multiline code
327
327
328
328
Example: set ` "accepted-files="image/png, image/jpeg, application/pdf" ` to allow ` JPG ` ` PNG ` and ` PDF ` files
329
329
330
- (18) ` styles ` can be used to customize your own theme. Ex:
330
+ (18) ` styles ` can be used to customize your own theme. You can find the full list [ here ] ( src/themes/index.js )
331
331
332
332
``` javascript
333
333
styles= " {
334
334
general: {
335
335
color: '#0a0a0a',
336
- backgroundInput: '#fff',
337
- colorPlaceholder: '#9ca6af',
338
- colorCaret: '#1976d2',
339
336
colorSpinner: '#333',
340
- borderStyle: '1px solid #e1e4e8',
341
- backgroundScrollIcon: '#fff'
342
- },
343
-
344
- container: {
345
- border: 'none',
346
- borderRadius: '4px',
347
- boxShadow: '0px 3px 1px 1px #000'
348
- },
349
-
350
- header: {
351
- background: '#fff',
352
- colorRoomName: '#0a0a0a',
353
- colorRoomInfo: '#9ca6af'
337
+ borderStyle: '1px solid #e1e4e8'
354
338
},
355
339
356
340
footer: {
357
341
background: '#f8f9fa',
358
- borderStyleInput: '1px solid #e1e4e8',
359
- borderInputSelected: '#1976d2',
360
342
backgroundReply: 'rgba(0, 0, 0, 0.08)'
361
343
},
362
344
363
- content: {
364
- background: '#f8f9fa'
365
- },
366
-
367
- sidemenu: {
368
- background: '#fff',
369
- backgroundHover: '#f6f6f6',
370
- backgroundActive: '#e5effa',
371
- colorActive: '#1976d2',
372
- borderColorSearch: '#e1e5e8'
373
- },
374
-
375
- dropdown: {
376
- background: '#fff',
377
- backgroundHover: '#f6f6f6'
378
- },
379
-
380
- message: {
381
- background: '#fff',
382
- backgroundMe: '#ccf2cf',
383
- color: '#0a0a0a',
384
- colorStarted: '#9ca6af',
385
- backgroundDeleted: '#dadfe2',
386
- colorDeleted: '#757e85',
387
- colorUsername: '#9ca6af',
388
- colorTimestamp: '#828c94',
389
- backgroundDate: '#e5effa',
390
- colorDate: '#505a62',
391
- backgroundSystem: '#e5effa',
392
- colorSystem: '#505a62',
393
- backgroundReply: 'rgba(0, 0, 0, 0.08)',
394
- colorReplyUsername: '#0a0a0a',
395
- colorReply: '#6e6e6e',
396
- colorTag: '#0d579c',
397
- backgroundImage: '#ddd',
398
- colorNewMessages: '#1976d2',
399
- backgroundReaction: '#eee',
400
- borderStyleReaction: '1px solid #eee',
401
- backgroundReactionHover: '#fff',
402
- borderStyleReactionHover: '1px solid #ddd',
403
- colorReactionCounter: '#0a0a0a',
404
- backgroundReactionMe: '#cfecf5',
405
- borderStyleReactionMe: '1px solid #3b98b8',
406
- backgroundReactionHoverMe: '#cfecf5',
407
- borderStyleReactionHoverMe: '1px solid #3b98b8',
408
- colorReactionCounterMe: '#0b59b3'
409
- },
410
-
411
- markdown: {
412
- background: 'rgba(239, 239, 239, 0.7)',
413
- border: 'rgba(212, 212, 212, 0.9)',
414
- color: '#e01e5a',
415
- colorMulti: '#0a0a0a'
416
- },
417
-
418
- room: {
419
- colorUsername: '#0a0a0a',
420
- colorMessage: '#67717a',
421
- colorTimestamp: '#a2aeb8',
422
- colorStateOnline: '#4caf50',
423
- colorStateOffline: '#ccc',
424
- backgroundCounterBadge: '#0696c7',
425
- colorCounterBadge: '#fff'
426
- },
427
-
428
- emoji: {
429
- background: '#fff'
430
- },
431
-
432
345
icons: {
433
- search: '#9ca6af',
434
- add: '#1976d2',
435
- toggle: '#0a0a0a',
436
- menu: '#0a0a0a',
437
- close: '#9ca6af',
438
- closeImage: '#fff',
439
- file: '#1976d2',
440
- paperclip: '#1976d2',
441
- closeOutline: '#000',
442
- send: '#1976d2',
443
- sendDisabled: '#9ca6af',
444
- emoji: '#1976d2',
445
- emojiReaction: '#828c94',
446
- document: '#1976d2',
447
- pencil: '#9e9e9e',
448
- checkmark: '#9e9e9e',
449
- checkmarkSeen: '#0696c7',
450
- eye: '#fff',
451
- dropdownMessage: '#fff',
452
- dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
453
- dropdownScroll: '#0a0a0a'
346
+ search: '#9ca6af'
454
347
}
455
348
}"
456
349
```
0 commit comments