Monaca Onsen UI Discord Chat Github Repo

Switch from light to dark theme on runtime

  • Hi,

    is it somehow possible to switch from the light theme to the dark theme on runtime with a single switch? Or would it be necessary to inject the css stylesheets somehow?


  • administrators

    It depends on how you’re importing the CSS, but if it’s in the HTML this is one way to do it:

    First, add an id to the link that imports the Onsen CSS components:

    <link id="theme" rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">

    Then put this JavaScript somewhere:

    document.querySelector('#theme').setAttribute('href', 'lib/onsenui/css/dark-onsen-css-components.css');

    That should do the switch at runtime.

  • @emccorson works like charm :-) Thanks!