Theme Builder Preview

Working on a web-based theme building tool for Drafts. It does not completely hold your hand through themes, a basic understanding of the underlying format is still useful, but it should help the process. At least making it a lot easier for someone to load an existing theme and make minor tweaks to make it more to their liking.

The preview is available at the Tools site.

By default, it opens with the settings of the default “Light” theme. A “.draftsTheme” file exported from Drafts can be uploaded in the “Load Theme” section.

As modifications are made to the scopes and colors, previews are updated live as well as the underlying JSON (visible in the “View Source” section). At any time, when the settings meet your liking, you can use the “Install Theme” button to import it into Drafts, or the “Download Theme” button to save it to your local file-system.

This tool is all client-side in the browser. There is nothing being uploaded a server. If you want to return to work on a theme later, make sure you download it to upload again later.

Feedback is welcome. This is a preview, and I expect there are still some bugs and improvements needed.

2 Likes

Note that the Theme Builder can also load themes directly from the Drafts Directory, if they are published there. To do so, take the unique identifier from the end of the theme’s directory URL, and add it as an identifier parameter on the theme-builder URL, like:

Once Theme Builder is considered finished, I will add direct “open in Theme Builder” links to the Directory.

Examples:

2 Likes

This looks really great.
I love the parameter for direct load.

I will test it in the upcoming projects.
Thanks Greg