Dracula Theme for Oracle APEX Page Designer

Want Dracula Theme in Oracle APEX Page Designer? 🧛‍♂️ of course you do…

Good choice!🧄

Instructions

Here is what you need to do:

Install Violentmonkey by clicking on the one of the Installation options. Alternatively, If you are unable to install Violentmonkey, this method also works absolutely fine in Tampermonkey.
Open APEX
Click the Violentmonkey browser extension icon and click the ➕ icon
Replace all the code with this code and click Save & Close

// ==UserScript==
// @name         Oracle APEX Monaco Editor Theme Changer
// @namespace    http://tampermonkey.net/
// @version      24.2.1
// @description  Apply Custom themes to Monaco Editor in Oracle APEX
// @match        *://*/ords/*
// @match        *://*/pls/*
// @grant        GM_addStyle
// @author       Matt Mulvaney - Pretius
// @twitter      @Matt_Mulvaney
// ==/UserScript==

// ===== USER SETTINGS =====
const xyzUserTheme = 'dracula'; // Change this to switch themes
// ==========================

// Monaco Editor Theme Manager
const XYZMonacoThemeManager = (function() {
    // Private theme definitions
    const themes = {
    dracula: {
        base: "vs-dark",
        inherit: false,
        rules: [
        { background: "#282a36" },
        { foreground: "6272a4", token: "comment" },
        { foreground: "f1fa8c", token: "string" },
        { foreground: "bd93f9", token: "constant.numeric" },
        { foreground: "bd93f9", token: "constant.language" },
        { foreground: "bd93f9", token: "constant.character" },
        { foreground: "bd93f9", token: "constant.other" },
        { foreground: "ffb86c", token: "variable.other.readwrite.instance" },
        { foreground: "ff79c6", token: "constant.character.escaped" },
        { foreground: "ff79c6", token: "constant.character.escape" },
        { foreground: "ff79c6", token: "string source" },
        { foreground: "ff79c6", token: "string source.ruby" },
        { foreground: "ff79c6", token: "keyword" },
        { foreground: "ff79c6", token: "storage" },
        { foreground: "8be9fd", fontStyle: "italic", token: "storage.type" },
        { foreground: "50fa7b", fontStyle: "underline", token: "entity.name.class" },
        { foreground: "50fa7b", fontStyle: "italic underline", token: "entity.other.inherited-class" },
        { foreground: "50fa7b", token: "entity.name.function" },
        { foreground: "ffb86c", fontStyle: "italic", token: "variable.parameter" },
        { foreground: "ff79c6", token: "entity.name.tag" },
        { foreground: "50fa7b", token: "entity.other.attribute-name" },
        { foreground: "8be9fd", token: "support.function" },
        { foreground: "6be5fd", token: "support.constant" },
        { foreground: "66d9ef", fontStyle: " italic", token: "support.type" },
        { foreground: "66d9ef", fontStyle: " italic", token: "support.class" },
        { foreground: "f8f8f0", background: "ff79c6", token: "invalid" },
        { foreground: "f8f8f0", background: "bd93f9", token: "invalid.deprecated" },
        { foreground: "cfcfc2", token: "meta.structure.dictionary.json string.quoted.double.json" },
        { foreground: "6272a4", token: "meta.diff" },
        { foreground: "6272a4", token: "meta.diff.header" },
        { foreground: "ff79c6", token: "markup.deleted" },
        { foreground: "50fa7b", token: "markup.inserted" },
        { foreground: "e6db74", token: "markup.changed" },
        { foreground: "bd93f9", token: "constant.numeric.line-number.find-in-files - match" },
        { foreground: "e6db74", token: "entity.name.filename" },
        { foreground: "f83333", token: "message.error" },
        { foreground: "eeeeee", token: "punctuation.definition.string.begin.json - meta.structure.dictionary.value.json" },
        { foreground: "eeeeee", token: "punctuation.definition.string.end.json - meta.structure.dictionary.value.json" },
        { foreground: "8be9fd", token: "meta.structure.dictionary.json string.quoted.double.json" },
        { foreground: "f1fa8c", token: "meta.structure.dictionary.value.json string.quoted.double.json" },
        { foreground: "50fa7b", token: "meta meta meta meta meta meta meta.structure.dictionary.value string" },
        { foreground: "ffb86c", token: "meta meta meta meta meta meta.structure.dictionary.value string" },
        { foreground: "ff79c6", token: "meta meta meta meta meta.structure.dictionary.value string" },
        { foreground: "bd93f9", token: "meta meta meta meta.structure.dictionary.value string" },
        { foreground: "50fa7b", token: "meta meta meta.structure.dictionary.value string" },
        { foreground: "ffb86c", token: "meta meta.structure.dictionary.value string" },
        { foreground: "f8f8f2", token: "atom" },
        { foreground: "f8f8f2", token: "identifier" },
        { foreground: "50fa7b", token: "function" },
        { foreground: "f8f8f2", token: "delimiter" },
        { foreground: "ff79c6", token: "operator" },
        { foreground: "f8f8f2", token: "" },
        { foreground: "f8f8f2", token: "predefined" },
        { foreground: "bd93f9", token: "number" },
        { foreground: "ff79c6", token: "tag" },
        { foreground: "50fa7b", token: "attribute.name" },
        { foreground: "f1fa8c", token: "attribute.value" },
        { foreground: "6272a4", token: "comment.html" },
        { foreground: "f8f8f2", token: "text.html" }
        ],
        colors: {
        "editor.foreground": "#f8f8f2",
        "editor.background": "#282a36",
        "editor.selectionBackground": "#44475a",
        "editor.lineHighlightBackground": "#44475a",
        "editorCursor.foreground": "#f8f8f0",
        "editorWhitespace.foreground": "#3B3A32",
        "editorIndentGuide.activeBackground": "#9D550FB0",
        "editor.selectionHighlightBorder": "#222218"
        }
    },
    // You can add more themes here in the future
    };

    // APEX environment check
    function isApexEnvironmentValid() {
    return typeof apex !== 'undefined' &&
            typeof apex.env !== 'undefined' &&
            typeof apex.env.APP_ID !== 'undefined' &&
            parseInt(apex.env.APP_ID, 10) >= 3000 &&
            parseInt(apex.env.APP_ID, 10) <= 8999;
    }

    // Private methods
    function defineTheme(themeName) {
    const theme = themes[themeName];
    if (theme) {
        monaco.editor.defineTheme(`xyz-${themeName}`, theme);
    } else {
        console.error(`Theme '${themeName}' not found`);
    }
    }

    function switchTheme(themeName) {
    defineTheme(themeName);
    monaco.editor.setTheme(`xyz-${themeName}`);
    }

    // Public methods
    return {
    initializeEditor: function() {
        if (typeof monaco === 'object' && isApexEnvironmentValid()) {
        monaco.editor.onDidCreateEditor(() => {
            this.switchToTheme(xyzUserTheme);
        });
        this.switchToTheme(xyzUserTheme);
        } else {
        window.addEventListener('load', () => this.initializeEditor());
        }
    },
    switchToTheme: function(themeName) {
        setTimeout(() => switchTheme(themeName), 0);
    },
    addTheme: function(themeName, themeDefinition) {
        themes[themeName] = themeDefinition;
    }
    };
})();

// Initialize the Monaco Editor with the theme manager
XYZMonacoThemeManager.initializeEditor();