Customizing the Mini Micro code editor
Tags: miniscript, minimicro, programming, themes
Published: 2023-07-05 23:08:26

With the [recent release](https://dev.to/joestrout/announcing-mini-micro-12-28id) of [Mini Micro](https://miniscript.org/MiniMicro) v1.2, you can now customize the colors used in the built-in code editor!  This post will show you how, and point you to a [GitHub repo](https://github.com/JoeStrout/minimicro-editor-themes) where you can find some premade color themes.

## How it works

All this is documented [here](https://miniscript.org/wiki/Mini_Micro_code_editor#Customization) on the MiniScript wiki, but in brief, you just create a map of colors and assign it to `env.editorColors`.  Here's an example:

```
m = {}
m.codeBackground = "#333333"
m.noCodeBackground = "#000000"
m.lineNumber = "#666666"
m.caret = "#CCCCCCCC"
m.toolbarTint = "#CCCCFF"

m.text = {}
m.text.default = "#BBBBBB"
m.text.operator = "#AAAADD"
m.text.string = "#DDAAAA"
m.text.openString = "#FF0000"
m.text.identifier = "#BBBBBB"
m.text.comment = "#FFFFCC"
m.text.number = "#88FF88"
m.text.keyword = "#FF99FF"
m.text.colon = color.fuchsia
m.text.paren = ["#00FFFF", "#FF8800", "#CC44FF", "#00FF00"]
m.text.bracket = m.text.paren

env.editorColors = m
```

This example shows all the different elements that can be set.  Most of them are pretty obvious; `codeBackground` is the background color for any lines of code, and `noCodeBackground` is drawn after the end of a short program, where there is no code (not even blank lines) yet.  The `caret` is the vertical bar showing the insertion point; typically you want to use a translucent color here.  And `toolbarTint` is a color applied to the otherwise light-grey toolbar at the top of the screen.

The rest of the colors apply under a secondary map called `text`.  So, `text.operator` is the color used for operators like `+` and `*`, `text.number` is used for numeric literals, etc.

`text.paren` and `text.bracket` deserve special mention; each of these can be a list of colors.  The code editor cycles through the list for more deeply nested parentheses or square-brackets.  So if you have code like:

![Code with nested square brackets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw4jk56omhinx171lqhn.png)

...the outer square brackets are cyan, and the inner ones are orange, because those are the first two colors in the `text.bracket` list.

All the colors can be specified in HTML format, or as names from the `color` module, as explained [here](https://miniscript.org/wiki/Color).

## The editor-themes repo

We've started a community collection of themes for the Mini Micro code editor at [https://github.com/JoeStrout/minimicro-editor-themes](https://github.com/JoeStrout/minimicro-editor-themes).  The README file there explains how to browse and install the themes therein, either temporarily, or more permanently by loading them in your [startup script](https://miniscript.org/wiki/How_to_run_a_program_on_startup).

The collection is new and still quite small, but already has some great themes, such as this user-contributed "autumn" theme:

![Screen shot of autumn theme](https://github.com/JoeStrout/minimicro-editor-themes/blob/main/lib/theme-autumn.png?raw=true)

## Conclusion

Now you know how to customize the colors in your Mini Micro code editor.  What's your favorite theme?  Let me know in the comments below!