From 63f9f6cba0e2da056864cb8725c051ad95c80b90 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Mon, 27 Jan 2025 08:34:54 +0100 Subject: [PATCH] 5 more themes --- packages/codemirror/themes.mjs | 79 +++++---------------- packages/codemirror/themes/duotoneDark.mjs | 42 +++++++++++ packages/codemirror/themes/duotoneLight.mjs | 45 ++++++++++++ packages/codemirror/themes/eclipse.mjs | 46 ++++++++++++ packages/codemirror/themes/githubDark.mjs | 43 +++++++++++ packages/codemirror/themes/githubLight.mjs | 45 ++++++++++++ 6 files changed, 238 insertions(+), 62 deletions(-) create mode 100644 packages/codemirror/themes/duotoneDark.mjs create mode 100644 packages/codemirror/themes/duotoneLight.mjs create mode 100644 packages/codemirror/themes/eclipse.mjs create mode 100644 packages/codemirror/themes/githubDark.mjs create mode 100644 packages/codemirror/themes/githubLight.mjs diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs index e4c25a9b..84abfd8b 100644 --- a/packages/codemirror/themes.mjs +++ b/packages/codemirror/themes.mjs @@ -44,6 +44,11 @@ import aura, { settings as auraSettings } from './themes/aura.mjs'; import bespin, { settings as bespinSettings } from './themes/bespin.mjs'; import darcula, { settings as darculaSettings } from './themes/darcula.mjs'; import dracula, { settings as draculaSettings } from './themes/dracula.mjs'; +import duotoneDark, { settings as duotoneDarkSettings } from './themes/duotoneDark.mjs'; +import duotoneLight, { settings as duotoneLightSettings } from './themes/duotoneLight.mjs'; +import eclipse, { settings as eclipseSettings } from './themes/eclipse.mjs'; +import githubDark, { settings as githubDarkSettings } from './themes/githubDark.mjs'; +import githubLight, { settings as githubLightSettings } from './themes/githubLight.mjs'; import { setTheme } from '@strudel/draw'; export const themes = { @@ -61,10 +66,11 @@ export const themes = { bespin, darcula, dracula, - /*duotoneDark, + duotoneDark, + duotoneLight, eclipse, githubDark, - gruvboxDark, + /*gruvboxDark, materialDark, nord, okaidia, @@ -73,16 +79,15 @@ export const themes = { tokyoNight, tokyoNightStorm, vscodeDark, - xcodeDark, - bbedit, - duotoneLight, - githubLight, + xcodeDark,*/ + /*bbedit,*/ + githubLight /* gruvboxLight, materialLight, noctisLilac, solarizedLight, tokyoNightDay, - xcodeLight, */ + xcodeLight, */, }; // lineBackground is background with 50% opacity, to make sure the selection below is visible @@ -115,62 +120,12 @@ export const settings = { bespin: bespinSettings, darcula: darculaSettings, dracula: draculaSettings, + duotoneLight: duotoneLightSettings, + duotoneDark: duotoneDarkSettings, + eclipse: eclipseSettings, + githubLight: githubLightSettings, + githubDark: githubDarkSettings, /* - duotoneLight: { - light: true, - background: '#faf8f5', - lineBackground: '#faf8f599', - foreground: '#b29762', - caret: '#93abdc', - selection: '#e3dcce', - selectionMatch: '#e3dcce', - gutterBackground: '#faf8f5', - gutterForeground: '#cdc4b1', - gutterBorder: 'transparent', - lineHighlight: '#EFEFEF', - }, - duotoneDark: { - background: '#2a2734', - lineBackground: '#2a273499', - foreground: '#6c6783', - caret: '#ffad5c', - selection: 'rgba(255, 255, 255, 0.1)', - gutterBackground: '#2a2734', - gutterForeground: '#545167', - lineHighlight: '#36334280', - }, - eclipse: { - light: true, - background: '#fff', - lineBackground: '#ffffff99', - foreground: '#000', - caret: '#FFFFFF', - selection: '#d7d4f0', - selectionMatch: '#d7d4f0', - gutterBackground: '#f7f7f7', - gutterForeground: '#999', - lineHighlight: '#e8f2ff', - gutterBorder: 'transparent', - }, - githubLight: { - light: true, - background: '#fff', - lineBackground: '#ffffff99', - foreground: '#24292e', - selection: '#BBDFFF', - selectionMatch: '#BBDFFF', - gutterBackground: '#fff', - gutterForeground: '#6e7781', - }, - githubDark: { - background: '#0d1117', - lineBackground: '#0d111799', - foreground: '#c9d1d9', - caret: '#c9d1d9', - selection: '#003d73', - selectionMatch: '#003d73', - lineHighlight: '#36334280', - }, gruvboxDark: { background: '#282828', lineBackground: '#28282899', diff --git a/packages/codemirror/themes/duotoneDark.mjs b/packages/codemirror/themes/duotoneDark.mjs new file mode 100644 index 00000000..51e04841 --- /dev/null +++ b/packages/codemirror/themes/duotoneDark.mjs @@ -0,0 +1,42 @@ +/** + * @name duotone + * @author Bram de Haan + * by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes) + */ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + background: '#2a2734', + lineBackground: '#2a273499', + foreground: '#6c6783', + caret: '#ffad5c', + selection: 'rgba(255, 255, 255, 0.1)', + gutterBackground: '#2a2734', + gutterForeground: '#545167', + lineHighlight: '#36334280', +}; + +export default createTheme({ + theme: 'dark', + settings: { + background: '#2a2734', + foreground: '#6c6783', + caret: '#ffad5c', + selection: '#91ff6c26', + selectionMatch: '#91ff6c26', + gutterBackground: '#2a2734', + gutterForeground: '#545167', + lineHighlight: '#36334280', + }, + styles: [ + { tag: [t.comment, t.bracket], color: '#6c6783' }, + { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' }, + { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' }, + { tag: [t.typeName, t.url], color: '#7a63ee' }, + { tag: t.operator, color: '#ffad5c' }, + { tag: t.string, color: '#ffb870' }, + { tag: [t.propertyName], color: '#9a86fd' }, + { tag: [t.unit, t.punctuation], color: '#e09142' }, + ], +}); diff --git a/packages/codemirror/themes/duotoneLight.mjs b/packages/codemirror/themes/duotoneLight.mjs new file mode 100644 index 00000000..f7b0214b --- /dev/null +++ b/packages/codemirror/themes/duotoneLight.mjs @@ -0,0 +1,45 @@ +/** + * @name duotone + * @author Bram de Haan + * by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes) + */ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#faf8f5', + lineBackground: '#faf8f599', + foreground: '#b29762', + caret: '#93abdc', + selection: '#e3dcce', + selectionMatch: '#e3dcce', + gutterBackground: '#faf8f5', + gutterForeground: '#cdc4b1', + gutterBorder: 'transparent', + lineHighlight: '#EFEFEF', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#faf8f5', + foreground: '#b29762', + caret: '#93abdc', + selection: '#e3dcce', + selectionMatch: '#e3dcce', + gutterBackground: '#faf8f5', + gutterForeground: '#cdc4b1', + gutterBorder: 'transparent', + lineHighlight: '#ddceb154', + }, + styles: [ + { tag: [t.comment, t.bracket], color: '#b6ad9a' }, + { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' }, + { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' }, + { tag: [t.typeName, t.url, t.string], color: '#896724' }, + { tag: [t.operator, t.string], color: '#1659df' }, + { tag: [t.propertyName], color: '#b29762' }, + { tag: [t.unit, t.punctuation], color: '#063289' }, + ], +}); diff --git a/packages/codemirror/themes/eclipse.mjs b/packages/codemirror/themes/eclipse.mjs new file mode 100644 index 00000000..8082b59d --- /dev/null +++ b/packages/codemirror/themes/eclipse.mjs @@ -0,0 +1,46 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#fff', + lineBackground: '#ffffff99', + foreground: '#000', + caret: '#FFFFFF', + selection: '#d7d4f0', + selectionMatch: '#d7d4f0', + gutterBackground: '#f7f7f7', + gutterForeground: '#999', + lineHighlight: '#e8f2ff', + gutterBorder: 'transparent', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#fff', + foreground: '#000', + caret: '#FFFFFF', + selection: '#d7d4f0', + selectionMatch: '#d7d4f0', + gutterBackground: '#f7f7f7', + gutterForeground: '#999', + lineHighlight: '#006fff1c', + gutterBorder: 'transparent', + }, + styles: [ + { tag: [t.comment], color: '#3F7F5F' }, + { tag: [t.documentMeta], color: '#FF1717' }, + { tag: t.keyword, color: '#7F0055', fontWeight: 'bold' }, + { tag: t.atom, color: '#00f' }, + { tag: t.number, color: '#164' }, + { tag: t.propertyName, color: '#164' }, + { tag: [t.variableName, t.definition(t.variableName)], color: '#0000C0' }, + { tag: t.function(t.variableName), color: '#0000C0' }, + { tag: t.string, color: '#2A00FF' }, + { tag: t.operator, color: 'black' }, + { tag: t.tagName, color: '#170' }, + { tag: t.attributeName, color: '#00c' }, + { tag: t.link, color: '#219' }, + ], +}); diff --git a/packages/codemirror/themes/githubDark.mjs b/packages/codemirror/themes/githubDark.mjs new file mode 100644 index 00000000..b8a0b17e --- /dev/null +++ b/packages/codemirror/themes/githubDark.mjs @@ -0,0 +1,43 @@ +/** + * @name github + */ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + background: '#0d1117', + lineBackground: '#0d111799', + foreground: '#c9d1d9', + caret: '#c9d1d9', + selection: '#003d73', + selectionMatch: '#003d73', + lineHighlight: '#36334280', +}; + +export default createTheme({ + theme: 'dark', + settings: { + background: '#0d1117', + foreground: '#c9d1d9', + caret: '#c9d1d9', + selection: '#003d73', + selectionMatch: '#003d73', + lineHighlight: '#36334280', + }, + styles: [ + { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' }, + { tag: [t.comment, t.bracket], color: '#8b949e' }, + { tag: [t.className, t.propertyName], color: '#d2a8ff' }, + { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#79c0ff' }, + { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' }, + { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' }, + { tag: [t.name, t.quote], color: '#7ee787' }, + { tag: [t.heading, t.strong], color: '#d2a8ff', fontWeight: 'bold' }, + { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' }, + { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.invalid, color: '#f97583' }, + ], +}); diff --git a/packages/codemirror/themes/githubLight.mjs b/packages/codemirror/themes/githubLight.mjs new file mode 100644 index 00000000..382c7ac6 --- /dev/null +++ b/packages/codemirror/themes/githubLight.mjs @@ -0,0 +1,45 @@ +/** + * @name github + */ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#fff', + lineBackground: '#ffffff99', + foreground: '#24292e', + selection: '#BBDFFF', + selectionMatch: '#BBDFFF', + gutterBackground: '#fff', + gutterForeground: '#6e7781', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#fff', + foreground: '#24292e', + selection: '#BBDFFF', + selectionMatch: '#BBDFFF', + gutterBackground: '#fff', + gutterForeground: '#6e7781', + }, + styles: [ + { tag: [t.standard(t.tagName), t.tagName], color: '#116329' }, + { tag: [t.comment, t.bracket], color: '#6a737d' }, + { tag: [t.className, t.propertyName], color: '#6f42c1' }, + { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' }, + { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' }, + { tag: [t.string, t.meta, t.regexp], color: '#032f62' }, + { tag: [t.name, t.quote], color: '#22863a' }, + { tag: [t.heading, t.strong], color: '#24292e', fontWeight: 'bold' }, + { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' }, + { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' }, + { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.invalid, color: '#cb2431' }, + ], +});