Add a light theme.

Move common stuff into a base theme.

heynote-codemirror/src/editor.js

@@ -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"}
+                }),
             ],
         })
 

heynote-codemirror/src/styles.css

@@ -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*/

heynote-codemirror/src/theme/base.js

@@ -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'
+    },
+})

heynote-codemirror/src/theme/dark.js

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

heynote-codemirror/src/theme/light.js

@@ -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)",
+    },
+})
+
+