f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-28 05:48:16 +00:00
Code Wiki Activity

darkbrewery

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-03-27 19:49:00 +01:00
parent 4bce4a9489
commit 1f2a329553
7 changed files with 125 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/components/codeEditor/codeEditor.jsx
View File

@@ -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();

2
client/components/codeEditor/codeEditor.less
View File

@@ -15,7 +15,7 @@
}
}
.codeEditor {
:where(.codeEditor) {
font-family: monospace;
height: 100%;
width:100%;

8
client/homebrew/editor/editor.less
View File

@@ -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 {

3
client/homebrew/editor/snippetbar/snippetbar.jsx
View File

@@ -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]) =>

134
themes/codeMirror/customThemes/darkbrewery.css
View File

@@ -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;
}
}
}
}
}

114
themes/codeMirror/customThemes/darkbrewery.js Normal file
View File

@@ -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 });

6
themes/codeMirror/customThemes/default.js
View File

@@ -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 });