Enable Dynamically Changing Themes
michaelfaith opened this issue · comments
Feature Description
I have an Angular app with both light and dark theme, so need to be able to change the highlight theme dynamically. I don't see a way to do that within the current api. Unless I'm missing something. Should provide a theme service of some kind to allow for theme changes at run time.
This should not be part of the plugin, but can be done easily in the project, one way is as it is done in the demo
and
@MurhafSousli I saw what you did in the demo there, but that seems like a hack. You're having to pull the css out of the node_modules and put them in your app assets folder. So any future updates to the library wouldn't make it into those moved files. I feel like the library should abstract the messiness of disabling link tags like that. At that point, you might as well just use pure highlighjs, if we're left to just managing the styles ourselves. You know what I mean? If the library provided a service to allow you to switch themes at runtime, the api would be much cleaner.
Ok, I will reopen this to see if more people are interested in this feature, meanwhile, feel free to send a PR if you know a good solution!
Thanks! And for sure, I'll give it some thought, as well. Appreciate it.
Here is some thoughts, in order to load a theme dynamically in the library, I need to include the paths of each theme in the likeconst theme1$ = import('path-to-theme-1'), the problem with this approach that it will include the file in the dist folder of the app, whether the consumer chooses to load it or not, which some consumers won't appreciate.
Therefore, it is better to not implement the dynamic theme loading in the library and leave it to the developers to load them in their apps the way they want.
Whoa, i didn't think you were going to do it (from your last comment), but you went and added it? That's awesome. What changed your mind, if you don't mind me asking?
Yes, it is now available in v6.1.0.
First, I tried implementing it using import() promise method which I use to load the JS library, but it doesn't work with CSS files out of the box, developers will need to adjust their webpack config to allow CSS loading in promises, which can be confusing for some users.
After I closed the issue, I tried again with a simpler approach, and it worked pretty well!
I appreciate bringing this up since having light/dark theme is pretty popular these days!
Awesome! Glad you found a solution you liked. Appreciate the work.