1

My theme has a few settings that can be adjusted, one of them is style.

I want to load the libraries depending on the styles, but without writing them in the .libraries.yml

function my_theme_library_info_build() {
  $libraries = [];

  return $libraries;
}

function my_theme_library_info_alter(&$libraries, $extension) {
  $tmp_theme = theme_get_setting( 'my_theme' );

  $libraries['my_theme.theme']['css']['theme'] = [
      'css/themes/' . $tmp_theme . '.min.css' => [],
  ];
}

This is what I've got so far but I have to clear the cache after changing the style.

  • I think I understand what you're trying to do here. But I reckon there's a different way to do it that doesn't involve cache clearing. – Beebee Sep 24 '18 at 11:26
  • @Beebee I've had it like it that the library got attached in hook_preprocess_html but that required them to be added in the libraries.yml. My Theme is iterating through the style files and is showing those in the settings to be selected. Now I only need them to be dynamically loaded so that I can add/delete them without changing any other file. – Kazuto Sep 24 '18 at 11:57
  • 1
    Given your theme setting is a dropdown, you'll have to write code anyway. Just to make sure: Why don't you want to create separate libraries for each of your "theme"? – Mario Steinitz Sep 24 '18 at 12:26
  • I would have to add every style manually to the libraries.yml and I want to skip this step so that I can add or delete files without changing any other file. – Kazuto Sep 24 '18 at 12:37
  • 1
    Then I'd reckon, that your current version is the best you can do. Rebuilding the caches after changing your styles would be required anyway, so that Drupal won't deliver already cached pages with your old styles. – Mario Steinitz Sep 24 '18 at 12:48
1

I would implement this slightly differently. What you can do is combine all the different style css files into one, and use a className prefix instead of a file name prefix. So instead of having foo.min.css and bar.min.css you'll have 1 css file that's always included but has body.foo {} and body.bar {} styles in them.

Of course this gets easier with a preprocessor such as SASS: for every element you want to style you can wrap it in their respective body.foo or body.bar parents, without having to manually write body.foo in front of every element you want to style. So I highly recommend you use something like SASS for this, but it's not required at all.

The advantage of this method is I think it avoids problems with caching different CSS files since you're using only one. Also if your original goal of having separate CSS files was to keep them neat and separate then you can do that with your SASS files and they can be compiled into a minified single CSS file by your SASS processor.

  • The page would load slower and slower the more styles/themes are added. So instead of loading a single 200kb stylesheet, it would load a 1mb stylesheet if 5 themes are added, 2mb if 10 themes are added and so on. – Kazuto Sep 24 '18 at 11:54
  • @Kazuto – 1 MB styles. That's huge. Let me remind you: Premature optimization is the root of all evil. In the end you switch JS/CSS aggregation on and move on. – leymannx Sep 24 '18 at 12:53
  • The style itself has 200kb before aggregation. It's already minified and such. But if I combine 5 styles it would have 1mb but not a single style itself. – Kazuto Sep 25 '18 at 13:03
  • @Kazuto 1MB css stylesheet definitely changes things, it would for me. Looking at the comments, if you don't want to add things to libraries.yml then I don't think there's many other ways. If you are willing to do this extra step, then you can play around with the render array, and change the loaded library instead, which can get around caching issues. – Beebee Sep 25 '18 at 14:25
0

I have created patch for this please check https://www.drupal.org/project/social_icons/issues/2984954

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.