mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-15 07:38:28 +00:00
137 lines
3.9 KiB
JavaScript
137 lines
3.9 KiB
JavaScript
import { EditorView } from '@codemirror/view';
|
|
import { HighlightStyle, tags as t } from '@codemirror/highlight';
|
|
|
|
/*
|
|
Credits for color palette:
|
|
|
|
Author: Mattia Astorino (http://github.com/equinusocio)
|
|
Website: https://material-theme.site/
|
|
*/
|
|
|
|
const ivory = '#abb2bf',
|
|
stone = '#7d8799', // Brightened compared to original to increase contrast
|
|
invalid = '#ffffff',
|
|
darkBackground = '#21252b',
|
|
highlightBackground = 'rgba(0, 0, 0, 0.5)',
|
|
// background = '#292d3e',
|
|
background = 'transparent',
|
|
tooltipBackground = '#353a42',
|
|
selection = 'rgba(128, 203, 196, 0.5)',
|
|
cursor = '#ffcc00';
|
|
|
|
/// The editor theme styles for Material Palenight.
|
|
export const materialPalenightTheme = EditorView.theme(
|
|
{
|
|
// done
|
|
'&': {
|
|
color: '#ffffff',
|
|
backgroundColor: background,
|
|
fontSize: '15px',
|
|
'z-index': 11,
|
|
},
|
|
|
|
// done
|
|
'.cm-content': {
|
|
caretColor: cursor,
|
|
lineHeight: '22px',
|
|
},
|
|
'.cm-line': {
|
|
background: '#2C323699',
|
|
},
|
|
// done
|
|
'&.cm-focused .cm-cursor': {
|
|
backgroundColor: cursor,
|
|
width: '3px',
|
|
},
|
|
|
|
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
|
|
backgroundColor: selection,
|
|
},
|
|
|
|
'.cm-panels': { backgroundColor: darkBackground, color: '#ffffff' },
|
|
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
|
|
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
|
|
|
|
// done, use onedarktheme
|
|
'.cm-searchMatch': {
|
|
backgroundColor: '#72a1ff59',
|
|
outline: '1px solid #457dff',
|
|
},
|
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
backgroundColor: '#6199ff2f',
|
|
},
|
|
|
|
'.cm-activeLine': { backgroundColor: highlightBackground },
|
|
'.cm-selectionMatch': { backgroundColor: '#aafe661a' },
|
|
|
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
backgroundColor: '#bad0f847',
|
|
outline: '1px solid #515a6b',
|
|
},
|
|
|
|
// done
|
|
'.cm-gutters': {
|
|
background: 'transparent',
|
|
color: '#676e95',
|
|
border: 'none',
|
|
},
|
|
|
|
'.cm-activeLineGutter': {
|
|
backgroundColor: highlightBackground,
|
|
},
|
|
|
|
'.cm-foldPlaceholder': {
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
color: '#ddd',
|
|
},
|
|
|
|
'.cm-tooltip': {
|
|
border: 'none',
|
|
backgroundColor: tooltipBackground,
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
borderTopColor: 'transparent',
|
|
borderBottomColor: 'transparent',
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
borderTopColor: tooltipBackground,
|
|
borderBottomColor: tooltipBackground,
|
|
},
|
|
'.cm-tooltip-autocomplete': {
|
|
'& > ul > li[aria-selected]': {
|
|
backgroundColor: highlightBackground,
|
|
color: ivory,
|
|
},
|
|
},
|
|
},
|
|
{ dark: true },
|
|
);
|
|
|
|
/// The highlighting style for code in the Material Palenight theme.
|
|
export const materialPalenightHighlightStyle = HighlightStyle.define([
|
|
{ tag: t.keyword, color: '#c792ea' },
|
|
{ tag: t.operator, color: '#89ddff' },
|
|
{ tag: t.special(t.variableName), color: '#eeffff' },
|
|
{ tag: t.typeName, color: '#f07178' },
|
|
{ tag: t.atom, color: '#f78c6c' },
|
|
{ tag: t.number, color: '#ff5370' },
|
|
{ tag: t.definition(t.variableName), color: '#82aaff' },
|
|
{ tag: t.string, color: '#c3e88d' },
|
|
{ tag: t.special(t.string), color: '#f07178' },
|
|
{ tag: t.comment, color: stone },
|
|
{ tag: t.variableName, color: '#f07178' },
|
|
{ tag: t.tagName, color: '#ff5370' },
|
|
{ tag: t.bracket, color: '#a2a1a4' },
|
|
{ tag: t.meta, color: '#ffcb6b' },
|
|
{ tag: t.attributeName, color: '#c792ea' },
|
|
{ tag: t.propertyName, color: '#c792ea' },
|
|
{ tag: t.className, color: '#decb6b' },
|
|
{ tag: t.invalid, color: invalid },
|
|
]);
|
|
|
|
/// Extension to enable the Material Palenight theme (both the editor theme and
|
|
/// the highlight style).
|
|
// : Extension
|
|
export const materialPalenight = [materialPalenightTheme, materialPalenightHighlightStyle];
|