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).

    BEFORE

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

    0_1492190134306_before-theme-roller.png

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

    AFTER

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

    0_1492190258099_after-theme-roller.png

    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.

    Guillaume



  • @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.


Log in to reply