Override default CSS styles

This sample shows how to override the default CSS styles used by the viewer, note the purple icons in the toolbar. See style.css for details.

app.js
index.html
styles.css
window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; const viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js" }); viewer.addDefaultPanels(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf"); }
window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; const viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js" }); viewer.addDefaultPanels(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Override CSS Styles</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; } body .gc-menu__btn-container { background-color: #999999 !important; } body .gc-btn--accent { background-color: #000000 !important; } body .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover { background-color: #000000; } body .gc-viewer-host .gc-viewer .gcv-menu .gc-menu__panel-toggle--active .gc-btn { background-color: #999999; } body .gc-btn[disabled] { opacity: 0.7; } body .gc-accent-color { color: #7914a2 !important; } body .gc-menu__panel-header { color: #999999; } body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail .label { color: #999999; } body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail.selected .selectdecor { background-color: #000000; } body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail:hover .selectdecor { background-color: #7914a2; } body .gcv-page-input__text { color: #7914a2; }