The developer license gives you Porchlight's source in Zendesk's code editor (Customize designPorchlightEdit code). Editing code needs Knowledge (Guide) Professional or higher.
Before editing, copy the theme (theme menu → Copy) and edit the copy. Once a theme's code is edited, Zendesk can't update it automatically; keeping the original lets you compare against new versions.
Files
| File | What it holds |
|---|---|
templates/*.hbs | One template per page type, in Zendesk's Curlybars language. document_head.hbs, header.hbs and footer.hbs are on every page. The Track your order card is in home_page.hbs; the order-first request form is in new_request_page.hbs. |
style.css | All styles. Section 00 is the foundation from Zendesk's Copenhagen theme; Porchlight's own styles are sections 01–16 (tokens, base, header, home, topics and sections, article, pages, footer, components, print, content blocks, community, account, request modules, interaction states, content that doesn't fit). |
assets/porchlight.js | Porchlight's script: topics bar, menus, quick search, Track your order, support hours, the Contact us button on phones, topic drawings and icons, article tools, tabs, carousels, translations of Porchlight's own words. Readable, not minified. |
script.js | Copenhagen's script for dropdowns, the mobile menu and forms. |
assets/*-bundle.js | Zendesk's compiled modules for the request form, request list, service catalog and approvals. Don't edit them; their readable source is Zendesk's Copenhagen theme 4.53.6 on GitHub (github.com/zendesk/copenhagen_theme, folder src). |
manifest.json | Settings and their defaults. |
translations/ | Setting labels in the Settings panel. |
settings/ | The default images: logo, dark-mode logo, favicon, home picture, community and service catalog images. |
Colors and sizes
Every color, radius and font comes from CSS custom properties at the top of style.css (--pl-brand, --pl-signal, --pl-ink, --pl-surface, --pl-line, --pl-r, --pl-font-heading...). Dark mode redefines them under :root[data-pl-mode="dark"]. Change a token rather than individual rules and both modes stay consistent.
Topic drawings
The topic drawings are small SVGs in the ART object of assets/porchlight.js, picked by the keyword list KEYWORDS (one regular expression per drawing). Add a word in your language to a list to change which drawing a topic gets. The drawings are colored through classes, from the brand, highlight and page colors, so they follow the theme in light and dark mode.
Porchlight's words in other languages
Porchlight's own interface words live in assets/porchlight.js, in one dictionary per language (the I18N object). Add a language by copying the English entry and translating it.
Script hooks
window.Porchlight exposes t(), refreshFormPicker(), paintIcons(), paintArt(), initTabs() and initCarousels() if you add content after the page loads.