From 1053c7eb38e9ad69f61a51b28094364af0c5e11d Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Mon, 27 Jan 2025 08:55:39 +0100 Subject: [PATCH] 4 more themes --- packages/codemirror/themes.mjs | 69 ++++------------ packages/codemirror/themes/nord.mjs | 78 ++++++++++++++++++ packages/codemirror/themes/okaidia.mjs | 44 ++++++++++ packages/codemirror/themes/solarizedDark.mjs | 79 ++++++++++++++++++ packages/codemirror/themes/solarizedLight.mjs | 80 +++++++++++++++++++ 5 files changed, 297 insertions(+), 53 deletions(-) create mode 100644 packages/codemirror/themes/nord.mjs create mode 100644 packages/codemirror/themes/okaidia.mjs create mode 100644 packages/codemirror/themes/solarizedDark.mjs create mode 100644 packages/codemirror/themes/solarizedLight.mjs diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs index 33b09e8d..1792d22e 100644 --- a/packages/codemirror/themes.mjs +++ b/packages/codemirror/themes.mjs @@ -21,6 +21,10 @@ import gruvboxDark, { settings as gruvboxDarkSettings } from './themes/gruvboxDa import gruvboxLight, { settings as gruvboxLightSettings } from './themes/gruvboxLight.mjs'; import materialDark, { settings as materialDarkSettings } from './themes/materialDark.mjs'; import materialLight, { settings as materialLightSettings } from './themes/materialLight.mjs'; +import nord, { settings as nordSettings } from './themes/nord.mjs'; +import okaidia, { settings as okaidiaSettings } from './themes/okaidia.mjs'; +import solarizedDark, { settings as solarizedDarkSettings } from './themes/solarizedDark.mjs'; +import solarizedLight, { settings as solarizedLightSettings } from './themes/solarizedLight.mjs'; import { setTheme } from '@strudel/draw'; @@ -45,10 +49,10 @@ export const themes = { githubDark, gruvboxDark, materialDark, - /*nord, + nord, okaidia, solarizedDark, - sublime, + /*sublime, tokyoNight, tokyoNightStorm, vscodeDark, @@ -56,11 +60,11 @@ export const themes = { /*bbedit,*/ githubLight, gruvboxLight, - materialLight /* - noctisLilac, + materialLight, + //noctisLilac, solarizedLight, - tokyoNightDay, - xcodeLight, */, + //tokyoNightDay, + //xcodeLight, }; // lineBackground is background with 50% opacity, to make sure the selection below is visible @@ -115,53 +119,12 @@ export const settings = { gutterBackground: '#f2f1f8', gutterForeground: '#0c006b70', lineHighlight: '#e1def3', - }, - nord: { - background: '#2e3440', - lineBackground: '#2e344099', - foreground: '#FFFFFF', - caret: '#FFFFFF', - selection: '#3b4252', - selectionMatch: '#e5e9f0', - gutterBackground: '#2e3440', - gutterForeground: '#4c566a', - gutterActiveForeground: '#d8dee9', - lineHighlight: '#4c566a', - }, - okaidia: { - background: '#272822', - lineBackground: '#27282299', - foreground: '#FFFFFF', - caret: '#FFFFFF', - selection: '#49483E', - selectionMatch: '#49483E', - gutterBackground: '#272822', - gutterForeground: '#FFFFFF70', - lineHighlight: '#00000059', - }, - solarizedLight: { - light: true, - background: '#fdf6e3', - lineBackground: '#fdf6e399', - foreground: '#657b83', - caret: '#586e75', - selection: '#dfd9c8', - selectionMatch: '#dfd9c8', - gutterBackground: '#00000010', - gutterForeground: '#657b83', - lineHighlight: '#dfd9c8', - }, - solarizedDark: { - background: '#002b36', - lineBackground: '#002b3699', - foreground: '#93a1a1', - caret: '#839496', - selection: '#173541', - selectionMatch: '#aafe661a', - gutterBackground: '#00252f', - gutterForeground: '#839496', - lineHighlight: '#173541', - }, + },*/ + nord: nordSettings, + okaidia: okaidiaSettings, + solarizedLight: solarizedLightSettings, + solarizedDark: solarizedDarkSettings, + /* sublime: { background: '#303841', lineBackground: '#30384199', diff --git a/packages/codemirror/themes/nord.mjs b/packages/codemirror/themes/nord.mjs new file mode 100644 index 00000000..ce96bca5 --- /dev/null +++ b/packages/codemirror/themes/nord.mjs @@ -0,0 +1,78 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + background: '#2e3440', + lineBackground: '#2e344099', + foreground: '#FFFFFF', + caret: '#FFFFFF', + selection: '#3b4252', + selectionMatch: '#e5e9f0', + gutterBackground: '#2e3440', + gutterForeground: '#4c566a', + gutterActiveForeground: '#d8dee9', + lineHighlight: '#4c566a', +}; + +// Colors from https://www.nordtheme.com/docs/colors-and-palettes +export default createTheme({ + theme: 'dark', + settings: { + background: '#2e3440', + foreground: '#FFFFFF', + caret: '#FFFFFF', + selection: '#00000073', + selectionMatch: '#00000073', + gutterBackground: '#2e3440', + gutterForeground: '#4c566a', + gutterActiveForeground: '#d8dee9', + lineHighlight: '#4c566a29', + }, + styles: [ + { tag: t.keyword, color: '#5e81ac' }, + { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#88c0d0' }, + { tag: [t.variableName], color: '#8fbcbb' }, + { tag: [t.function(t.variableName)], color: '#8fbcbb' }, + { tag: [t.labelName], color: '#81a1c1' }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#5e81ac' }, + { tag: [t.definition(t.name), t.separator], color: '#a3be8c' }, + { tag: [t.brace], color: '#8fbcbb' }, + { tag: [t.annotation], color: '#d30102' }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b48ead' }, + { tag: [t.typeName, t.className], color: '#ebcb8b' }, + { tag: [t.operator, t.operatorKeyword], color: '#a3be8c' }, + { tag: [t.tagName], color: '#b48ead' }, + { tag: [t.squareBracket], color: '#bf616a' }, + { tag: [t.angleBracket], color: '#d08770' }, + { tag: [t.attributeName], color: '#ebcb8b' }, + { tag: [t.regexp], color: '#5e81ac' }, + { tag: [t.quote], color: '#b48ead' }, + { tag: [t.string], color: '#a3be8c' }, + { + tag: t.link, + color: '#a3be8c', + textDecoration: 'underline', + textUnderlinePosition: 'under', + }, + { tag: [t.url, t.escape, t.special(t.string)], color: '#8fbcbb' }, + { tag: [t.meta], color: '#88c0d0' }, + { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' }, + { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' }, + { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' }, + { + tag: [t.heading2, t.heading3, t.heading4], + fontWeight: 'bold', + color: '#5e81ac', + }, + { tag: [t.heading5, t.heading6], color: '#5e81ac' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' }, + { tag: [t.processingInstruction, t.inserted], color: '#8fbcbb' }, + { tag: [t.contentSeparator], color: '#ebcb8b' }, + { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` }, + ], +}); diff --git a/packages/codemirror/themes/okaidia.mjs b/packages/codemirror/themes/okaidia.mjs new file mode 100644 index 00000000..a6e32bd9 --- /dev/null +++ b/packages/codemirror/themes/okaidia.mjs @@ -0,0 +1,44 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + background: '#272822', + lineBackground: '#27282299', + foreground: '#FFFFFF', + caret: '#FFFFFF', + selection: '#49483E', + selectionMatch: '#49483E', + gutterBackground: '#272822', + gutterForeground: '#FFFFFF70', + lineHighlight: '#00000059', +}; + +export default createTheme({ + theme: 'dark', + settings: { + background: '#272822', + foreground: '#FFFFFF', + caret: '#FFFFFF', + selection: '#49483E', + selectionMatch: '#49483E', + gutterBackground: '#272822', + gutterForeground: '#FFFFFF70', + lineHighlight: '#0000003b', + }, + styles: [ + { tag: [t.comment, t.documentMeta], color: '#8292a2' }, + { tag: [t.number, t.bool, t.null, t.atom], color: '#ae81ff' }, + { tag: [t.attributeValue, t.className, t.name], color: '#e6db74' }, + { tag: [t.propertyName, t.attributeName], color: '#a6e22e' }, + { tag: [t.variableName], color: '#9effff' }, + { tag: [t.squareBracket], color: '#bababa' }, + { tag: [t.string, t.special(t.brace)], color: '#e6db74' }, + { tag: [t.regexp, t.className, t.typeName, t.definition(t.typeName)], color: '#66d9ef' }, + { + tag: [t.definition(t.variableName), t.definition(t.propertyName), t.function(t.variableName)], + color: '#fd971f', + }, + // { tag: t.keyword, color: '#f92672' }, + { tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket], color: '#f92672' }, + ], +}); diff --git a/packages/codemirror/themes/solarizedDark.mjs b/packages/codemirror/themes/solarizedDark.mjs new file mode 100644 index 00000000..c6b645f7 --- /dev/null +++ b/packages/codemirror/themes/solarizedDark.mjs @@ -0,0 +1,79 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + background: '#002b36', + lineBackground: '#002b3699', + foreground: '#93a1a1', + caret: '#839496', + selection: '#173541', + selectionMatch: '#aafe661a', + gutterBackground: '#00252f', + gutterForeground: '#839496', + lineHighlight: '#173541', +}; + +const c = { + background: '#002B36', + foreground: '#839496', + selection: '#004454AA', + selectionMatch: '#005A6FAA', + cursor: '#D30102', + dropdownBackground: '#00212B', + dropdownBorder: '#2AA19899', + activeLine: '#00cafe11', + matchingBracket: '#073642', + keyword: '#859900', + storage: '#93A1A1', + variable: '#268BD2', + parameter: '#268BD2', + function: '#268BD2', + string: '#2AA198', + constant: '#CB4B16', + type: '#859900', + class: '#268BD2', + number: '#D33682', + comment: '#586E75', + heading: '#268BD2', + invalid: '#DC322F', + regexp: '#DC322F', + tag: '#268BD2', +}; + +export default createTheme({ + theme: 'dark', + settings: { + background: c.background, + foreground: c.foreground, + caret: c.cursor, + selection: c.selection, + selectionMatch: c.selection, + gutterBackground: c.background, + gutterForeground: c.foreground, + gutterBorder: 'transparent', + lineHighlight: c.activeLine, + }, + styles: [ + { tag: t.keyword, color: c.keyword }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable }, + { tag: [t.propertyName], color: c.function }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string }, + { tag: [t.function(t.variableName), t.labelName], color: c.function }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant }, + { tag: [t.definition(t.name), t.separator], color: c.variable }, + { tag: [t.className], color: c.class }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number }, + { tag: [t.typeName], color: c.type, fontStyle: c.type }, + { tag: [t.operator, t.operatorKeyword], color: c.keyword }, + { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp }, + { tag: [t.meta, t.comment], color: c.comment }, + { tag: t.tagName, color: c.tag }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: c.heading }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable }, + { tag: t.invalid, color: c.invalid }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ], +}); diff --git a/packages/codemirror/themes/solarizedLight.mjs b/packages/codemirror/themes/solarizedLight.mjs new file mode 100644 index 00000000..e6e5ce83 --- /dev/null +++ b/packages/codemirror/themes/solarizedLight.mjs @@ -0,0 +1,80 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#fdf6e3', + lineBackground: '#fdf6e399', + foreground: '#657b83', + caret: '#586e75', + selection: '#dfd9c8', + selectionMatch: '#dfd9c8', + gutterBackground: '#00000010', + gutterForeground: '#657b83', + lineHighlight: '#dfd9c8', +} + +const c = { + background: '#FDF6E3', + foreground: '#657B83', + selection: '#EEE8D5', + selectionMatch: '#EEE8D5', + cursor: '#657B83', + dropdownBackground: '#EEE8D5', + dropdownBorder: '#D3AF86', + activeLine: '#3d392d11', + matchingBracket: '#EEE8D5', + keyword: '#859900', + storage: '#586E75', + variable: '#268BD2', + parameter: '#268BD2', + function: '#268BD2', + string: '#2AA198', + constant: '#CB4B16', + type: '#859900', + class: '#268BD2', + number: '#D33682', + comment: '#93A1A1', + heading: '#268BD2', + invalid: '#DC322F', + regexp: '#DC322F', + tag: '#268BD2', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: c.background, + foreground: c.foreground, + caret: c.cursor, + selection: c.selection, + selectionMatch: c.selectionMatch, + gutterBackground: c.background, + gutterForeground: c.foreground, + gutterBorder: 'transparent', + lineHighlight: c.activeLine, + }, + styles: [ + { tag: t.keyword, color: c.keyword }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable }, + { tag: [t.propertyName], color: c.function }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string }, + { tag: [t.function(t.variableName), t.labelName], color: c.function }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant }, + { tag: [t.definition(t.name), t.separator], color: c.variable }, + { tag: [t.className], color: c.class }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number }, + { tag: [t.typeName], color: c.type, fontStyle: c.type }, + { tag: [t.operator, t.operatorKeyword], color: c.keyword }, + { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp }, + { tag: [t.meta, t.comment], color: c.comment }, + { tag: t.tagName, color: c.tag }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: c.heading }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable }, + { tag: t.invalid, color: c.invalid }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ], +});