Some cm improvements

src/cm/themes/index.js

@@ -12,6 +12,10 @@ import solarizedLight, {
 } from "./solarizedLight";
 import tokyoNight, { config as tokyoNightConfig } from "./tokyoNight";
 import tokyoNightDay, { config as tokyoNightDayConfig } from "./tokyoNightDay";
+import tomorrowNight, { config as tomorrowNightConfig } from "./tomorrowNight";
+import tomorrowNightBright, {
+	config as tomorrowNightBrightConfig,
+} from "./tomorrowNightBright";
 import vscodeDark, { config as vscodeDarkConfig } from "./vscodeDark";
 
 const oneDarkConfig = {
@@ -207,6 +211,20 @@ addTheme(
 	() => tokyoNight(),
 	tokyoNightConfig,
 );
+addTheme(
+	tomorrowNightConfig.name,
+	"Tomorrow Night",
+	!!tomorrowNightConfig.dark,
+	() => tomorrowNight(),
+	tomorrowNightConfig,
+);
+addTheme(
+	tomorrowNightBrightConfig.name,
+	"Tomorrow Night Bright",
+	!!tomorrowNightBrightConfig.dark,
+	() => tomorrowNightBright(),
+	tomorrowNightBrightConfig,
+);
 addTheme(
 	monokaiConfig.name,
 	"Monokai",

src/cm/themes/tomorrowNight.js

@@ -0,0 +1,155 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+// Palette adapted from Tomorrow Night (Chris Kempson)
+export const config = {
+	name: "tomorrowNight",
+	dark: true,
+	background: "#1D1F21",
+	foreground: "#C5C8C6",
+	selection: "#373B41",
+	cursor: "#AEAFAD",
+	dropdownBackground: "#1D1F21",
+	dropdownBorder: "#4B4E55",
+	activeLine: "#282A2E",
+	lineNumber: "#4B4E55",
+	lineNumberActive: "#C5C8C6",
+	matchingBracket: "#282A2E",
+	keyword: "#B294BB",
+	storage: "#B294BB",
+	variable: "#CC6666",
+	parameter: "#DE935F",
+	function: "#81A2BE",
+	string: "#B5BD68",
+	constant: "#DE935F",
+	type: "#F0C674",
+	class: "#F0C674",
+	number: "#DE935F",
+	comment: "#969896",
+	heading: "#81A2BE",
+	invalid: "#DF5F5F",
+	regexp: "#CC6666",
+	operator: "#8ABEB7",
+	tag: "#CC6666",
+};
+
+export const tomorrowNightTheme = EditorView.theme(
+	{
+		"&": {
+			color: config.foreground,
+			backgroundColor: config.background,
+		},
+
+		".cm-content": { caretColor: config.cursor },
+
+		".cm-cursor, .cm-dropCursor": { borderLeftColor: config.cursor },
+		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+			{ backgroundColor: config.selection },
+
+		".cm-panels": {
+			backgroundColor: config.dropdownBackground,
+			color: config.foreground,
+		},
+		".cm-panels.cm-panels-top": {
+			borderBottom: `1px solid ${config.dropdownBorder}`,
+		},
+		".cm-panels.cm-panels-bottom": {
+			borderTop: `1px solid ${config.dropdownBorder}`,
+		},
+
+		".cm-searchMatch": {
+			backgroundColor: config.dropdownBackground,
+			outline: `1px solid ${config.dropdownBorder}`,
+		},
+		".cm-searchMatch.cm-searchMatch-selected": {
+			backgroundColor: config.selection,
+		},
+
+		".cm-activeLine": { backgroundColor: config.activeLine },
+		".cm-selectionMatch": { backgroundColor: config.selection },
+
+		"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+			backgroundColor: config.matchingBracket,
+			outline: "none",
+		},
+
+		".cm-gutters": {
+			backgroundColor: config.background,
+			color: config.foreground,
+			border: "none",
+		},
+		".cm-activeLineGutter": { backgroundColor: config.background },
+
+		".cm-lineNumbers .cm-gutterElement": { color: config.lineNumber },
+		".cm-lineNumbers .cm-activeLineGutter": { color: config.lineNumberActive },
+
+		".cm-foldPlaceholder": {
+			backgroundColor: "transparent",
+			border: "none",
+			color: config.foreground,
+		},
+		".cm-tooltip": {
+			border: `1px solid ${config.dropdownBorder}`,
+			backgroundColor: config.dropdownBackground,
+			color: config.foreground,
+		},
+		".cm-tooltip .cm-tooltip-arrow:before": {
+			borderTopColor: "transparent",
+			borderBottomColor: "transparent",
+		},
+		".cm-tooltip .cm-tooltip-arrow:after": {
+			borderTopColor: config.foreground,
+			borderBottomColor: config.foreground,
+		},
+		".cm-tooltip-autocomplete": {
+			"& > ul > li[aria-selected]": {
+				background: config.selection,
+				color: config.foreground,
+			},
+		},
+	},
+	{ dark: config.dark },
+);
+
+export const tomorrowNightHighlightStyle = HighlightStyle.define([
+	{ tag: t.keyword, color: config.keyword },
+	{
+		tag: [t.name, t.deleted, t.character, t.macroName],
+		color: config.variable,
+	},
+	{ tag: [t.propertyName], color: config.function },
+	{
+		tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
+		color: config.string,
+	},
+	{ tag: [t.function(t.variableName), t.labelName], color: config.function },
+	{
+		tag: [t.color, t.constant(t.name), t.standard(t.name)],
+		color: config.constant,
+	},
+	{ tag: [t.definition(t.name), t.separator], color: config.variable },
+	{ tag: [t.className], color: config.class },
+	{
+		tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+		color: config.number,
+	},
+	{ tag: [t.typeName], color: config.type },
+	{ tag: [t.operator, t.operatorKeyword], color: config.operator },
+	{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
+	{ tag: [t.meta, t.comment], color: config.comment },
+	{ tag: t.tagName, color: config.tag },
+	{ tag: t.strong, fontWeight: "bold" },
+	{ tag: t.emphasis, fontStyle: "italic" },
+	{ tag: t.link, textDecoration: "underline" },
+	{ tag: t.heading, fontWeight: "bold", color: config.heading },
+	{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
+	{ tag: t.invalid, color: config.invalid },
+	{ tag: t.strikethrough, textDecoration: "line-through" },
+]);
+
+export function tomorrowNight() {
+	return [tomorrowNightTheme, syntaxHighlighting(tomorrowNightHighlightStyle)];
+}
+
+export default tomorrowNight;

src/cm/themes/tomorrowNightBright.js

@@ -0,0 +1,158 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+// Palette adapted from Tomorrow Night Bright (Chris Kempson)
+export const config = {
+	name: "tomorrowNightBright",
+	dark: true,
+	background: "#000000",
+	foreground: "#DEDEDE",
+	selection: "#424242",
+	cursor: "#9F9F9F",
+	dropdownBackground: "#000000",
+	dropdownBorder: "#343434",
+	activeLine: "#2A2A2A",
+	lineNumber: "#343434",
+	lineNumberActive: "#DEDEDE",
+	matchingBracket: "#2A2A2A",
+	keyword: "#C397D8",
+	storage: "#C397D8",
+	variable: "#D54E53",
+	parameter: "#E78C45",
+	function: "#7AA6DA",
+	string: "#B9CA4A",
+	constant: "#E78C45",
+	type: "#E7C547",
+	class: "#E7C547",
+	number: "#E78C45",
+	comment: "#969896",
+	heading: "#7AA6DA",
+	invalid: "#DF5F5F",
+	regexp: "#D54E53",
+	operator: "#70C0B1",
+	tag: "#D54E53",
+};
+
+export const tomorrowNightBrightTheme = EditorView.theme(
+	{
+		"&": {
+			color: config.foreground,
+			backgroundColor: config.background,
+		},
+
+		".cm-content": { caretColor: config.cursor },
+
+		".cm-cursor, .cm-dropCursor": { borderLeftColor: config.cursor },
+		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+			{ backgroundColor: config.selection },
+
+		".cm-panels": {
+			backgroundColor: config.dropdownBackground,
+			color: config.foreground,
+		},
+		".cm-panels.cm-panels-top": {
+			borderBottom: `1px solid ${config.dropdownBorder}`,
+		},
+		".cm-panels.cm-panels-bottom": {
+			borderTop: `1px solid ${config.dropdownBorder}`,
+		},
+
+		".cm-searchMatch": {
+			backgroundColor: config.dropdownBackground,
+			outline: `1px solid ${config.dropdownBorder}`,
+		},
+		".cm-searchMatch.cm-searchMatch-selected": {
+			backgroundColor: config.selection,
+		},
+
+		".cm-activeLine": { backgroundColor: config.activeLine },
+		".cm-selectionMatch": { backgroundColor: config.selection },
+
+		"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+			backgroundColor: config.matchingBracket,
+			outline: "none",
+		},
+
+		".cm-gutters": {
+			backgroundColor: config.background,
+			color: config.foreground,
+			border: "none",
+		},
+		".cm-activeLineGutter": { backgroundColor: config.background },
+
+		".cm-lineNumbers .cm-gutterElement": { color: config.lineNumber },
+		".cm-lineNumbers .cm-activeLineGutter": { color: config.lineNumberActive },
+
+		".cm-foldPlaceholder": {
+			backgroundColor: "transparent",
+			border: "none",
+			color: config.foreground,
+		},
+		".cm-tooltip": {
+			border: `1px solid ${config.dropdownBorder}`,
+			backgroundColor: config.dropdownBackground,
+			color: config.foreground,
+		},
+		".cm-tooltip .cm-tooltip-arrow:before": {
+			borderTopColor: "transparent",
+			borderBottomColor: "transparent",
+		},
+		".cm-tooltip .cm-tooltip-arrow:after": {
+			borderTopColor: config.foreground,
+			borderBottomColor: config.foreground,
+		},
+		".cm-tooltip-autocomplete": {
+			"& > ul > li[aria-selected]": {
+				background: config.selection,
+				color: config.foreground,
+			},
+		},
+	},
+	{ dark: config.dark },
+);
+
+export const tomorrowNightBrightHighlightStyle = HighlightStyle.define([
+	{ tag: t.keyword, color: config.keyword },
+	{
+		tag: [t.name, t.deleted, t.character, t.macroName],
+		color: config.variable,
+	},
+	{ tag: [t.propertyName], color: config.function },
+	{
+		tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
+		color: config.string,
+	},
+	{ tag: [t.function(t.variableName), t.labelName], color: config.function },
+	{
+		tag: [t.color, t.constant(t.name), t.standard(t.name)],
+		color: config.constant,
+	},
+	{ tag: [t.definition(t.name), t.separator], color: config.variable },
+	{ tag: [t.className], color: config.class },
+	{
+		tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+		color: config.number,
+	},
+	{ tag: [t.typeName], color: config.type },
+	{ tag: [t.operator, t.operatorKeyword], color: config.operator },
+	{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
+	{ tag: [t.meta, t.comment], color: config.comment },
+	{ tag: t.tagName, color: config.tag },
+	{ tag: t.strong, fontWeight: "bold" },
+	{ tag: t.emphasis, fontStyle: "italic" },
+	{ tag: t.link, textDecoration: "underline" },
+	{ tag: t.heading, fontWeight: "bold", color: config.heading },
+	{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
+	{ tag: t.invalid, color: config.invalid },
+	{ tag: t.strikethrough, textDecoration: "line-through" },
+]);
+
+export function tomorrowNightBright() {
+	return [
+		tomorrowNightBrightTheme,
+		syntaxHighlighting(tomorrowNightBrightHighlightStyle),
+	];
+}
+
+export default tomorrowNightBright;