<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>perfect-scrollbar example</title>
  <link href="custom-theme.css" rel="stylesheet">
  <script src="../dist/js/perfect-scrollbar.js"></script>
  <style>
    .contentHolder { position: relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
    .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
  </style>
</head>
<body>
<div id="Default" class="contentHolder">
  <div class="content">
  </div>
</div>
<script>
  var $ = document.querySelector.bind(document);
  window.onload = function () {
    Ps.initialize($('#Default'), {
      theme: 'square'
    });
  };
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>perfect-scrollbar example</title>
  <link href="custom-theme.css" rel="stylesheet">
  <script src="../dist/js/perfect-scrollbar.js"></script>
  <style>
    .contentHolder { position: relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
    .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
  </style>
</head>
<body>
<div id="container" class="contentHolder">
  <div class="content">
  </div>
</div>
<p style='text-align: center'>
  <button id='default'>default</button>
  <button id='custom'>custom</button>
</p>
<script>
  var $ = document.querySelector.bind(document);
  var container = $('#container');
  window.onload = function () {
    Ps.initialize(container, { theme: 'square' });
  };
  $('#default').addEventListener('click', function () {
    Ps.destroy(container);
    Ps.initialize(container);
  });
  $('#custom').addEventListener('click', function () {
    Ps.destroy(container);
    Ps.initialize(container, { theme: 'square' });
  });
</script>
</body>
</html>

Add example to change theme
Add example to change theme
