Colors & theming

import {
  ChangeDetectionStrategy,
  Component,
  effect,
  inject,
  signal,
  untracked,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocument, EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { withInteraction } from '@embedpdf/angular/interaction';
import { EpdfSelection, EpdfSelectionLayer, withSelection } from '@embedpdf/angular/selection';
import { EpdfSearch, EpdfSearchLayer, withSearch } from '@embedpdf/angular/search';
import { localEngine } from '@embedpdf/engine';

const TITLE = { start: 10, count: 52 };

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// On load: the cover's title is selected and "PDF" is found, so every color below has something to paint.
@Component({
  selector: 'demo-show-colors',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '',
})
export class ShowColors {
  constructor() {
    const selection = inject(EpdfSelection);
    const document = inject(EpdfDocument);
    void inject(EpdfSearch).search({ text: 'PDF' });
    effect(() => {
      const cover = document.pages()[0]?.ref;
      if (cover) untracked(() => selection.select({ page: cover, ...TITLE }));
    });
  }
}

@Component({
  selector: 'demo-root',
  imports: [
    EpdfDocumentGate,
    EpdfStage,
    EpdfPageTemplate,
    EpdfRenderLayer,
    EpdfSearchLayer,
    EpdfSelectionLayer,
    ShowColors,
  ],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withStage(),
      withRender(),
      withInteraction(),
      withSelection(),
      withSearch(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './dark-mode.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <!-- Your app's own switch: the colors are in the stylesheet, under [data-theme='dark']. -->
    <div class="pdf-viewer" [attr.data-theme]="theme()">
      <div class="toolbar">
        <div class="segmented" role="group" aria-label="Theme">
          <button type="button" [attr.aria-pressed]="theme() === 'light'" (click)="theme.set('light')">
            Light
          </button>
          <button type="button" [attr.aria-pressed]="theme() === 'dark'" (click)="theme.set('dark')">
            Dark
          </button>
        </div>
      </div>
      <ng-container *epdfDocumentGate="let document; fallback: loading">
        <demo-show-colors />
        <epdf-stage class="stage">
          <ng-template epdfPage>
            <epdf-render-layer />
            <epdf-search-layer />
            <epdf-selection-layer />
          </ng-template>
        </epdf-stage>
      </ng-container>
    </div>

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {
  protected readonly theme = signal<'light' | 'dark'>('dark');
}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  signal,
  untracked,
  ViewEncapsulation,
} from '@angular/core';
import {
  EpdfDocument,
  EpdfDocumentGate,
  epdfTheme,
  provideEmbedPdf,
} from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { withInteraction } from '@embedpdf/angular/interaction';
import { EpdfSelection, EpdfSelectionLayer, withSelection } from '@embedpdf/angular/selection';
import { localEngine } from '@embedpdf/engine';

// The characters of the cover's title.
const TITLE = { start: 10, count: 52 };
const SWATCHES = ['#3858e9', '#e91e63', '#0f6e56', '#c2410c'];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// The cover's title is selected on load, so the accent shows; drag over any text to see more.
@Component({
  selector: 'demo-select-title',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '',
})
export class SelectTitle {
  constructor() {
    const selection = inject(EpdfSelection);
    const document = inject(EpdfDocument);
    effect(() => {
      const cover = document.pages()[0]?.ref;
      if (cover) untracked(() => selection.select({ page: cover, ...TITLE }));
    });
  }
}

@Component({
  selector: 'demo-root',
  imports: [
    EpdfDocumentGate,
    EpdfStage,
    EpdfPageTemplate,
    EpdfRenderLayer,
    EpdfSelectionLayer,
    SelectTitle,
  ],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withStage(),
      withRender(),
      withInteraction(),
      withSelection(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './accent.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="pdf-viewer" [style]="theme()">
      <div class="toolbar">
        <label class="picker">
          Accent
          <input #picker type="color" [value]="accent()" (input)="accent.set(picker.value)" />
        </label>
        @for (swatch of swatches; track swatch) {
          <button
            type="button"
            class="swatch"
            [attr.aria-label]="'Accent ' + swatch"
            [attr.aria-pressed]="swatch === accent()"
            [style.background]="swatch"
            (click)="accent.set(swatch)"
          ></button>
        }
        <code class="value">--epdf-accent: {{ accent() }}</code>
      </div>
      <ng-container *epdfDocumentGate="let document; fallback: loading">
        <demo-select-title />
        <epdf-stage class="stage">
          <ng-template epdfPage>
            <epdf-render-layer />
            <epdf-selection-layer />
          </ng-template>
        </epdf-stage>
      </ng-container>
    </div>

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {
  protected readonly swatches = SWATCHES;
  protected readonly accent = signal('#e91e63');
  // Every part inside follows the variables; a variable set in your stylesheet still wins.
  protected readonly theme = computed(() => epdfTheme({ accent: this.accent() }));
}