dexorder/ai
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chat colors, IBM Plex Sans

Browse Source
This commit is contained in:
Tim Olson
2026-04-01 01:30:17 -04:00
parent 93bc8a3a4f
commit a7b0d17fa1
4 changed files with 127 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
deploy/k8s/dev/kustomization.yaml
View File

@@ -257,6 +257,10 @@ generatorOptions:

3
web/index.html
View File

@@ -5,6 +5,9 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dexorder</title> <title>dexorder</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<script type="text/javascript" src="/charting_library/charting_library.standalone.js"></script> <script type="text/javascript" src="/charting_library/charting_library.standalone.js"></script>
</head> </head>
<body> <body>

33
web/src/assets/theme.css
View File

@@ -1,21 +1,21 @@
/* web/src/assets/theme.css */ /* web/src/assets/theme.css */
:root { :root {
--p-primary-color: #26A69A; /* TV green */ --p-primary-color: #089981; /* TV green */
--p-primary-contrast-color: #131722; --p-primary-contrast-color: #0f0f0f;
--p-surface-0: #131722; /* TV bg */ --p-surface-0: #0f0f0f; /* TV bg */
--p-surface-50: #1a1e2b; --p-surface-50: #141414;
--p-surface-100: #1e222d; --p-surface-100: #1c1c1c; /* TV grid lines */
--p-surface-200: #2A2E39; /* TV grid */ --p-surface-200: #2e2e2e; /* TV borders */
--p-surface-300: #363b4a; --p-surface-300: #3d3d3d;
--p-surface-400: #434857; --p-surface-400: #4d4d4d;
--p-surface-700: #787B86; /* TV subtext */ --p-surface-700: #8a8a8a; /* TV subtext */
--p-surface-800: #B2B5BE; --p-surface-800: #b8b8b8;
--p-surface-900: #D3D4DC; /* TV text */ --p-surface-900: #dbdbdb; /* TV text */
/* Semantic trading colors */ /* Semantic trading colors */
--color-bull: #26A69A; --color-bull: #089981;
--color-bear: #EF5350; --color-bear: #f23645;
--color-neutral: #787B86; --color-neutral: #8a8a8a;
} }
html, body, #app { html, body, #app {
@@ -25,6 +25,11 @@ html, body, #app {
width: 100vw !important; width: 100vw !important;
overflow: hidden; overflow: hidden;
background-color: var(--p-surface-0) !important; background-color: var(--p-surface-0) !important;
font-family: 'IBM Plex Sans', sans-serif;
}
vue-advanced-chat {
font-family: 'IBM Plex Sans', sans-serif;
} }
.dark { .dark {

206
web/src/components/ChatPanel.vue
View File

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