mirror of
https://github.com/heyman/heynote.git
synced 2024-11-25 09:23:17 +01:00
Add a light theme.
Move common stuff into a base theme.
This commit is contained in:
Jonatan Heyman
parent
74bb800a4a
commit
8c059dc4be
@ -2,7 +2,9 @@ import { Annotation, EditorState, Compartment } from "@codemirror/state"
|
||||
import { EditorView, keymap, drawSelection } from "@codemirror/view"
|
||||
import { indentUnit, forceParsing } from "@codemirror/language"
|
||||
|
||||
import { nord } from "./theme/nord.mjs"
|
||||
import { heynoteLight } from "./theme/light.js"
|
||||
import { heynoteDark } from "./theme/dark.js"
|
||||
import { heynoteBase } from "./theme/base.js"
|
||||
import { customSetup } from "./setup.js"
|
||||
import { heynoteLang } from "./lang-heynote/heynote.js"
|
||||
import { noteBlockExtension } from "./block/note-block.js"
|
||||
@ -17,8 +19,11 @@ export class HeynoteEditor {
|
||||
heynoteKeymap,
|
||||
|
||||
//minimalSetup,
|
||||
|
||||
customSetup,
|
||||
nord,
|
||||
heynoteBase,
|
||||
heynoteDark,
|
||||
//heynoteLight,
|
||||
indentUnit.of(" "),
|
||||
EditorView.scrollMargins.of(f => {
|
||||
return {top: 80, bottom: 80}
|
||||
@ -28,6 +33,11 @@ export class HeynoteEditor {
|
||||
|
||||
// set cursor blink rate to 1 second
|
||||
drawSelection({cursorBlinkRate:1000}),
|
||||
|
||||
// add CSS class depending on dark/light theme
|
||||
EditorView.editorAttributes.of((view) => {
|
||||
return {class: view.state.facet(EditorView.darkTheme) ? "dark-theme" : "light-theme"}
|
||||
}),
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ body {
|
||||
color: #444;
|
||||
font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#editor {
|
||||
@ -20,18 +21,22 @@ body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.blocks-layer .block-even {
|
||||
width: 100%;
|
||||
/*background: #3f3b4b;*/
|
||||
background: #232537;
|
||||
}
|
||||
.blocks-layer .block-odd {
|
||||
width: 100%;
|
||||
/*background: rgb(57, 71, 77);*/
|
||||
background: #222f38;
|
||||
}
|
||||
|
||||
.light-theme .blocks-layer .block-even {
|
||||
background: #ffffff;
|
||||
}
|
||||
.light-theme .blocks-layer .block-odd {
|
||||
background: #f5f9f6;
|
||||
}
|
||||
|
||||
.block-start {
|
||||
/*background: rgb(0, 0, 0);
|
||||
height: 2px*/
|
||||
|
||||
26
heynote-codemirror/src/theme/base.js
Normal file
26
heynote-codemirror/src/theme/base.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { EditorView } from '@codemirror/view';
|
||||
|
||||
|
||||
export const heynoteBase = EditorView.theme({
|
||||
'.cm-scroller': {
|
||||
fontFamily: "Menlo, Monaco, 'Courier New', monospace",
|
||||
},
|
||||
'.cm-gutters': {
|
||||
padding: '0 2px 0 6px',
|
||||
},
|
||||
'.cm-foldGutter': {
|
||||
marginLeft: '4px',
|
||||
},
|
||||
'.cm-foldGutter .cm-gutterElement': {
|
||||
opacity: 0,
|
||||
transition: "opacity 400ms",
|
||||
},
|
||||
'.cm-gutters:hover .cm-gutterElement': {
|
||||
opacity: 1,
|
||||
},
|
||||
'.cm-cursor, .cm-dropCursor': {
|
||||
borderLeftWidth:'2px',
|
||||
height:'19px !important',
|
||||
marginTop:'-2px !important'
|
||||
},
|
||||
})
|
||||
@ -31,11 +31,7 @@ const commentColor = '#888d97';
|
||||
const matchingBracket = 'rgba(255,255,255,0.1)';
|
||||
|
||||
|
||||
/**
|
||||
The editor theme styles for Nord.
|
||||
*/
|
||||
|
||||
const nordTheme = /*@__PURE__*/EditorView.theme({
|
||||
const darkTheme = EditorView.theme({
|
||||
'&': {
|
||||
color: base04,
|
||||
backgroundColor: background
|
||||
@ -44,7 +40,7 @@ const nordTheme = /*@__PURE__*/EditorView.theme({
|
||||
caretColor: cursor,
|
||||
paddingTop: 0,
|
||||
},
|
||||
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor, borderLeftWidth:'2px', height:'19px !important', marginTop:'-2px !important' },
|
||||
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
|
||||
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
|
||||
'.cm-panels': { backgroundColor: darkBackground, color: base03 },
|
||||
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
|
||||
@ -77,7 +73,7 @@ const nordTheme = /*@__PURE__*/EditorView.theme({
|
||||
backgroundColor: 'rgba(0,0,0, 0.1)',
|
||||
//backgroundColor: 'transparent',
|
||||
color: lineNumberColor,
|
||||
border: 'none'
|
||||
border: 'none',
|
||||
},
|
||||
'.cm-activeLineGutter': {
|
||||
backgroundColor: "transparent",
|
||||
@ -107,23 +103,24 @@ const nordTheme = /*@__PURE__*/EditorView.theme({
|
||||
}
|
||||
}
|
||||
}, { dark: true });
|
||||
|
||||
/**
|
||||
The highlighting style for code in the Nord theme.
|
||||
The highlighting styles for the dark theme.
|
||||
*/
|
||||
const nordHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
||||
const darkHighlightStyle = HighlightStyle.define([
|
||||
{ tag: tags.keyword, color: base0A },
|
||||
{
|
||||
tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
|
||||
color: base08
|
||||
},
|
||||
{ tag: [tags.variableName], color: base07 },
|
||||
{ tag: [/*@__PURE__*/tags.function(tags.variableName)], color: base07 },
|
||||
{ tag: [tags.function(tags.variableName)], color: base07 },
|
||||
{ tag: [tags.labelName], color: base09 },
|
||||
{
|
||||
tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)],
|
||||
tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
|
||||
color: base0A
|
||||
},
|
||||
{ tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base0E },
|
||||
{ tag: [tags.definition(tags.name), tags.separator], color: base0E },
|
||||
{ tag: [tags.brace], color: base07 },
|
||||
{
|
||||
tag: [tags.annotation],
|
||||
@ -173,7 +170,7 @@ const nordHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
||||
textUnderlinePosition: 'under'
|
||||
},
|
||||
{
|
||||
tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)],
|
||||
tag: [tags.url, tags.escape, tags.special(tags.string)],
|
||||
color: base07
|
||||
},
|
||||
{ tag: [tags.meta], color: base08 },
|
||||
@ -183,7 +180,7 @@ const nordHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
||||
{ tag: tags.emphasis, fontStyle: 'italic', color: base0A },
|
||||
{ tag: tags.strikethrough, textDecoration: 'line-through' },
|
||||
{ tag: tags.heading, fontWeight: 'bold', color: base0A },
|
||||
{ tag: /*@__PURE__*/tags.special(tags.heading1), fontWeight: 'bold', color: base0A },
|
||||
{ tag: tags.special(tags.heading1), fontWeight: 'bold', color: base0A },
|
||||
{ tag: tags.heading1, fontWeight: 'bold', color: base0A },
|
||||
{
|
||||
tag: [tags.heading2, tags.heading3, tags.heading4],
|
||||
@ -194,7 +191,7 @@ const nordHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
||||
tag: [tags.heading5, tags.heading6],
|
||||
color: base0A
|
||||
},
|
||||
{ tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base0C },
|
||||
{ tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: base0C },
|
||||
{
|
||||
tag: [tags.processingInstruction, tags.inserted],
|
||||
color: base07
|
||||
@ -205,13 +202,11 @@ const nordHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
||||
},
|
||||
{ tag: tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` }
|
||||
]);
|
||||
/**
|
||||
Extension to enable the Nord theme (both the editor theme and
|
||||
the highlight style).
|
||||
*/
|
||||
const nord = [
|
||||
nordTheme,
|
||||
/*@__PURE__*/syntaxHighlighting(nordHighlightStyle)
|
||||
|
||||
|
||||
const heynoteDark = [
|
||||
darkTheme,
|
||||
syntaxHighlighting(darkHighlightStyle)
|
||||
];
|
||||
|
||||
export { nord, nordHighlightStyle, nordTheme };
|
||||
export { heynoteDark, darkHighlightStyle, darkTheme };
|
||||
30
heynote-codemirror/src/theme/light.js
Normal file
30
heynote-codemirror/src/theme/light.js
Normal file
@ -0,0 +1,30 @@
|
||||
import { EditorView } from '@codemirror/view';
|
||||
|
||||
export const heynoteLight = EditorView.theme({
|
||||
'&': {
|
||||
//color: base04,
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
'.cm-content': {
|
||||
//caretColor: cursor,
|
||||
paddingTop: 0,
|
||||
},
|
||||
'.cm-cursor, .cm-dropCursor': {
|
||||
borderLeftColor: '#000',
|
||||
},
|
||||
'.cm-gutters': {
|
||||
backgroundColor: 'rgba(0,0,0, 0.03)',
|
||||
//backgroundColor: 'transparent',
|
||||
color: 'rgba(0,0,0, 0.25)',
|
||||
border: 'none',
|
||||
},
|
||||
'.cm-activeLineGutter': {
|
||||
backgroundColor: "transparent",
|
||||
color: 'rgba(0,0,0, 0.6)'
|
||||
},
|
||||
'.cm-activeLine': {
|
||||
backgroundColor: "rgba(0,0,0, 0.04)",
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user