componentURL Index Page

I am attempting to make an index page that has some of the features that normally work on componentURLs that are marked as “templates”. The best example I could come up with for this would be when using the Kitchen-Sink source. This example is allowing the “Layout Themes” from within the “Color Themes” componentURL template page on the very bottom of the “Framework7” index page. I am able to get everything to compile correctly in the code, except the “Light” and “Dark” buttons do not work. This can be said for things like the photo pickers and browsers as well. Is there any way to do this with only the stock F7 3.6.2 code? Thank you in advanced for any help!

Didn’t get what is the issue? Can you explain more detailed, maybe with code examples of what you have tried?

I have created an example project to show exactly what I’m doing. I have linked it below. It is a very bare bones example of what I’m trying to get working using the same example in the original post. Thank you for the help.

Example Project

// index.html
<html>
  <head><!-- meta --></head>
  <body>
    <div id="app">
      <div class="view view-main">
        <!-- keep it empty -->
      </div>
    </div>
    <script src="js/framework7.min.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/app.js"></script> 
  </body>
</html>
// js/routes.js
var routes = [
  {
    path:'/',
    componentUrl:'./pages/color-themes.html'
  }
];
// js/app.js
var app = new Framework7({
  root:'#app',
  theme:'auto',
  routes:routes
});

app.views.create('.view-main',{
  url:'/'
});

That is all
https://framework7.io/docs/view.html#initial-page-route

i have same confuse,why did you init view according to document.view is empty or not?
all questions seem sample code in github need to be changed,or afford new sample code here!