misc_pterodactyl-panel/resources/scripts/components/elements/EditorTheme.ts

import { EditorView } from '@codemirror/view';
import { Extension } from '@codemirror/state';
import { HighlightStyle, tags as t } from '@codemirror/highlight';

const highlightBackground = 'transparent';
const background = '#1F2430';
const selection = '#34455A';
const cursor = '#FFCC66';

export const ayuMirageTheme = EditorView.theme({
    '&': {
        color: '#CBCCC6',
        backgroundColor: background,
    },

    '.cm-content': {
        caretColor: cursor,
    },

    '&.cm-focused .cm-cursor': { borderLeftColor: cursor },
    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': { backgroundColor: selection },

    '.cm-panels': { backgroundColor: '#232834', color: '#CBCCC6' },
    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },

    '.cm-searchMatch': {
        backgroundColor: '#72a1ff59',
        outline: '1px solid #457dff',
    },
    '.cm-searchMatch.cm-searchMatch-selected': {
        backgroundColor: '#6199ff2f',
    },

    '.cm-activeLine': { backgroundColor: highlightBackground },
    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },

    '.cm-matchingBracket, .cm-nonmatchingBracket': {
        backgroundColor: '#bad0f847',
        outline: '1px solid #515a6b',
    },

    '.cm-gutters': {
        backgroundColor: 'transparent',
        color: '#FF3333',
        border: 'none',
    },

    '.cm-gutterElement': {
        color: 'rgba(61, 66, 77, 99)',
    },

    '.cm-activeLineGutter': {
        backgroundColor: highlightBackground,
    },

    '.cm-foldPlaceholder': {
        backgroundColor: 'transparent',
        border: 'none',
        color: '#ddd',
    },

    '.cm-tooltip': {
        border: '1px solid #181a1f',
        backgroundColor: '#232834',
    },
    '.cm-tooltip-autocomplete': {
        '& > ul > li[aria-selected]': {
            backgroundColor: highlightBackground,
            color: '#CBCCC6',
        },
    },
}, { dark: true });

export const ayuMirageHighlightStyle = HighlightStyle.define([
    {
        tag: t.keyword,
        color: '#FFA759',
    },
    {
        tag: [ t.name, t.deleted, t.character, t.propertyName, t.macroName ],
        color: '#5CCFE6',
    },
    {
        tag: [ t.function(t.variableName), t.labelName ],
        color: '#CBCCC6',
    },
    {
        tag: [ t.color, t.constant(t.name), t.standard(t.name) ],
        color: '#F29E74',
    },
    {
        tag: [ t.definition(t.name), t.separator ],
        color: '#CBCCC6B3',
    },
    {
        tag: [ t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace ],
        color: '#FFCC66',
    },
    {
        tag: [ t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string) ],
        color: '#5CCFE6',
    },
    {
        tag: [ t.meta, t.comment ],
        color: '#5C6773',
    },
    {
        tag: t.strong,
        fontWeight: 'bold',
    },
    {
        tag: t.emphasis,
        fontStyle: 'italic',
    },
    {
        tag: t.strikethrough,
        textDecoration: 'line-through',
    },
    {
        tag: t.link,
        color: '#FF3333',
        textDecoration: 'underline',
    },
    {
        tag: t.heading,
        fontWeight: 'bold',
        color: '#BAE67E',
    },
    {
        tag: [ t.atom, t.bool, t.special(t.variableName) ],
        color: '#5CCFE6',
    },
    {
        tag: [ t.processingInstruction, t.string, t.inserted ],
        color: '#BAE67E',
    },
    {
        tag: t.invalid,
        color: '#FF3333',
    },
]);

export const ayuMirage: Extension = [ ayuMirageTheme, ayuMirageHighlightStyle ];