text

Colour themes or the same concept referred to by one of their million aliases (”colour themes”, “colour schemes”, “palettes”, “appearances”, “skins”, “looks”, “accents”) are an everyday part of using editors and development environments, experienced most closely when writing code or long-form content like articles, essays, screenplays, scientific papers, technical documentation, or other publishable material with applied syntax highlighting.

Just as we rhythmically move places, colleagues, creative projects, and furniture, a change in digital tapestry is a welcome one, as well. While the most dominant facade of any digital workplace is most likely the universally appreciated *desktop wallpaper*, the colour theme must be its next in line. I found myself spending quite some time on the lookout for new themes to use with whichever editor was primary at the time, from Coda to Sublime, from VS Code to Xcode, or even iA Writer and Ulysses. If Notion had support for more than a preset light and dark theme, I’d have been customising it from the start, too. After putting out the *Big Sur Theme Kit* with the re-design of this site, I wanted to have a space dedicated to these kind of shareable pieces, be it hand-crafted themes or other artwork.

images

*Theme Studio* is conceived as a platform offering a continuously curated collection of colour themes, accommodating multiple editors and their respective formats. Content can be searched and filtered by light and dark modes or by available formats — colour palettes are placed at the forefront to allow quickly matching a pick with personal preference and mood. A built-in preview allows getting an impression at first glance of how the theme and its syntax highlighting will look when installed, with options for different languages.

**The Studio can now be found at [/themes](/themes).**

**Additional Formats:** In its preview version, the Studio offers themes for Xcode, the primary development environment for Apple platforms, Swift, and Objective C. Following closely will be Visual Studio Code with its package format. Current contenders for additional support are iTerm, Terminal App, and Sublime.

**Theme Editor:** The project takes its first steps as a *theme directory*, laying out a private collection of themes to be viewed, shared, and downloaded. Its subsequent iteration will see the launch of the *Editor*, an interactive space to create new themes from a set of 10 base colours. Each one of the input colours is assigned to a group — like *keywords*, *constants*, *value types*, *reference types*, and more — each of which are then used to create additional derivative colours to make the final theme. Inside the editor, colours can be changed in real-time and the resulting mapping can be previewed directly with code samples.

**Theme Utility:** The Editor is, in essence, a front-end to the *Color Theme Utility* developed in parallel with this project, a dedicated command line utility to generate themes from colour palettes, convert between different theme formats, and options to inspect and unmap existing themes. The utility is also where the *Intermediate Theme Format* (`*.intertheme`) originated from, a format that encapsulates only the distinct colour values that make a theme — formats for specific editors or platforms are then created from this intermediate.

To enable the real-time requirement of the Editor as a web app, the utility (written in Swift) is integrated using [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly). More information on theme and colour generation and mapping can be found with documentation of the *Color Theme Utility* in its [project space](https://gitlab.com/apricum/color-theme-utility).

**Theme Submissions:** The *Studio* is planned as an interactive space. Visitors should be able to create their own themes, either from scratch using a ten colour palette and the integrated utility, or by customising and remixing existing themes from the directory. New creations can be submitted and added to the *Studio* — visitors can cast a vote for each theme they find appealing to rank them higher in the list, slowly evolving the project into a community platform with curator’s recommendations.

### How to install themes in Xcode?

Xcode themes are stored inside the *Library* folder at:

```bash
~/Library/Developer/Xcode/UserData/FontAndColorThemes
```

Once you’ve found a theme you’d like to install from the *Studio*, you select the package download for Xcode and copy it to Xcode’s `FontAndColorThemes` directory. Note that Xcode needs to be restarted to show newly installed themes or changes made to existing ones.

### How to select different themes in Xcode?

Themes can be changed in Xcode’s preferences (`⌘,`) under the *Themes* tab by selecting one from the list of items on the left-hand side.

Furthermore, Xcode (version 10 and newer) supports light and dark mode for its entire user interface and transitions automatically with the rest of the OS. Alongside changing its own appearance, Xcode also allows setting separate themes for light and dark mode. When selecting a theme while macOS is either in dark or light mode, these themes will be changed alongside the system when it changes from one appearance to another.

### How to change the font in Xcode themes?

In contrast to many other editors, Xcode stores font choice on a per theme basis and also once for each highlightable type. To change the font for a whole theme, first open Xcode preferences (`⌘,`), switch to the *Themes* tab and choose the theme to be enabled. You then have to change the font for all the items in the list — selecting multiple items at the same time allows you to update the font of multiple entries at the same time.

To begin, select all items in the list (`⌘A`) and change the used font with the panel at the bottom of the window. On top of the default font, you’ll also want to set fonts for special types, these are listed in the sections below. Usually, these types use an emphasised (often with heavier weight) variant of the main font. Select the following rows and change the font to an emphasised variant:

- Documentation Markup Keywords
- Marks
- Keywords

These types use a font for readable documentation, often a variable width font. Example: For a main font “Fira Code Regular”, a suitable choice for these types may be “Fira Sans Regular” or similar variant.

Select the following rows and change the font to an alternate variable width variant (optional):

- Documentation Markup

### What is the Intermediate theme format?

The intermediate format (`*.intertheme`) is a format created for exchanging and editing themes with only the content that essentially defines them: a mapping of colour values. This format is the serialised form of the type used internally by the Colour Theme Utility and is intended to act as lowest common denominator between all of the platform-specific formats of other editors that are supported by this project. The intermediate format uses JSON and can be viewed as a `Dictionary<String, Color>`, a straight mapping of colours by property names. Colours are stored as a tuple of red, green, and blue as floating point values (range of `0 ... 1`).

The launch of an interactive web application for browsing, creating, and customising diverse colour themes, usable with popular editors and development environments.

Open platform for creating, customising, and exchanging colour themes.

An interactive web application to browse, edit, and mix colour themes with support for popular editors and development environments. Ability to view curated themes, generate new themes from a collection of base colours, and package themes in various formats. Inter-op with the “Color Theme Utility”, a general purpose utility for working with theme files, embedded using WebAssembly.

August Saint Freytag

Concept and Experience Designer, Video and Story Artist

Theme Studio