chat colors, IBM Plex Sans
This commit is contained in:
@@ -356,22 +356,19 @@ const openFile = ({ file }: any) => {
|
||||
window.open(file.url, '_blank')
|
||||
}
|
||||
|
||||
// Theme configuration for dark mode
|
||||
const chatTheme = 'dark'
|
||||
|
||||
// Styles to match TradingView dark theme
|
||||
const chatStyles = computed(() => JSON.stringify({
|
||||
const chatStyles = {
|
||||
general: {
|
||||
color: '#D3D4DC',
|
||||
colorButtonClear: '#D3D4DC',
|
||||
colorButton: '#131722',
|
||||
backgroundColorButton: '#26A69A',
|
||||
backgroundInput: '#131722',
|
||||
colorPlaceholder: '#787B86',
|
||||
colorCaret: '#D3D4DC',
|
||||
colorSpinner: '#26A69A',
|
||||
borderStyle: '1px solid #2A2E39',
|
||||
backgroundScrollIcon: '#2A2E39'
|
||||
color: '#dbdbdb',
|
||||
colorButtonClear: '#dbdbdb',
|
||||
colorButton: '#0f0f0f',
|
||||
backgroundColorButton: '#089981',
|
||||
backgroundInput: '#0f0f0f',
|
||||
colorPlaceholder: '#8a8a8a',
|
||||
colorCaret: '#dbdbdb',
|
||||
colorSpinner: '#089981',
|
||||
borderStyle: '1px solid #2e2e2e',
|
||||
backgroundScrollIcon: '#1c1c1c'
|
||||
},
|
||||
container: {
|
||||
border: 'none',
|
||||
@@ -379,122 +376,122 @@ const chatStyles = computed(() => JSON.stringify({
|
||||
boxShadow: 'none'
|
||||
},
|
||||
header: {
|
||||
background: '#2A2E39',
|
||||
colorRoomName: '#D3D4DC',
|
||||
colorRoomInfo: '#787B86',
|
||||
background: '#1c1c1c',
|
||||
colorRoomName: '#dbdbdb',
|
||||
colorRoomInfo: '#8a8a8a',
|
||||
position: 'absolute',
|
||||
width: '100%'
|
||||
},
|
||||
footer: {
|
||||
background: '#2A2E39',
|
||||
borderStyleInput: '1px solid #2A2E39',
|
||||
borderInputSelected: '#26A69A',
|
||||
backgroundReply: '#2A2E39',
|
||||
backgroundTagActive: '#2A2E39',
|
||||
backgroundTag: '#1E222D'
|
||||
background: '#1c1c1c',
|
||||
borderStyleInput: '1px solid #2e2e2e',
|
||||
borderInputSelected: '#089981',
|
||||
backgroundReply: '#1c1c1c',
|
||||
backgroundTagActive: '#2e2e2e',
|
||||
backgroundTag: '#141414'
|
||||
},
|
||||
content: {
|
||||
background: '#131722'
|
||||
background: '#0f0f0f'
|
||||
},
|
||||
sidemenu: {
|
||||
background: '#131722',
|
||||
backgroundHover: '#1E222D',
|
||||
backgroundActive: '#2A2E39',
|
||||
colorActive: '#D3D4DC',
|
||||
borderColorSearch: '#2A2E39'
|
||||
background: '#0f0f0f',
|
||||
backgroundHover: '#141414',
|
||||
backgroundActive: '#1c1c1c',
|
||||
colorActive: '#dbdbdb',
|
||||
borderColorSearch: '#2e2e2e'
|
||||
},
|
||||
dropdown: {
|
||||
background: '#2A2E39',
|
||||
backgroundHover: '#363B4A'
|
||||
background: '#1c1c1c',
|
||||
backgroundHover: '#2e2e2e'
|
||||
},
|
||||
message: {
|
||||
background: '#1E222D',
|
||||
backgroundMe: '#26A69A',
|
||||
color: '#D3D4DC',
|
||||
colorStarted: '#787B86',
|
||||
backgroundDeleted: '#131722',
|
||||
backgroundSelected: '#2A2E39',
|
||||
colorDeleted: '#787B86',
|
||||
colorUsername: '#787B86',
|
||||
colorTimestamp: '#787B86',
|
||||
backgroundDate: 'rgba(0, 0, 0, 0.3)',
|
||||
colorDate: '#787B86',
|
||||
backgroundSystem: 'rgba(0, 0, 0, 0.3)',
|
||||
colorSystem: '#787B86',
|
||||
backgroundMedia: 'rgba(0, 0, 0, 0.18)',
|
||||
backgroundReply: 'rgba(0, 0, 0, 0.18)',
|
||||
colorReplyUsername: '#D3D4DC',
|
||||
colorReply: '#B2B5BE',
|
||||
colorTag: '#26A69A',
|
||||
backgroundImage: '#2A2E39',
|
||||
colorNewMessages: '#26A69A',
|
||||
backgroundScrollCounter: '#26A69A',
|
||||
colorScrollCounter: '#131722',
|
||||
background: '#141414',
|
||||
backgroundMe: '#089981',
|
||||
color: '#dbdbdb',
|
||||
colorStarted: '#8a8a8a',
|
||||
backgroundDeleted: '#0f0f0f',
|
||||
backgroundSelected: '#2e2e2e',
|
||||
colorDeleted: '#8a8a8a',
|
||||
colorUsername: '#8a8a8a',
|
||||
colorTimestamp: '#8a8a8a',
|
||||
backgroundDate: 'rgba(0, 0, 0, 0.4)',
|
||||
colorDate: '#8a8a8a',
|
||||
backgroundSystem: 'rgba(0, 0, 0, 0.4)',
|
||||
colorSystem: '#8a8a8a',
|
||||
backgroundMedia: 'rgba(0, 0, 0, 0.2)',
|
||||
backgroundReply: 'rgba(0, 0, 0, 0.2)',
|
||||
colorReplyUsername: '#dbdbdb',
|
||||
colorReply: '#b8b8b8',
|
||||
colorTag: '#089981',
|
||||
backgroundImage: '#1c1c1c',
|
||||
colorNewMessages: '#089981',
|
||||
backgroundScrollCounter: '#089981',
|
||||
colorScrollCounter: '#0f0f0f',
|
||||
backgroundReaction: 'none',
|
||||
borderStyleReaction: 'none',
|
||||
backgroundReactionHover: '#2A2E39',
|
||||
backgroundReactionHover: '#2e2e2e',
|
||||
borderStyleReactionHover: 'none',
|
||||
colorReactionCounter: '#D3D4DC',
|
||||
backgroundReactionMe: '#26A69A',
|
||||
colorReactionCounter: '#dbdbdb',
|
||||
backgroundReactionMe: '#089981',
|
||||
borderStyleReactionMe: 'none',
|
||||
backgroundReactionHoverMe: '#26A69A',
|
||||
backgroundReactionHoverMe: '#089981',
|
||||
borderStyleReactionHoverMe: 'none',
|
||||
colorReactionCounterMe: '#131722',
|
||||
backgroundAudioRecord: '#EF5350',
|
||||
colorReactionCounterMe: '#0f0f0f',
|
||||
backgroundAudioRecord: '#f23645',
|
||||
backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
|
||||
backgroundAudioProgress: '#26A69A',
|
||||
backgroundAudioProgressSelector: '#26A69A',
|
||||
colorFileExtension: '#787B86'
|
||||
backgroundAudioProgress: '#089981',
|
||||
backgroundAudioProgressSelector: '#089981',
|
||||
colorFileExtension: '#8a8a8a'
|
||||
},
|
||||
markdown: {
|
||||
background: 'rgba(42, 46, 57, 0.8)',
|
||||
border: 'rgba(55, 60, 74, 0.9)',
|
||||
color: '#26A69A',
|
||||
colorMulti: '#D3D4DC'
|
||||
background: 'rgba(28, 28, 28, 0.9)',
|
||||
border: 'rgba(46, 46, 46, 0.9)',
|
||||
color: '#089981',
|
||||
colorMulti: '#dbdbdb'
|
||||
},
|
||||
room: {
|
||||
colorUsername: '#D3D4DC',
|
||||
colorMessage: '#787B86',
|
||||
colorTimestamp: '#787B86',
|
||||
colorStateOnline: '#26A69A',
|
||||
colorStateOffline: '#787B86',
|
||||
backgroundCounterBadge: '#26A69A',
|
||||
colorCounterBadge: '#131722'
|
||||
colorUsername: '#dbdbdb',
|
||||
colorMessage: '#8a8a8a',
|
||||
colorTimestamp: '#8a8a8a',
|
||||
colorStateOnline: '#089981',
|
||||
colorStateOffline: '#8a8a8a',
|
||||
backgroundCounterBadge: '#089981',
|
||||
colorCounterBadge: '#0f0f0f'
|
||||
},
|
||||
emoji: {
|
||||
background: '#2A2E39'
|
||||
background: '#1c1c1c'
|
||||
},
|
||||
icons: {
|
||||
search: '#787B86',
|
||||
add: '#D3D4DC',
|
||||
toggle: '#D3D4DC',
|
||||
menu: '#D3D4DC',
|
||||
close: '#787B86',
|
||||
closeImage: '#D3D4DC',
|
||||
file: '#26A69A',
|
||||
paperclip: '#787B86',
|
||||
closeOutline: '#D3D4DC',
|
||||
closePreview: '#D3D4DC',
|
||||
send: '#26A69A',
|
||||
sendDisabled: '#787B86',
|
||||
emoji: '#787B86',
|
||||
emojiReaction: '#787B86',
|
||||
document: '#26A69A',
|
||||
pencil: '#787B86',
|
||||
checkmark: '#787B86',
|
||||
checkmarkSeen: '#26A69A',
|
||||
eye: '#D3D4DC',
|
||||
dropdownMessage: '#D3D4DC',
|
||||
dropdownMessageBackground: 'rgba(0, 0, 0, 0.3)',
|
||||
dropdownRoom: '#D3D4DC',
|
||||
dropdownScroll: '#2A2E39',
|
||||
microphone: '#787B86',
|
||||
audioPlay: '#26A69A',
|
||||
audioPause: '#26A69A',
|
||||
audioCancel: '#EF5350',
|
||||
audioConfirm: '#26A69A'
|
||||
search: '#8a8a8a',
|
||||
add: '#dbdbdb',
|
||||
toggle: '#dbdbdb',
|
||||
menu: '#dbdbdb',
|
||||
close: '#8a8a8a',
|
||||
closeImage: '#dbdbdb',
|
||||
file: '#089981',
|
||||
paperclip: '#8a8a8a',
|
||||
closeOutline: '#dbdbdb',
|
||||
closePreview: '#dbdbdb',
|
||||
send: '#089981',
|
||||
sendDisabled: '#8a8a8a',
|
||||
emoji: '#8a8a8a',
|
||||
emojiReaction: '#8a8a8a',
|
||||
document: '#089981',
|
||||
pencil: '#8a8a8a',
|
||||
checkmark: '#8a8a8a',
|
||||
checkmarkSeen: '#089981',
|
||||
eye: '#dbdbdb',
|
||||
dropdownMessage: '#dbdbdb',
|
||||
dropdownMessageBackground: 'rgba(0, 0, 0, 0.4)',
|
||||
dropdownRoom: '#dbdbdb',
|
||||
dropdownScroll: '#1c1c1c',
|
||||
microphone: '#8a8a8a',
|
||||
audioPlay: '#089981',
|
||||
audioPause: '#089981',
|
||||
audioCancel: '#f23645',
|
||||
audioConfirm: '#089981'
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
wsManager.addHandler(handleMessage)
|
||||
@@ -539,8 +536,7 @@ onUnmounted(() => {
|
||||
:messages="JSON.stringify(messages)"
|
||||
:messages-loaded="messagesLoaded"
|
||||
:room-id="SESSION_ID"
|
||||
:theme="chatTheme"
|
||||
:styles="chatStyles"
|
||||
:styles="JSON.stringify(chatStyles)"
|
||||
:single-room="true"
|
||||
:rooms-list-opened="false"
|
||||
:show-add-room="false"
|
||||
|
||||
Reference in New Issue
Block a user