Issue with theme inheritance

I'm having some issues with theme inheritance. I've used it fine before with the Twenty theme, but on this site with Alpha all the pages look like the CSS is missing. I created a folder in themes called mytheme and put this code in:

streams:
schemes:
theme:
type: ReadOnlyStream
prefixes:
'':

• user/themes/mytheme
• user/themes/alpha

Any thoughts on what the problem is?

Did you change the default theme in the system YAML file (user/config/system.yaml) too?

Yes, I did. Also, the site looks fine if I remove the line that says
– user/themes/mytheme
but then that kind of defeats the point of theme inheritance. Also, I should probably mention that this site is running on a local XAMPP environment on Windows.

If you making a theme which is based on twenty, you also have to modify patches inside" js/init.js, especially this one:

            global:     { range: '*', href: 'user/themes/twenty/css/style.css', containers: 1400, grid: { gutters: 50 } },
            wide:       { range: '-1680', href: 'user/themes/twenty/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
            normal:     { range: '-1280', href: 'user/themes/twenty/css/style-normal.css', containers: 960, viewport: { scalable: false } },
            narrow:     { range: '-980', href: 'user/themes/twenty/css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
            narrower:   { range: '-840', href: 'user/themes/twenty/css/style-narrower.css', containers: '95%!' },
            mobile:     { range: '-736', href: 'user/themes/twenty/css/style-mobile.css', containers: '100%!' }

Eventually remove no script from base.html.twig (but this may cause js problems)

<noscript>
  {{ assets.css() }}
</noscript>

In Alpha (The theme I'm using) that section says this:

global:     { range: '*', href: theme_url + '/assets/css/style.css', containers: '60em', grid: { gutters: ['2em', 0] } },
            wide:       { range: '-1680', href: theme_url + '/assets/css/style-wide.css' },
            normal:     { range: '-1280', href: theme_url + '/assets/css/style-normal.css', viewport: { scalable: false } },
            narrow:     { range: '-980', href: theme_url + '/assets/css/style-narrow.css', containers: '90%' },
            narrower:   { range: '-840', href: theme_url + '/assets/css/style-narrower.css', containers: '90%!', grid: { zoom: 2 } },
            mobile:     { range: '-736', href: theme_url + '/assets/css/style-mobile.css', containers: '100%!' },
            mobilep:    { range: '-480', href: theme_url + '/assets/css/style-mobilep.css', grid: { zoom: 3 } }

Also, I don't see a base template in Alpa. In default.html.twig there's this:

        <noscript>
          <link rel="stylesheet" href="{{ url('theme://assets/css/skel.css') }}" />
          <link rel="stylesheet" href="{{ url('theme://assets/css/style.css') }}" />
          <link  rel="stylesheet" href="{{ url('theme://assets/css/style-wide.css') }}" />
        </noscript>

So maybe theme inheritance only works with Antimatter right now?

Can you provide url to your working website ? Then i can really check what's going on. I never used Alpha before. Anyways i think:

/assets/css/

patches should be changed to

user/themes/alpha/assets/css/

So, those theme_url + '/assets/css/style-wide.css' lines in your init.js are referencing a theme_url variable that is defined on line 36 of alpha/templates/default.html.twig

That value is set to your_site_folder/user/themes/mytheme, which means all those CSS files (your_site_folder/user/themes/mytheme/assets/css/style-wide.css etc), can't be loaded because we can't handle that part with Grav's streams.

You have two options here:

• copy all those css files into your inherited theme (so your_site_folder/user/themes/mytheme/assets/css/style-wide.css etc do exist)
• copy the alpha/templates/default.html.twig to your theme and manipulate the theme_url variable directly.

Example code for option two would be (l24-27):

<script>
        var base_url = '{{ base_url }}',
        theme_url = '{{ theme_url }}'.replace('/mytheme', '/alpha');
</script>

exactly Gert. This is how i did it with latest template I'm working on (striped):=. I created twig file from js file and used template variables like you said:

https://github.com/getgrav/grav-theme-striped/blob/develop/templates/partials/init.html.twig

Thanks for the help guys. I do believe you've hit it sir Gert. I haven't had a chance to try it yet, but I think that will work. Excellent community you've got going here guys. :]

Happy to help :)