Monaca Onsen UI Discord Chat Github Repo

Theme Roller css breaks my app UI

  • Hello

    I used the Theme Roller because I needed to change the color of the Toolbar component on Android (would like it to be like on iOS).


    import '../node_modules/onsenui/css/onsen-css-components.css';


    Buttons and labels in ToolBar are vertically centered.
    SplitterSide content is correctly styled.


    import '../data/public/lib/onsen-css-components.min.css';


    Ok the colours are now what we wanted, but everything else has gone wrong…!

    I simply replaced the import of:

    • node_modules/onsenui/css/onsen-css-components.css

    by the downloaded css:

    • data/public/lib/onsen-css-components.min.css

    What is the problem ?

    Here are the versions we are using:

    • onsenui: 2.2.1
    • react-onsenui: 1.2.0

    Any help would be very appreciated.


  • @guirip220 An option may be to just force iOS style if that is what you want.

  • Onsen UI

    @guirip220 It was mentioned in a recent blog post, the current Theme Roller won’t be updated to support Onsen UI 2.2.0+. We will probably release a new online tool like the Theme Roller but we also need to leave the old version there.

    As an alternative, have a look at node_modules/onsenui/css-components-src. You have the same functionality there :)

  • Pretty disappointing.
    Anyway, thanks for the answers.