Tutorial: Create Themes

Create Themes

Use themes to change colors, fonts, and other aspects of how FoldingText looks.

Related:

About

FoldingText's editor is implemented in JavaScript/HTML/DOM.

Theming is implemented through CSS/LESS files, so you have full access to styling any aspect of the DOM that you want. FoldingText uses the CodeMirror editor behind the scenes, so you might want to read these tips on styling CodeMirror. But FoldingText adds a lot of it's own stuff too, so there's a lot more to style than is suggested in those CodeMirror tips.

Generally I hope to keep FoldingText's DOM structure stable, so themes won't break. That's a goal, not a guarantee.

Getting Started

  1. Choose the menu item File > Open Application Folder

  2. Inside that folder create a file named "user.less" with this content:

@textColor: red;

That's your first theme! You've overridden the CSS/LESS text color so that now all text should be red.

Next Steps

  1. Use Debugging for a live preview of your changes and to inspect the Editor's DOM nodes and classes.

  2. Look through the SDK sources for ".less" files to see the default style rules that are used. The "base.less" file is a good starting point. Then also look at "markdown.less".

  3. Ask questions in the support forum.

Examples

// Font overrides
@fontFamily: Times;
@fontSize: 1rem;
@lineHeight: 1.5rem;

// Color overrides
@inkColor: green;
@paperColor: black;

//
// Change style based on node type and level
//

.CodeMirror {
    // make headings bigger
    .cm-heading {
        font-size:1.2rem;
        line-height: 1.2rem * @lineHeight;
    }

    // make level 1 headings biggest
    pre[cm-level="1"].cm-heading {
        font-size: 2rem;
        line-height: 2rem * @lineHeight;
    }
}

//
// Change style based on @tags
//

// Color text orange when tagged with "@priority"
pre[cm-priority] span.cm-text {
    color: orange;
}

// Color text red when tagged with "@priority(1)"
pre[cm-priority="1"] span.cm-text {
    color: red;
}