Colors and fonts

LanternWP keeps its colors and fonts in one place, Styles, so a change there reaches every page: the header, the product cards, the cart and the checkout.

1. Go to Appearance → Editor and open Styles. Appearance → LanternWP links there too: Open Styles beside Colors, fonts and spacing.
2. Change the Colors and the Typography. The palette's colors are named by their role, such as Base (the page), Contrast (the text), Primary, Accent and Sale, so a color changes everywhere that role is used.
3. Select Save.

Fonts, headings and buttons

• Typography → Text sets the font of the text, and Typography → Headings the Font, Appearance (the weight) and Letter spacing of the headings. Everything set like a heading follows them too: the mini-cart's title, the order summary in the cart and the checkout, the review scores and the figures on the About page.
• Blocks → Button sets the Radius and the Padding of every button, WooCommerce's included. The radius also rounds the other controls of the store: filter chips, pagination, the search field and the quantity steppers. A radius with different corners changes only the Button block.

The editor shows each change before you save it. The product card, the logo's height, the frame of product images, the links' underline, hover, the corners of fields, panels and images, the labels, the products per row and the density are in the LanternWP panel (Shape, labels and spacing).

A demo's look

Every LanternWP demo's look is in the theme as a style: its colors, fonts, sizes, shape, spacing and product card. They are there with or without LanternWP Companion.

1. Go to Appearance → Editor, open Styles and select Browse styles.
2. Choose a look by the demo's name, such as Halden or Voltline: each tile shows the look's background and fonts, and its name when you point at it. Default is the theme's own look, Common Goods'. The editor shows the look before you save.
3. Select Save.

Choosing a look replaces your changes in Styles and the LanternWP panel, except your own CSS; Revisions in Styles keeps them. To take only a demo's fonts, choose them under Typography in Browse styles or on the Typography screen, where each set is named by its fonts, the headings' and then the text's: Newsreader & Inter is Halden's, Inter Kilowatt's, Jost Tessel's and Geist Voltline's. It changes the fonts and the text sizes and leaves the colors, the shape and the product card as they are.

Importing a demo with Companion gives the store the demo's look the same way, or, if you choose to keep your Styles, leaves it waiting here (Import a demo store). Use the look only in Appearance → LanternWP → Demos puts only a demo's look into Styles; the screen then says Look: with the demo's name. Reset styles, in the Styles menu of the Site Editor, takes the store back to the theme's own look, Default.

Appearance → LanternWP names the look under its title and under Colors, fonts and spacing: Look: Halden, Look: Halden, with your changes, Look: Default after a reset, or Look: your own when Styles hold changes but no demo's look, your own CSS among them. The LanternWP panel in the Site Editor names it the same way, with a Browse styles button that opens the looks. With Companion, a store that started from a demo whose look is the theme's own, such as Common Goods, says Look: Common Goods. When the store no longer has the demo's look as it came, Apply Halden again puts it back; your styles before it stay in Revisions.

Keep enough contrast between text and its background: the theme's own palettes and the demos' are checked for it, and a color you pick yourself is not.