← IndiClock

Customize a Theme

IndiClock themes are small JSON files. You can customize an existing theme or build one from scratch — by hand, or with help from an AI chatbot.

The fastest way: let an AI chatbot do it

Open ChatGPT, Claude, Gemini, or Google AI Mode. Copy the prompt block below, paste it in, and the chatbot will interview you about what you want to change (colors, hand style, ring, font, title, slideshow images, etc.) and hand back a ready-to-import JSON.

Copy-paste prompt:

I want to customize a theme for the IndiClock iOS app. Help me modify the
starter JSON below based on what I tell you, then output the full updated
JSON and tell me how to load it into the app.

IndiClock theme schema rules (must follow exactly):

- Top-level fields: version (always 1), id (lowercase-dash string, unique),
  name (short display name), and the color/style/image fields below.
- All color fields are 6-digit hex strings, e.g. "#FFB400". Required color
  fields: backgroundColor, faceColor, faceStrokeColor, hourHandColor,
  minuteHandColor, secondHandColor, majorTickColor, minorTickColor,
  numberColor, centerDotColor, dateColor.
- showNumbers: true | false.
- numberLabels: either null (use 1-12) or an array of EXACTLY 12 strings
  (e.g. Roman numerals "I".."XII", Devanagari, Arabic-Indic, custom labels).
- handStyle: one of "plain", "sword", "dauphine", "breguet", "arrow".
- ringStyle: one of "single", "double", "ticked", "dotted", "wideBand",
  "geometric", "sparseArcs".
- ringThickness: number between 0.5 and 5.0.
- numberFont: a PostScript font name string like "Didot", "Helvetica-Bold",
  "Georgia-Italic", or null for system font.
- clockTitle: optional short string shown under the clock; clockTitleColor
  is its hex color.
