Using themes

General idea

GMEdit supports custom themes.

These are written in CSS, can use custom images, and support inheritance.

Themes can change colors, icons, and make small layout changes.

For a list of existing themes, see theme list.

Installing themes

Themes are installed by placing their directories into "themes" directory in GMEdit's application data directory (%APPDATA%\AceGM\GMEdit\themes on Windows). You can quickly get to the directory by clicking "manage" next to theme list in Preferences.

Expected layout is like so:

themes/
themes/mytheme/
themes/mytheme/config.json
themes/mytheme/style.css

Themes will show up in Preferences after restarting GMEdit.

Making themes

A theme consists of a config.json file and one or more CSS files.

config.json structure is as following:

{
	"parentTheme": "dark",
	"stylesheets": ["one.css", "two.css"]
}

• parentTheme is a theme to inherit base styles from.

  Common choices are "default" (light theme) and "dark" (dark theme), but you can set this to any theme to make a sub-theme (for example, redefining code editor colors for an existing theme)

• stylesheets is an array of relative paths to your theme's CSS files (usually in the same directory).

Finding what to style

At any point of using GMEdit you can press Ctrl+Shift+I to open developer tools.

From this point onward it's not too unlike writing styles for websites - you find what you want using "Inspect element" button or the Elements panel, see what class it has, or see what existing styles apply to it and copy selectors to yours.

For code editor in particular, you can find styles quicker by opening the Console tab, typing

aceEditor.debugShowToken()

and pressing Enter - this will subsequently display the token type in status bar as you mouseover different elements. The selector for what is shown as comment.link would be

#main .gml .ace_comment.ace_link { }

Watching for changes

To see your changes applied "live", find your CSS file in Sources tab, right-click it, pick Save As, and pick the same CSS file. From this point onward, making changes to the styles in Sources or Elements panels will automatically change your file, saving you the trouble of copying new changes to it.

Alternatively, if you prefer using an external editor, you can tweak and execute the following snippet in Console tab to automatically update a stylesheet every second until the theme is changed via Preferences:

(function(rel) {
  var t = setInterval(function() {
      var q = document.querySelector(`link[href*="${rel}"]`);
        if (q) {
            q.href = /^(.+?)(\?t=.+)?$/g.exec(q.getAttribute("href"))[1] + "?t=" + (0|new Date)
        } else clearInterval(t);
    }, 1000);
})("yourtheme/style.css");

Porting existing themes

In /resources/app/theme-tools/ you can find a few small tools to aid with adapting existing GMS1/GMS2 themes. These take one or other form of input and produce CSS that you can copy-paste into your theme.

GMS2 generator is pretty straightforward. You might still want to set custom event name colors and such, but otherwise the theme should be good to use after initial conversion.

GMS1 generator does it's best, but GMS1 severely lacked in color options (not even highlighting local variables) so you'll need to split up the rules a bit and assign some new colors for it to make good use of GMEdit's features (see: local, sublocal, field, localfield).

Generic Ace themes can also be adapted with some effort, but are generally best scrapped for color palettes, as GameMaker color-codes different tokens fairly differently to Ace's theme system, thus a direct translation will usually look odd-ish at best.