Local Themes

Local themes are one of the kinds of themes supported by Time Out. See the Break Themes page for more information.

Local themes are web pages hosted on your computer. They could be as simple as a single static page with some text or an image, or a full web app, running locally. Themes are stored in the Themes folder of your Time Out data, which can be opened in the Finder via the Reveal Themes item in the Theme pop-up menu on the Break Appearance page.

Each theme is stored in a folder named for the theme title, with an extension of "totheme", e.g. "Analog Clock.totheme".

Within this folder, local themes have a "Documents" sub-folder, plus an "Info.json" file in JSON format. Both must be present, with these names.

The "Documents" sub-folder contains the main "index.html" file, and any needed resources like CSS, images, JavaScript, etc.

The format of the "Info.json" file is simple. Here's an example for the "Analog Clock.totheme" one; others would be similar:

{
  "author": {
    "name" : "David Sinclair",
    "email" : "support@dejal.com",
    "url" : "http://www.dejal.com/"
  },
  "credits" : {
    "name" : "HTML5 and CSS3 Tutorial",
    "url" : "http://blogs.html5andcss3.org/html5-canvas-clock/"
  },
  "comments": "A fancy analog clock with moving hands.",
  "rootDocument": "index.html",
  "created": "2016-02-02",
  "identifier": "Clock",
  "version": 1,
  "modified": "2016-02-02",
  "name": "Clock"
}

Unlike remote themes, there's no "url" property, but instead a "rootDocument" one. The value of this is "index.html" by default, but you can use a different name if you prefer; it just has to match the name of the main HTML file in the "Documents" sub-folder.

The "author", "credits" and "comments" values are displayed in the information popover, accessed via the info button next to the Theme pop-up menu on the Break Appearance page. The author is you, as the theme creator. The credits provide a link to the original site. The comments should be a brief description of the site.

Another property that isn't shown here is "type". By default, themes are displayed in a web view that supports older sites, but if you include a "type" : "html5" property and value, the theme is displayed in a modern web view that is optimized for HTML5 sites (and can do less well with legacy ones). Note that local "html5" themes only work on macOS 10.11 and later.

It's easy to add themes, or modify existing ones. If you add a theme that others might find useful, please submit it to Dejal so it can be shared on the Time Out Extras site, or even bundled in a future version of the app. See that site for more information.