mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Color scheme for a markdown code blocks in dark mode (#11008)

Browse source
This commit is contained in:
Eugene 2024-09-30 13:41:46 +02:00 committed by GitHub
parent fe871d89a9
commit b20d2eb403
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/@n8n/chat/src/css/markdown.scss
View file

@ -1,4 +1,20 @@
@import 'highlight.js/styles/github.css';
@use 'sass:meta';
@include meta.load-css('highlight.js/styles/github.css');
@mixin hljs-dark-theme {
@include meta.load-css('highlight.js/styles/github-dark-dimmed.css');
}
body {
&[data-theme='dark'] {
@include hljs-dark-theme;
}
@media (prefers-color-scheme: dark) {
@include hljs-dark-theme;
}
}
// https://github.com/pxlrbt/markdown-css
.chat-message-markdown {
@ -561,7 +577,6 @@
kbd, /* different style for kbd? */
code {
background: #eee;
padding: 0.1em 0.25em;
border-radius: 0.2rem;
-webkit-box-decoration-break: clone;

14
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
View file

@ -145,6 +145,13 @@ watchDebounced(
color: var(--color-text-base);
font-size: var(--font-size-2xs);
padding: var(--spacing-2xs);
code {
font-size: var(--font-size-3xs);
background: var(--color-background-base);
padding: var(--spacing-5xs);
border-radius: var(--border-radius-base);
}
}
.content {
@ -165,13 +172,6 @@ watchDebounced(
display: inline;
}
code {
font-size: var(--font-size-3xs);
background: var(--color-background-base);
padding: var(--spacing-5xs);
border-radius: var(--border-radius-base);
}
.pill {
display: inline-flex;
align-items: center;

3
packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
View file

@ -680,6 +680,9 @@ onMounted(() => {
[data-theme='dark'] & {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
@media (prefers-color-scheme: dark) {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
border-bottom-right-radius: var(--border-radius-base);
border-top-right-radius: var(--border-radius-base);