Tutorials

Build Your Own Theme

| By Juraj

Themes define the colors of your background, font and markup. In Ulysses for Mac, you can create your own theme by modifying an existing one.

Go to Ulysses’ preferences and select the Markup tab. In the lower part of the window you’ll see all available themes – Ulysses standard themes and those you downloaded from our Style Exchange. Choose the one you like most, right-click and duplicate it.

Screenshot of the Markup tab of Ulysses for Mac’s Preferences. A theme has been right-clicked to reveal its context menu with the options “Duplicate”, “Export…” and “Reset…”.

Right-click again and choose “Edit….”. You can now name your theme and add an author. What you see below these input fields are the color palettes for both the light and the dark version of your theme. The first two swatches define the color of your editor background and the body text. The other color swatches are at your disposal for fine tuning your markup.

Screenshot of the color palette editor for themes

Clicking on a color swatch will open the color picker. You are absolutely free to choose whatever color you like. Changes of background and body text will instantly affect the preview of your theme. Additionally, select up to eleven accent colors you can later use for headings, emphasis, list, links and all the other available markup tags.

Screenshot of a color picker next to the color palette editor

You can also copy entire palettes from other installed themes, or even import a home-made palette. For this, click on the little gear icon in your theme’s preview.

Screenshot of the “Copy from…” menu of the color palette editor

Side note: There are several dedicated plugins and tools you can rely on to build your own color scheme. As an example, try Coolors - their web app is free.

When you’re confident with the color palette, click Done. Now you’ll see a table allowing you to shape the appearance of your markup into great detail. For both the light and the dark version of your theme, you can now define the color of the tags, the tagged text and, where required, a line highlight. Just click on the respective swatch to open a color selection panel. Furthermore you can determine the text style in the right-most column: bold, italic, underlined or strikethrough.

Screenshot of the color selection panel of a theme

You can make use of your palette’s colors in their pure version or in lighter and darker nuances. For example, you could display deep green text on a pastel green background for a link.

Combination possibilities are literally endless. You could even make markup characters virtually invisible by changing the tag color to your theme’s background color (not that we would recommend this).

As an example, let’s assume you want to see text marked Strong in bold letters, with decent tags and without color accentuation. Go the row Strong and click on tag color. In the color selection panel, choose a lighter nuance of your body text color. Use no color at all for text and highlight, by choosing the crossed out white box in the upper left corner. Then, make sure to select Bold in the Style column.

Screenshot of a completely customized theme in Preferences

Depending on the colors you chose for body text and background, text that was marked as strong will now in your editor look similar to this:

Screenshot showing off the new theme in the editor

You’ll probably find that it takes a little to play around and select the right colors for a harmonious result. If you’re happy with the look of your theme, consider sharing it with the community, making others happy, too.

For this, select yours in the list of themes, click the Share button on the bottom and select Share on Style Exchange. This will lead you directly to an upload page, where you can add tags and a description. The preview images for your theme are generated automatically, but by double-clicking you can exchange them with a manually taken picture of your choice. Push “Complete Upload”, and you’re done.

Build Your Own Theme

Themes define the colors of your background, font and markup. On the Mac, you can create your own.