From 1f2a329553fcb07d95030a784bd59e09623b8d5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 27 Mar 2026 19:49:00 +0100 Subject: [PATCH] darkbrewery --- client/components/codeEditor/codeEditor.jsx | 3 +- client/components/codeEditor/codeEditor.less | 2 +- client/homebrew/editor/editor.less | 8 +- .../homebrew/editor/snippetbar/snippetbar.jsx | 3 +- .../codeMirror/customThemes/darkbrewery.css | 134 ------------------ themes/codeMirror/customThemes/darkbrewery.js | 114 +++++++++++++++ themes/codeMirror/customThemes/default.js | 6 +- 7 files changed, 125 insertions(+), 145 deletions(-) delete mode 100644 themes/codeMirror/customThemes/darkbrewery.css create mode 100644 themes/codeMirror/customThemes/darkbrewery.js diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx index 2067d370b..bc9702019 100644 --- a/client/components/codeEditor/codeEditor.jsx +++ b/client/components/codeEditor/codeEditor.jsx @@ -25,8 +25,9 @@ import { searchKeymap, search } from '@codemirror/search'; import * as themesImport from '@uiw/codemirror-themes-all'; import defaultCM5Theme from '@themes/codeMirror/customThemes/default.js'; +import darkbrewery from '../../../themes/codeMirror/customThemes/darkbrewery.js'; -const themes = { default: defaultCM5Theme, ...themesImport }; +const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport }; const themeCompartment = new Compartment(); const highlightCompartment = new Compartment(); diff --git a/client/components/codeEditor/codeEditor.less b/client/components/codeEditor/codeEditor.less index eceaf403a..6415753ae 100644 --- a/client/components/codeEditor/codeEditor.less +++ b/client/components/codeEditor/codeEditor.less @@ -15,7 +15,7 @@ } } -.codeEditor { +:where(.codeEditor) { font-family: monospace; height: 100%; width:100%; diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index e57bbd44c..5dea50966 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -1,13 +1,13 @@ @import '@sharedStyles/core.less'; @import '@themes/codeMirror/customEditorStyles.less'; -.editor { +:where(.editor) { position : relative; width : 100%; height : 100%; container : editor / inline-size; background : white; - .codeEditor { + :where(.codeEditor) { height : calc(100% - 25px); .cm-editor { height : 100%; outline:none !important; @@ -17,7 +17,7 @@ border-top : #333399 solid 1px; } - &.brewText .cm-pageLine { + :where(&.brewText) .cm-pageLine { background : #33333328; border-top : #333399 solid 1px; } @@ -30,7 +30,7 @@ } } - &.brewText, &.brewSnippets { + &:where(.brewText), &.brewSnippets { .cm-tooltip-autocomplete { diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index 12185f504..8b7a52824 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -26,8 +26,9 @@ const ThemeSnippets = { //import EditorThemes from '../../../../build/homebrew/codeMirror/editorThemes.json'; import * as themesImport from '@uiw/codemirror-themes-all'; import defaultCM5Theme from '@themes/codeMirror/customThemes/default.js'; +import darkbrewery from '../../../../themes/codeMirror/customThemes/darkbrewery.js'; -const themes = { default: defaultCM5Theme, ...themesImport }; +const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport }; const EditorThemes = Object.entries(themes) .filter(([name, value]) => diff --git a/themes/codeMirror/customThemes/darkbrewery.css b/themes/codeMirror/customThemes/darkbrewery.css deleted file mode 100644 index ec043c5ba..000000000 --- a/themes/codeMirror/customThemes/darkbrewery.css +++ /dev/null @@ -1,134 +0,0 @@ -/*stylelint-disable*/ -.editor .snippetBar { - color: white; - background-color: #2F393C; - .dropdown { - background-color: #2F393C; - } - .editors { - border-color: #ccc; - } -} -/* Main BG color and normal text color */ -.CodeMirror { - --bg: #293134; - --highlight: #bcbcbc; - color: #91A6AA; - background: var(--bg); - .cm-scroller { - .cm-gutters { - border-right: 1px solid #555; - background: var(--bg); - .cm-gutter { - background-color: var(--bg); - &.CodeMirror-foldgutter { - cursor: pointer; - border-left: 1px solid #555; - transition: background 0.1s; - &:hover { - background: #555; - } - } - } - } - .cm-content { - /* Line numbers*/ - .CodeMirror-linenumber.cm-gutter-elt { - background-color: var(--bg); - color: #81969A; - } - /* Blinking cursor */ - .CodeMirror-cursor { - border-left: 1px solid #E0E2E4; - } - .pageLine { - color: #000000; - background: #000000; - border-bottom: 1px solid #FFFFFF; - } - .CodeMirror-code .CodeMirror-line { - &.columnSplit { - font-style: italic; - color: inherit; - background-color: #1F5763; - border-bottom: #229999 solid 1px; - } - /*syntax*/ - .cm-header { - font-weight: bold; - color: #C51B1B; - -webkit-text-stroke-width: 0.1px; - -webkit-text-stroke-color: #000000; - } - .cm-strong { - color: #309DD2; - } - .cm-em { - /*italics*/ - } - .cm-link { - color: #DD6300; - } - .cm-string { - color: #AA8261; - } - /* @import */ - .cm-def { - color: #2986CC; - } - /* Bullets and such */ - .cm-variable-2 { - color: #3CBF30; - } - .block:not(.cm-comment) { - color: #E3E3E3; - } - .inline-block { - color: #E3E3E3; - } - .cm-tag { - color: #E3FF00; - } - .cm-attribute { - color: #E3FF00; - } - .cm-atom { - color: #c1939a; - } - .cm-number { - color: #2986CC; - } - .cm-property:not(.cm-error) ~ .cm-variable { - color:#9e1f9e; - } - .cm-qualifier { - color: #EE1919; - } - .cm-comment { - color: #BBC700; - } - .cm-keyword { - color: white; - } - .cm-error { - color: #C50202; - } - .CodeMirror-foldmarker { - color: #F0FF00; - } - .cm-builtin { - color: #FFFFFF; - } - .dt-highlight { - background: #ffffff14; - } - .dl-colon-highlight { - background: #ccc; - } - .dl-highlight.dd-highlight { - color: #b5858d; - } - } - } - } -} \ No newline at end of file diff --git a/themes/codeMirror/customThemes/darkbrewery.js b/themes/codeMirror/customThemes/darkbrewery.js new file mode 100644 index 000000000..4bc1aadd8 --- /dev/null +++ b/themes/codeMirror/customThemes/darkbrewery.js @@ -0,0 +1,114 @@ +import { EditorView } from '@codemirror/view'; + + +export default EditorView.theme({ + '&' : { + backgroundColor : '#293134', + color : '#91a6aa', + }, + '.cm-content' : { + padding : '4px 0', + fontFamily : 'monospace', + fontSize : '13px', + lineHeight : '1', + }, + '.cm-line' : { + padding : '0 4px', + }, + '.cm-gutters' : { + borderRight : '1px solid #555', + backgroundColor : '#293134', + whiteSpace : 'nowrap', + }, + '.cm-foldGutter' : { + borderLeft : '1px solid #555', + backgroundColor : '#293134', + }, + '.cm-foldGutter:hover' : { + backgroundColor : '#555', + }, + '.cm-gutterElement' : { + color: '#81969a', + }, + '.cm-linenumber' : { + padding : '0 3px 0 5px', + minWidth : '20px', + textAlign : 'right', + color : '#999', + whiteSpace : 'nowrap', + }, + '.cm-cursor' : { + borderLeft : '1px solid #E0E2E4', + }, + '.cm-fat-cursor' : { + width : 'auto', + backgroundColor : '#7e7', + caretColor : 'transparent', + }, + '.cm-activeLine' : { + backgroundColor : '#868c9323', + }, + '.cm-gutterElement.cm-activeLineGutter' : { + backgroundColor : '#868c9323', + }, + '.cm-activeLine' : { + backgroundColor : '#868c9323', + }, + '.cm-selected' : { + backgroundColor : '#d7d4f0', + }, + '.cm-pageLine' : { + backgroundColor: '#7ca97c', + color: '#000', + fontWeight: 'bold', + letterSpacing: '.5px', + borderTop: '1px solid #ff0', + }, + '.cm-columnSplit' : { + backgroundColor: '#7ca97c', + color: 'black', + fontWeight: 'bold', + letterSpacing: '1px', + borderBottom: '1px solid #ff0', + }, + '.cm-line.cm-block, .cm-line .cm-inline-block' : { + color: '#E3E3E3', + }, + '.cm-definitionList .cm-definitionTerm' : { + color: '#E3E3E3', + }, + '.cm-definitionList .cm-definitionColon' : { + backgroundColor: '#0000', + color: '#e3FF00', + }, + '.cm-definitionList .cm-definitionDesc' : { + color: '#b5858d', + }, + + // Semantic classes + '.cm-header' : { color: '#C51B1B', fontWeight: 'bold' }, + '.cm-strong' : { color: '#309dd2', fontWeight: 'bold' }, + '.cm-em' : { fontStyle: 'italic' }, + '.cm-keyword' : { color: '#fff' }, + '.cm-atom, cm-value, cm-color' : { color: '#c1939a' }, + '.cm-number' : { color: '#2986cc' }, + '.cm-def' : { color: '#2986cc' }, + '.cm-list' : { color: '#3cbf30' }, + '.cm-variable, .cm-type' : { color: '#085' }, + '.cm-comment' : { color: '#bbc700' }, + '.cm-link' : { color: '#DD6300', textDecoration: 'underline' }, + '.cm-string' : { color: '#AA8261', textDecoration: 'none' }, + '.cm-string-2' : { color: '#f50', textDecoration: 'none' }, + '.cm-meta, .cm-qualifier, .cm-class' : { color: '#19ee2b' }, + '.cm-builtin' : { color: '#fff' }, + '.cm-bracket' : { color: '#997' }, + '.cm-tag, .cm-attribute' : { color: '#e3ff00' }, + '.cm-hr' : { color: '#999' }, + '.cm-negative' : { color: '#d44' }, + '.cm-positive' : { color: '#292' }, + '.cm-error, .cm-invalidchar' : { color: '#c50202' }, + '.cm-matchingbracket' : { color: '#0b0' }, + '.cm-nonmatchingbracket' : { color: '#a22' }, + '.cm-matchingtag' : { backgroundColor: 'rgba(255, 150, 0, 0.3)' }, + '.cm-quote' : { color: '#090' }, +}, { dark: true }); \ No newline at end of file diff --git a/themes/codeMirror/customThemes/default.js b/themes/codeMirror/customThemes/default.js index 305271405..5c65d94f1 100644 --- a/themes/codeMirror/customThemes/default.js +++ b/themes/codeMirror/customThemes/default.js @@ -1,4 +1,3 @@ -// themes/codeMirror/customThemes/default.js import { EditorView } from '@codemirror/view'; //This theme is made of the base css for the codemirror 5 editor @@ -37,7 +36,7 @@ export default EditorView.theme({ backgroundColor : '#7e7', caretColor : 'transparent', }, - '.cm-activeline-background' : { + '.cm-activeLine' : { backgroundColor : '#e8f2ff', }, '.cm-selected' : { @@ -50,7 +49,6 @@ export default EditorView.theme({ cursor : 'pointer', }, - // Semantic classes '.cm-header' : { color: 'blue', fontWeight: 'bold' }, '.cm-strong' : { fontWeight: 'bold' }, '.cm-em' : { fontStyle: 'italic' }, @@ -75,6 +73,6 @@ export default EditorView.theme({ '.cm-error, .cm-invalidchar' : { color: '#f00' }, '.cm-matchingbracket' : { color: '#0b0' }, '.cm-nonmatchingbracket' : { color: '#a22' }, - '.cm-matchingtag' : { backgroundColor: 'rgba(255, 150, 0, 0.3)' }, + '.cm-matchingtag' : { backgroundColor: '#ff96004d' }, '.cm-quote' : { color: '#090' }, }, { dark: false }); \ No newline at end of file