Tippyjs: setting theme to 'light' doesn't have any effect

[hirasso]

With the newest version of tippy, setting the theme to light doesn't have any effect anymore. Here's my code:

$('.tooltip').each(function() {
  let $btn = $(this);
  let templateId = $btn.attr('data-template-id');
  let args = {
    arrow: true,
    trigger: 'click',
    theme: 'light',
    duration: 150,
    interactive: true,
    offset: '0, 30',
    // hideOnClick: false
  };

  if( $(templateId).length ) {
    args.html = templateId;
    $(templateId).click(function(e) {
      e.stopPropagation();
    });
  }
  tippy( $btn.get(0), args );
});

[hirasso]

This should be white with black text, right?

[atomiks]

Themes aren't included in the CSS by default. They are under the themes folder now.

[hirasso]

Great, thanks for your help!

[webwakko]

For those wondering where to find it :
adding this should do the trick ;)
import 'tippy.js/dist/themes/light.css'

[weber-d]

It would be great to add this in the documentation cause the _getting started_ section says:

tippy.all.js is all dependencies (Tippy + Popper + CSS) in a single file. The CSS is injected into the document head.

[Radilx]

Yep, definitely caused unnecessary confusion.

[atomiks]

Sorry for the confusion. The Themes demo showed they are included in dist/themes but yeah it was not worded clearly anywhere else! 😢

[spsaucier-bakkt]

For others like me, note that the themes are not in the dist folder anymore.

    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@5"></script>
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/themes/light.css" />

[Benjoyo]

Not confusing at all :)