- faceImageURL: optional https URL for a full-face background image, or null.
- faceImageScale: optional number 0.0-1.0.
- urlPages: array (0-100 items) of slideshow entries. Each has:
    { "title": "...", "URL": "https://...",
      "referring_page": "https://...", "donate_to": "https://..." (optional) }
  URLs must be https. "URL" is the image (or the referring page URL if
  the image itself isn't freely licensed).
- Optional attribution: creatorName (<=80 chars), creatorContact
  ("mailto:..." or "https://..."), description (<=500 chars).
- Total file size must be under 100 KB.
- Do NOT invent image URLs. If I ask for new images, tell me you need me
  to supply the URLs (Wikimedia Commons, my own site, etc.) -- or keep
  the existing urlPages as placeholders.

Starter theme (France -- tricolor palette, 6 landmark slideshow images):

{
  "version": 1,
  "id": "my-france",
  "name": "My France",
  "backgroundColor": "#F5F5FA",
  "faceColor": "#FFFFFF",
  "faceStrokeColor": "#0055A4",
  "hourHandColor": "#0055A4",
  "minuteHandColor": "#0055A4",
  "secondHandColor": "#EF4135",
  "majorTickColor": "#0055A4",
  "minorTickColor": "#9BA7C6",
  "numberColor": "#0055A4",
  "centerDotColor": "#EF4135",
  "showNumbers": true,
  "dateColor": "#0055A4",
  "numberLabels": null,
  "clockTitle": "France",
  "clockTitleColor": "#0055A4",
  "handStyle": "sword",
  "ringStyle": "double",
  "ringThickness": 2,
  "faceImageURL": null,
  "urlPages": [
    { "title": "Eiffel Tower, Paris",
      "URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg/1200px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg",
      "referring_page": "https://en.wikipedia.org/wiki/Eiffel_Tower",
      "donate_to": "https://wikimediafoundation.org/give/" },
    { "title": "The Louvre, Paris",
      "URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Louvre_Museum_Wikimedia_Commons.jpg/1200px-Louvre_Museum_Wikimedia_Commons.jpg",
      "referring_page": "https://en.wikipedia.org/wiki/Louvre",
      "donate_to": "https://wikimediafoundation.org/give/" },
    { "title": "Palace of Versailles",
      "URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Versailles-Chateau-Jardins02.jpg/1200px-Versailles-Chateau-Jardins02.jpg",
      "referring_page": "https://en.wikipedia.org/wiki/Palace_of_Versailles",
      "donate_to": "https://wikimediafoundation.org/give/" },
    { "title": "Mont-Saint-Michel, Normandy",
      "URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/MtStMichel_avion.jpg/1200px-MtStMichel_avion.jpg",
      "referring_page": "https://en.wikipedia.org/wiki/Mont-Saint-Michel",
      "donate_to": "https://wikimediafoundation.org/give/" },
    { "title": "Notre-Dame de Paris",
      "URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Notre-Dame_de_Paris%2C_4_October_2017.jpg/1200px-Notre-Dame_de_Paris%2C_4_October_2017.jpg",
      "referring_page": "https://en.wikipedia.org/wiki/Notre-Dame_de_Paris",
      "donate_to": "https://wikimediafoundation.org/give/" },
    { "title": "Arc de Triomphe, Paris",
      "URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Arc_de_Triomphe%2C_Paris_21_October_2010.jpg/1200px-Arc_de_Triomphe%2C_Paris_21_October_2010.jpg",
      "referring_page": "https://en.wikipedia.org/wiki/Arc_de_Triomphe",
      "donate_to": "https://wikimediafoundation.org/give/" }
  ]
}

Now, please:
1. Ask me what I want to change (colors, hand style, ring, font, title,
   add/remove slideshow images, different theme entirely, etc.).
2. After I answer, output the full updated JSON inside a single code
   block, valid and ready to copy.
3. Give me a short "how to load this into IndiClock" footer telling me to
   (a) paste the JSON into a public gist at gist.github.com and copy the
   "Raw" URL, OR into a public bin at jsonbin.io and copy its URL, then
   (b) in IndiClock, open Settings -> Themes -> Add Theme, paste the URL,
   tap Fetch & Preview, then Apply.

Start by asking me what I'd like to customize.

After the chatbot gives you the updated JSON, skip to Publish and import below.

Customize by hand

Start from a known-good theme:

Download and edit in any text editor. Every field is listed below.

Required fields

FieldTypeNotes
version1Only supported value
idstringlowercase-dash, unique. Use my-france, not france
namestringShort display name
backgroundColorhexe.g. "#F5F5FA"
faceColorhexClock face fill
faceStrokeColorhexBezel ring color
hourHandColor, minuteHandColor, secondHandColorhex
majorTickColor, minorTickColorhexHour / minute ticks
numberColorhexNumerals
centerDotColorhexPivot dot
dateColorhexDate label
showNumbersboolean

Optional style fields

FieldValues
handStyle"plain", "sword", "dauphine", "breguet", "arrow"
ringStyle"single", "double", "ticked", "dotted", "wideBand", "geometric", "sparseArcs"
ringThickness0.5 – 5.0
numberFontPostScript font name like "Didot", "Helvetica-Bold", "Georgia-Italic", or null for system
numberLabelsnull (1–12) or an array of EXACTLY 12 strings
clockTitleShort text under the clock, or null
clockTitleColorhex
faceImageURLhttps URL of a background image, or null
faceImageScale0.0 – 1.0

Slideshow (optional)

urlPages is an array of 0–100 slideshow entries:

"urlPages": [
  {
    "title": "Eiffel Tower, Paris",
    "URL": "https://upload.wikimedia.org/.../1200px-Tour_Eiffel.jpg",
    "referring_page": "https://en.wikipedia.org/wiki/Eiffel_Tower",
    "donate_to": "https://wikimediafoundation.org/give/"
  }
]

Every URL must be https://. If the image isn't freely licensed, set URL to the Wikipedia page URL instead — IndiClock will show the page.

Optional attribution

FieldLimit
creatorName≤ 80 chars
creatorContactmailto:... or https://..., ≤ 200 chars
description≤ 500 chars, no <script> tags

Constraints

Publish and import

IndiClock doesn't host your theme JSON — you do. Three easy options:

Option A: GitHub Gist (recommended)

  1. Go to gist.github.com and sign in.
  2. Create a public gist. Filename: my-theme.json. Paste the JSON.
  3. Click Create public gist.
  4. Click the Raw button. Copy that URL.

Option B: JSONBin.io (no GitHub account needed)

  1. Sign up at jsonbin.io (free tier).
  2. Create a public bin. Paste the JSON. Save.
  3. Copy the bin's public URL.

Option C: Your own https host

If you have a website, upload the .json anywhere accessible over https://. Content-Type doesn't matter — IndiClock parses the body.

Import into the app

  1. In IndiClock, open Settings → Themes → Add Theme.
  2. Paste the URL. Tap Fetch & Preview.
  3. The preview shows the live clock with your theme. Tap Apply.

Your theme now appears under Imported Themes in the theme picker. To share with someone else, just send them the URL.

Try it live

Verify your setup before publishing — every link shape IndiClock supports has a working example on the test page.

Questions? See Support & FAQ.