Dark Mode
Initialize PDF Atelier in dark mode from the outside and sync it with your app's theme state.
Dark Mode
PDF Atelier has a built-in dark mode toggle. By default the component starts in light mode, but you can initialize it in dark mode using the dark-mode prop — useful when your app already manages a global theme state.
This prop controls the initial dark mode state. Once the component renders, users can still
toggle dark mode themselves using the built-in toolbar button (if show-dark-mode-toggle is
enabled).
Prop Reference
Prop
Type
Examples
import { PDFAtelier } from '@innosoft/pdf-atelier-react';
// Always start in dark mode
<PDFAtelier
src="/document.pdf"
license="YOUR_LICENSE_KEY"
darkMode={true}
/>Sync with your app's theme:
import { PDFAtelier } from '@innosoft/pdf-atelier-react';
import { useTheme } from './your-theme-provider';
export default function Viewer() {
const { isDark } = useTheme();
return (
<PDFAtelier
src="/document.pdf"
license="YOUR_LICENSE_KEY"
darkMode={isDark}
/>
);
}import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';
@Component({
standalone: true,
imports: [PdfAtelierWrapper],
template: `
<pdf-atelier-wrapper
[src]="pdfSrc"
[license]="licenseKey"
[darkMode]="isDark"
></pdf-atelier-wrapper>
`,
})
export class ViewerComponent {
pdfSrc = '/document.pdf';
licenseKey = 'YOUR_LICENSE_KEY';
isDark = true;
}<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';
import { useDark } from '@vueuse/core';
const isDark = useDark();
</script>
<template>
<PdfAtelierWrapper
src="/document.pdf"
license="YOUR_LICENSE_KEY"
:dark-mode="isDark"
/>
</template><!-- Start in dark mode via HTML attribute -->
<pdf-atelier
src="/document.pdf"
license="YOUR_LICENSE_KEY"
dark-mode
></pdf-atelier>Set via JavaScript:
import '@innosoft/pdf-atelier-core';
const viewer = document.querySelector('pdf-atelier');
viewer.darkMode = true;