# Dashboard editor

Everything about the code theme is in **Customization > Code theme** in the
dashboard at [app.hystore.com.br](https://app.hystore.com.br).

## The Code theme screen

- What is live (version and date), the draft revision, which files are new,
  changed or removed, and the errors and warnings of the theme.
- *Publish now*, *Publish requests* (approve or refuse what the tool and the
  API asked) and *Published versions* (restore one into the draft).
- Start from a ready-made theme (Base, Aurora, Celeste or Prisma) in a store
  with no theme, and *Replace the draft with a ready-made theme* later.
- *Theme images and fonts*: upload PNG, JPEG, WebP, GIF, AVIF up to 3 MB and
  WOFF, WOFF2 up to 1 MB (checked by their content; no SVG), up to 100 files
  and 40 MB.
- *In the store*: *Use the theme in the store* once a version is published.

## Editor

*Open the editor* opens a full-screen editor:

- the theme's files on the left: create a file in a folder (blank or the
  same file from the Base theme), rename, delete;
- tabs, code colors, completion of tags, filters, variables and blocks, and
  what each one does when you hover over it;
- *Save* or Ctrl+S writes to the draft and reloads the preview; a file with an
  error is not saved and the error shows on its line;
- if the file changed somewhere else, you choose between the saved version and
  yours;
- *Difference* compares the file with what is live, and *History* with any
  published version, which can be brought back to the tab;
- images and fonts dragged onto the code are uploaded and the code to use them
  is written where they fell;
- the preview, on the side in computer, tablet or phone size, is the store
  itself on a 24-hour link;
- in the `apps` folder, the **+** creates an [isolated app](/en/code-theme/apps/)
  with `index.html`, `app.js` and `app.json` at once.

People with only *View the theme* open it read-only.

## Customize theme

*Customize theme* changes the theme without code, with the preview on the
side:

- **Theme settings**: the fields of `theme.json` (colors, texts, images,
  switches);
- **Sections of the page**: for each page, move sections up and down, hide,
  remove, add a section the theme has, and edit its fields.

*Save* writes `config/values.json` and `templates/<page>.json` to the draft;
the store changes when it is published. If the theme changed somewhere else
while the screen was open, nothing is written and the screen loads the saved
version.