mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 13:48:40 +00:00
4 more themes
This commit is contained in:
Felix Roos
parent
c09b590cf6
commit
1053c7eb38
69
packages/codemirror/themes.mjs
vendored
69
packages/codemirror/themes.mjs
vendored
@ -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',
|
||||
|
||||
78
packages/codemirror/themes/nord.mjs
vendored
Normal file
78
packages/codemirror/themes/nord.mjs
vendored
Normal file
@ -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` },
|
||||
],
|
||||
});
|
||||
44
packages/codemirror/themes/okaidia.mjs
vendored
Normal file
44
packages/codemirror/themes/okaidia.mjs
vendored
Normal file
@ -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' },
|
||||
],
|
||||
});
|
||||
79
packages/codemirror/themes/solarizedDark.mjs
vendored
Normal file
79
packages/codemirror/themes/solarizedDark.mjs
vendored
Normal file
@ -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' },
|
||||
],
|
||||
});
|
||||
80
packages/codemirror/themes/solarizedLight.mjs
vendored
Normal file
80
packages/codemirror/themes/solarizedLight.mjs
vendored
Normal file
@ -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' },
|
||||
],
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user