Search code examples
javascriptflatpickr

How can I set a Flatpickr theme dynamically?

I am using flatpickr in a Vue 3 project and would like the user to able to change the theme dynamically. Using:

require("flatpickr/dist/themes/material_blue.css");

will set the theme to material_blue, but if the theme is then changed within the project, for example:

require("flatpickr/dist/themes/material_red.css");

the previous css file remains (presumably cached) and the new theme is not applied.

How do I get around this? I have looked at 'unrequiring' but can't get this to work.

UPDATE:

Achieved with this:

Initialising with a default theme in the index file:

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css" />

and if it changed:

  var stylesheet = document.head.querySelector("link[href*='themes']");
  stylesheet.href = "https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/" + myNewTheme + ".css";
Solution

  • I can tell you they are doing it on their website

    There is a script themer.js which is handling the changes:

    In this script the link element is accessed first

    stylesheet = document.head.querySelector("link[href$='flatpickr.css']"),

    And then when the theme is changed, the href attribute of that style is changed

    stylesheet.href =
  "https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/" +
  e.target.value +
  ".css";

    Which unloads the old css and loads new one