Review colors and styling

Each comment author gets one color in the comments pane and on the slide: the marker, the band over commented text, and the ring around a commented picture or shape. The color comes from slots --doc-review-author-0 through --doc-review-author-7.

The editor gives slots by order of first appearance in the deck: slide order, each thread before its replies, and then the author of new comments. An author keeps a slot for the session of the open deck, also after their comments go, so a delete and its undo recolor nobody. editor.getReviewAuthors() returns this roster.

Change the author colors

Override the tokens under .pptx-editor, and load your stylesheet after editor.css:

.pptx-editor {
  --doc-review-author-0: #7c3aed;
  --doc-review-author-1: #0e7490;
  --doc-review-avatar-ink: #ffffff;
}

The default palette keeps a contrast ratio of at least 5.1:1 between each slot and --doc-review-avatar-ink. Keep that ratio when you change either token.

Style one author

Cards, replies, markers, bands, and rings set --doc-review-author-current to their author's color, and avatars inherit it. They also carry data-review-author and data-review-author-slot, so one selector restyles a reviewer's card and what it annotates:

.pptx-editor [data-review-author='Ada Lovelace'] {
  --doc-review-author-current: #7c3aed;
}

Author names come from the file, so any sender can use any name. Use these selectors for display only, never to prove identity.

Read an author's color in your own UI

useReviewAuthor(name) returns { author, slot, color } from the roster, or undefined for an empty name or an author the roster does not hold. color is a CSS value such as var(--doc-review-author-3). slot is a rank that can pass 7: the ninth author has slot 8 and color var(--doc-review-author-0). In Vue, the composable takes a ref or a getter and returns a computed ref.

For a legend of every author, useReviewAuthors() from @pptx-editor.dev/react or @pptx-editor.dev/vue returns the whole roster, in slot order.

import { useReviewAuthor } from '@pptx-editor.dev/pro/react';

export function AuthorChip({ name }: { name: string }) {
  const info = useReviewAuthor(name);
  return <span style={{ borderColor: info?.color }}>{name}</span>;
}

<script setup lang="ts">
import { useReviewAuthor } from '@pptx-editor.dev/pro/vue';

const props = defineProps<{ name: string }>();
const info = useReviewAuthor(() => props.name);
</script>

<template>
  <span :style="{ borderColor: info?.color }">{{ name }}</span>
</template>

Render the chip inside .pptx-editor, or add that class to an ancestor, so the palette tokens resolve.

Choose the comment markers

Set pane.commentMarkers on reviewModule. The default is icon:

import { reviewModule } from '@pptx-editor.dev/pro';

const modules = [reviewModule({ pane: { commentMarkers: 'initials' } })];

Each marker is a .pptx-surface__comment-marker SVG group with data-marker set to icon or initials. A selected marker has is-active, and a marker of a resolved thread has is-resolved.

Style the highlights on the slide

A thread on text draws a band over each line of its range. A thread on a picture, a shape, or another element draws a ring around it: a stroke, so it shows over a solid fill or a photo. A thread is one band or one ring in the color of the author who started it, however many replies it has.

A band is light at rest. It is stronger while its thread is open: the selected thread, or the one the text caret is in. A ring is stronger while its thread is selected or its element is the one selected element. Neither animates, so a band follows the caret.

The bands blend with the slide as a highlighter does, so the text under a band keeps its color. Over dark text, the band multiplies. Over light text, the band layer screens, and the author color is lifted toward white first. The slide keeps its own colors in the dark chrome theme, so the text color picks the layer, not the theme.

A resolved thread draws no band or ring until you select it. To tint by author with your own strength, set the band fill:

.pptx-editor .pptx-surface__comment-band-group.is-active .pptx-surface__comment-band {
  fill: color-mix(in srgb, var(--doc-review-author-current) 45%, white);
}

Style the pane

Add classes with className on PptxEditorReview and card.className for each card. The packaged parts use these classes:

The pane also reads the editor's theme tokens, such as --doc-primary, so a theme change applies to it. See Appearance.

Limits

• Eight slots serve any number of authors: the ninth author takes the first color again.
• Each editor gives slots by what it has seen. Two collaborators see the same colors for the authors of the deck they opened. Authors who join during a session can take other slots on each peer.
• The palette holds the same values in the light and dark themes. Add a rule under .pptx-editor.dark when you change them for the dark theme.
• Comment markers, bands, and rings do not print or export, so their styles do not change a PDF.

See also

• Comments
• Appearance