Linked files and Customizing the theme

[jeanbon]

Hi,

I downloaded the OnsenUI resources to use in my app and was wondering if I used the right resources, as there are a lot of files in the downloaded archive.
These are my linked files:

    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/onsen/js/onsenui.min.js"></script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.min.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.min.css">

Do I need anything else? What are all the other files in the archive for?

I already read the Theme Customization docs, but I have to admit it looks a little bit difficult for me to do. Is there any other way to change the theme?
I tried manually changing the theme.css file, but it didn’t seem to change anything.

Thank you.

[Fran Diox]

@jeanbon That should be enough if you are using pure JavaScript or jQuery. The other files are bindings for other frameworks like Angular, React or Vue.There are also source files for environments that support ES Modules, which is probably not your case since you are using jQuery (so you shouldn’t worry about it). The css-components-src folder contains the necessary tools for creating custom themes.

In order to modify the theme, you can either apply your own custom CSS rules on top Onsen UI defaults (which is good if you just want to change a few things), or create a whole new theme following the steps in the tutorial you posted. I think the latter is not that hard, you just need to install the required tools mentioned there, run the commands and then modify theme.css file. You’ll see the change sin the previewer and will be able to generate a custom onsen-css-components.css. After that, just replace the default onsen-css-components.css with the new one.

[jeanbon]

@Fran-Diox Thank you, I’ll try that.