Skip to main content
Use design in settings.json to set colors across your Lettercamp publication. The default background is white.
Set Background color under Home → Site or Post → Layout in the design editor. It applies to every page, including the header and footer. Lettercamp automatically chooses black or white primary text and adjusts secondary text, chips, block backgrounds, image borders, tables, and menus to match. Dark backgrounds work without a separate theme. To override primary text colors, use heading and body colors. In a color picker, enter a six-digit hex color or choose one visually. Valid colors update your draft and preview immediately. Click Set to close the picker. Use undo in the design modal to revert an adjustment. In settings.json, use design.backgroundColor with a six-digit hex color. The default is "#ffffff". Related shades keep their relative positions between the background and primary text color, so subtle surfaces remain subtle. For example, category chips use #fafafa on white and #050505 on black: slightly darker on light backgrounds and slightly lighter on dark backgrounds. Accent color is optional and unset by default. When set, it colors link text on hover and keyboard focus throughout your site, including navigation, post titles, category links, article links, and footer links. It also colors the background of selected text throughout your site, including the homepage grid, and the header’s primary button when that button has no explicit color. Selected text automatically uses black or white for contrast against the accent. For example:
Use a six-digit hex color for design.accentColor. Click Remove accent in its picker, omit the field, or set it to "" to restore normal link hovers and the browser’s default text selection. A header button that inherits the accent returns to #111111 when you remove the accent. Choose an accent that stands out against your background for link hovers. Changes appear in the design preview; click Publish to apply them to your site. The background setting preserves explicit colors in your content, custom components, and header button.