Appearance

< All Topics
Print

Appearance

smartChord offers a wide range of options to change the appearance to suit your taste. There are different app themes to change the colors of the app’s screens or there are various color schemes that associate colors with notes.

The s.mart songbook offers additional options for customizing the appearance to your own taste.

Line height

The line height option controls the vertical space between the lines of the text in a song. Use it to optimize readability or fit more content on the screen. A default setting applies to all songs, but you can customize it for each song individually. If no specific value is set, the default line height is used. Setting a higher value increases spacing for better readability, while a lower value helps fit more lines on the screen.

The line height option is reachable in the “Appearance” settings. If you want to use the option more often, you can add it to the toolbar.

Light or dark mode

Independent from the app themes which provide dark and light themes, the songbook does have its own dark mode. The dark mode shows the song with a dark background in a dark color scheme. It could be the better choice for your live performance in the dark pub or to reduce battery consumption. You can change this mode in the ‘Songbook appearance’ settings.

Color variants

You can customize the colors of the songbook sections according to your taste or possible visual impairment. The Appearance settings allows to define a color set for light and dark mode and also for the printout. You can select one of the predefined color variants and customize it if you wish. Separate text and background colors are possible for:

  • Verse
  • Chorus
  • Pre-Chorus
  • Bridge
  • Interlude
  • Highlight
  • Default (all other texts)
  • Chords color

There is a preview screen for about 40 predefined color variants:

🎨 Text color

The Songbook allows to colorize text in your songs. Coloring text helps you stay organized, focused, and expressive — whether you’re singing solo or with others.

✅ Highlight key sections like chorus, bridge, or vocal cues
✅ Make songs easier to read on stage or in rehearsals
✅ Personalize your layout with your own color style
✅ Save time by quickly spotting important lines

🎤 Singing in a group or duet?
Use different colors to show who sings which part — perfect for duets, harmonies, or call-and-response sections. Everyone sees their role at a glance.

There are two ways to change the color of the songtext.

Color words

You can highlight individual words or entire text passages using any color you like.

There are two ways to apply color:

  1. Using the Songbook Editor – Insert color definition lines directly beneath the lyrics line.
  2. Using the contextual menu in the Songbook – Select the desired text and choose ‘Color’ from the menu. This will automatically insert the corresponding color definition line below the text.

⚠️ Color definition lines are not visible in the Songbook view, but can be seen and edited in the Songbook Editor.

🧪 Example:

C         G             Am             F
This is a sample lyrics line below the chord line.
^         ^red   ^green    ^
C         G             Am             F
This is a sample lyrics line below the chord line.

📏 Rules for Color Definition Lines:

  • A color definition line must be placed directly below the text line it modifies.
  • It must start with a caret (^).
  • Every caret marks a position in the text where a color starts or ends (including).
  • A HTML color name (e.g. red) or hexadecimal color code (e.g. #4491ff) must follow the caret without spaces.
  • A color continues until the next caret.
  • You can start a new color immediately after ending the previous one using another caret and color.
  • The minimum length of a colored section is equal to the length of the color name.
  • If no ending caret is given, the color continues to the end of the line.

Color lines

There are two directives for changing the color of the text or its background. The directive {textcolor:color} changes the color of the text that follows. The directive {textcolor} without a color value resets the text color to the previous color. The directive {background:color} changes the background color of the text that follows. The directive {background} without a color value resets the background color to the previous background color. Please note that these directives cannot be mixed.

The color value must either be a valid HTML color name or a hexadecimal color code, such as #4491ff.

{textcolor:RED}
The directive {textcolor:RED} sets the text color to RED.
The text color is valid ...
{textcolor:BLUE}
... until the directive {textcolor} sets or resets a new text color 
{textcolor}
The text color has been reset to the previous
{textcolor}
The text color has been reset to the default

{background:maroon}
The directive {background:maroon} sets the text background color to maroon.
{textcolor:WHITE}
The directive {textcolor:WHITE} sets the text color to WHITE.
The directives {textcolor} and {background} can be used together, but only nested.
{textcolor}
{background}

{textcolor:#099620}
The color value must either be a valid HTML color name or a hexadecimal color code, such as #099620.
{textcolor}

Font

You can also select a font of your liking in the settings.

Table of Contents