Creating a compatible theme

The language is independent of the visual theme: an organization can have its own brand guidelines, as long as its CSS implements the Core v1 contract.

What a theme must declare

/* @theme Client-A */
/* @dwa-language core-v1 */

• @theme: the name used in the frontmatter (theme: Client-A). A letter, then letters, digits, - or _; 64 characters at most. On the portal, this name no longer changes from one version to the next.
• @dwa-language core-v1: the implemented language version. The validator requires it.
• A 16:9 slide size if the theme sets one (1280 × 720 for the DWA theme).

What a theme must implement

All the classes in the reference, with the same meaning:

• the six layouts (title, toc, chapter, callout, content, closing);
• the compositions (cols-2 to cols-6, image-text-N, text-image-N, image-fit, image-full, gallery, gallery-bento, timeline, timeline-vertical, chart-wide);
• the options (with-title, with-legend, cards, branded), the sizes (medium, small), the fit modes (fit, bg) and the nine palettes;
• the 27 classes callout-size-50 to callout-size-180 (5 px steps), for automatic callout sizing.

The validator checks that each of these classes has a real effect, and that values within the same family are distinct; callout-size-N must give the callout title a size of N px.

The easiest approach is to start from theme/DWA.css and replace the colors, fonts and backgrounds.

Do not change the meaning of a name

Colors, fonts, spacing and patterns belong to the theme. The meaning of classes belongs to the language: image-text-80 must remain "image on the left at 80%". This is what makes it possible to switch themes without rewriting presentations.

Colors from a client's brand guidelines

Use only the palette provided by the client. The nine palettes are roles (neutral, dark, positive, alert…): map each one to a combination from the brand guidelines, checking the contrast of the text on each background.

Embedded resources

A theme must be self-contained: it loads nothing from outside.

• images and fonts embedded as data: base64 (PNG, JPEG, GIF, WebP, WOFF, WOFF2, TTF, OTF), whose content matches the declared type;
• no @import other than the themes built into Marp (default, gaia, uncover);
• no SVG, no </style sequence.

The portal does not embed files for you: import an already self-contained CSS. There is no size limit as a rule. Fonts remain subject to their distribution license.

Additional classes specific to your brand guidelines are allowed, as long as all Core v1 classes exist with their meaning.

Checking

To be published on the portal, a theme must pass the theme validator without errors: parsing, identity, security, effect of each Core v1 class, Marp rendering, and geometry of the control slides measured in a browser.

1. In VS Code: save the theme in a test folder with DWA : choisir le thème CSS pour DWA et Marp (choose the CSS theme for DWA and Marp). The extension checks it (steps 1 to 4) and shows the findings in Problèmes (Problems), on the CSS file; DWA : contrôler le thème (Core v1) (check the theme) reruns the check. Browse the examples in this documentation: the Marp preview and the overflow measurement use your CSS.
2. On the portal: the editor validates the CSS as you type (steps 1 to 6), shows the line of each error with a hint for fixing it, and displays a preview of the control slides. The server revalidates on publication.

Warnings (insufficient contrast in a palette, selector not evaluated) do not prevent publication, but are worth a review of the preview.

PowerPoint export limitation

The PPTX export currently uses the palettes and dimensions of the DWA Core; the color variants of a custom theme are not converted yet, and the export report says so. The PNG backgrounds of the chosen CSS, however, are kept as backgrounds.