Loki Theme for Luma

The Loki Theme project includes various packages to allow for building a faster Magento 2 theme based upon Magento Luma. Simply put, the existing JavaScript stack (KnockoutJS, jQuery, jQuery UI, RequireJS) is removed and replaced with simpler vanilla JS and Alpine.js components. This gives Luma an incredidable performance boost. And it is actually quite easy to build new Alpine.js logic where needed, compared to old school UiComponents. Loki Theme brings frontend performance and easier development to any Luma-based theme.

Repository: https://github.com/LokiExtensions/LokiTheme_LumaComponents

Demo: https://luma.demo.loki-checkout.com/

Why come up with a new theme engine?

There are various reasons for us to have developed this theme engine:

Luma can be fast

First of all, the Loki Checkout comes with its own Alpine.js logic in both Luma and Hyvä themes. Under Hyvä themes, this does not effect the load - the page load performance is already guaranteed by Hyvä (by having a small JavaScript stack). However, with Luma, there is still a lot of global JavaScript loaded that are actually not needed for the purpose of the checkout. Less is more. Loki simply just removes all legacy JavaScript, making the checkout - and all other configured pages - fly under Luma as well.

This is free and open source

Second, the Magento community is in need of a non-commercial (read: free) open source frontend. The Loki Theme is open source and addresses the painpoint that hurts performance most: The huge JavaScript stack of Luma. And you can still use your own Luma CSS without issues.

Hyvä is not perfect

Third, yes, there is Hyvä. It offers similar performance as Loki Theme. However, with Hyvä, a Luma theme needs to be migrated to TailwindCSS as well, which requires a template override of every single PHTML template that contains HTML classes. On top of this, the Hyvä community is struggling with keeping template overrides up-to-date, while the only reason those template overrides exist is to make TailwindCSS changes. This is stupid, because CSS actually exists to separate semantical elements from styling. CSS actually offers the means to make visual changes without modifying HTML. To this regard, you could say that Loki Theme is Hyvä, but without the TailwindCSS trouble.

This is actually not a theme

This is actually not a theme. It is a module that rips out JavaScript and replaces it with new JavaScript. The module can be installed on any Luma-based site. For third party extensions, more work is needed.