Dark Mode Tips

A few people have written to ask how I created the dark mode screenshots for the Storyist 4 Sneak Peek post. Now that Storyist 4 is out, I thought I’d take a moment to describe that process (it’s straightforward) and offer some tips for using dark mode on Mojave.

In short, to create the screenshots, I simply combined different standard accent colors and desktop pictures.

Choosing the Accent Color and Desktop Picture

Mojave lets you choose the accent color that is used to tint the buttons and other controls in the system. You’ll find the setting in the General pane of the System Preferences window. The choices are Blue, Purple, Pink, Red, Orange, Yellow, Green, and Graphite.

The desktop pictures are available in the Desktop & Screensaver pane. Not surprisingly, Apple provides desktop pictures that look great with the different accent color options.

For the screenshots, I chose:

• The blue accent color with Mojave Night.
• The purple accent color with Flower 4.
• The orange accent color with Flower 5.
• The pink accent color with Flower 7.

If you click on the gallery above and compare the screenshots, you’ll notice a subtle effect: The hue of the toolbar and page background changes slightly to reflect the average color of the desktop image. You’ll get this effect with your own desktop backgrounds too, so experiment with photos from your albums.

Choosing the Text Editor Properties

By default, Storyist 4 displays light text on a dark background in dark mode. This is usually what you want if your project is just text. However, if you’re designing for print, or you want complete control of text color, you might want to see dark text on a light background. To accomplish this, open the Storyist Preferences window, select the Appearance pane, and select “Use light appearance” for the text editor.

As you see in the screenshot, you can also set the application appearance to be always light or always dark independent of the system appearance.

Special Considerations for Text in Dark Mode

When the text editor is in dark mode, text having the default text color (black) is automatically changed to white. However, text having another color will not change. You may run into this, for example, if you import text that is dark gray instead of black. You can easily change the text color to work in both light and dark mode by selecting the text and clicking the “Set Text Color Automatically” button in the font color chooser in the inspector.

If you have other questions, let me know. And good luck with your projects.

-Steve

Over the course of a draft, you probably type the same character combinations hundreds if not thousands of times. Why not let Storyist type them for you? Storyist can insert multi-line text snippets (bits of text) with just a few keystrokes.

Try this:

1. Make sure tab shortcuts are enabled.

2. Place the cursor at the start of a blank link.

3. Type “lorem” and then press the tab key.

When you press the tab key, Storyist replaces “lorem” with

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non libero vitae tortor ullamcorper pharetra. Suspendisse fringilla consequat augue, nec hendrerit orci tincidunt in. Ut leo nisl, bibendum quis porta sed, porta a leo. Aliquam et ante lorem. Nullam vel lectus tellus, quis luctus mi. Nam non eros sit amet sem ultrices consectetur eu malesuada felis. Mauris rhoncus interdum eros nec aliquam.

Now try this:

1. Place the cursor at the start of a blank link.
2. Type “na” and then press the tab key.

This time you’ll see the following:

What are the bubbles? Placeholders!

1. Press tab again to highlight the dialog bubble and type some dialog.

2. Press tab again to highlight the name bubble and type a character name.

3. Press tab again to highlight the end of the line and press return.

Here is an example:

Using the snippet editor, you can quickly define define your own snippets. To view the snippet editor, choose Storyist > Preferences and select the Text Editing pane.

To add a new snippet:

1. Click the + button.

2. Add a name and tab trigger (abbreviation).

3. Enter the replacement text.

To create a placeholder bubble, just wrap the placeholder text with <# and #> like this: "<#dialog#>?" <#name#> asked.<# #>

You might use snippets for:

• Character names

• Locations

• Dialog

• Terminology

Go ahead and experiment!

-Steve

You probably know that Storyist automatically saves copies your project as you write. Did you know you can interactively browse these saved versions and grab bits of text to paste into your current version?

Try it:

1. Open a project you’ve been working on.

2. Choose File > Revert To > Browse All Versions. This opens the Versions browser (shown above) and displays the current version of your project on the left and a stack of the previous versions on the right.

3. Click the arrow buttons to navigate through the stack of previous versions.

4. Click a previous version to enlarge it. The project view and search functions become active, and you can find what you’re looking for and copy it. After you exit the browser, you can paste the text into your current project.

If you’ve you made extensive changes you no longer want, or you inadvertently delete something important, you can restore your entire project to a previous version. Just navigate to the desired version and click the Restore button.

Time Machine

If your project is stored on your local hard drive, you can use the built-in Time Machine support to browse not only the versions on your local disk but also the ones stored on your remote Time Machine disk.

Follow the instructions in the Time Machine pane of the System Preferences window to get started.

iCloud

If your project is stored in iCloud, the Versions browser can show versions that were created on another device. Say you’re on your Mac and the changes you’re interested in were made on your iPad. No problem! Just open the browser in Storyist for Mac, locate the desired version, and click “Load Version.” You can now copy (or restore) from that version.

Powerful!