General process for creating themes of Hyas?

[rootwork]

I'd like to create a theme based on Hyas, essentially taking advantage of all the great underlying functionality while applying my own colors/fonts/design/etc. and adding some archetypes and shortcodes.

I know that Doks is a theme of Hyas, and so at first I thought it must be importing Hyas using Hugo modules or Node modules, then layering on top of that its own design and functionality additions. But from what I can tell looking at the Doks config files, that's not the case; it seems to just be a fork of Hyas with more things added in.

Given that, is there a preferred mode for creating a new theme of Hyas? Does the Node module @hyas/core contain the theme files, allowing for a new theme to approach it like the doks-child-theme version does, using the @hyas/doks pieces as mounts? (In fact originally I was going to subtheme Doks, until I realized most of what I wanted was actually in Hyas.)

I would rather build my theme changes on top of Hyas than simply forking it. I don't mind recreating things like the npm commands in the (sub)-theme, and I'm agnostic as to whether my theme would pull in Hyas via Node modules, Hugo modules, or normal Hugo theme inheritance. But assuming you do want Hyas to be themeable, which I assume based on the "themes" section of the Hyas site, how do you suggest someone go about it?

[h-enk]

Get back to you later

[rootwork]

👍🏽

[h-enk]

The way Hyas (+ Doks) is currently set up is mainly (+ unfortunately) because of Hugo limitations. For example, Hugo Modules does not support configuration + scripts handling. That's mainly why I'm using npm. And in turn, that's why the Hugo theme inheritance does not work (properly).

@hyas/core is indeed Hyas as an npm package, so I'd start from there when building a Hyas based theme — h-enk/hyas-child-theme could be your starting point.

BTW, I'm in the process of splitting up certain functionalities like e.g. @hyas/images — see also #312

I'm curious what kind of theme you're going to create? Would be nice to keep us updated in the Discussions!

[rootwork]

Oh nice -- I hadn't seen hyas-child-theme, only doks-child-theme. I'll start with that. And yes, completely understand why you'd want to use npm for configuration.

The theme is for a company site that has its own colors, fonts, etc. so that's the big motivation. It's a little more than a brochure site -- it does have a lot of information, and a blog -- but it's not a "documentation" site.

[mdehollander]

I have a follow up question, especially because there has been done some work on Hylas after the last post here.

How do I work with custom theme? I would also like to customize the look and feel but want to make use of the hylas base (which looks very nice btw). Can I fork the hyas-themes-starter-bootstrap? How can I configure that this theme is being used with when creating a new project with npm create hyas@latest?

[h-enk]

Or, use a one-liner:

• npm create hyas@latest my-custom-theme -- --template bs-starter-full-control
• npm create hyas@latest my-custom-theme -- --template no-theme-recommended

[mdehollander]

👍 Thanks for adding the full control template. Bootstrap is fine for now. This makes things easy. No need to re-invent the wheel. Happy with the base system for a Hugo site that Hyas provides. Will start playing with it.

[mdehollander]

I am back to Hyas to see if I can use it for another project. I see things changed since last time and above commands to start a custom theme do not work anymore. The "full-control" plugin option and "none" option in themes are not there any more in the latest version of create-hyas. The last time I used version 1.8 I think.

What is the current approach to start a custom community theme? Instructions at https://github.com/gethyas/create-hyas#community-templates give also a 404. I would like to use the hyas base and either customize the bootstrap variables and scss or choose another css framework like tailwind.

[pensivedog]

+1 for a ready-made Tailwind theme for Hyas!

[pensivedog]

+1 for a ready-made Tailwind theme for Hyas!

Better yet - Tailwind Doks :)

[h-enk]

Yes, I changed things a bit.

I renamed template-no-theme to template-default-starter and template-bs-starter to templates bootstrap-starter.

Also, I dropped template-bs-starter-full-control, for Hyas now supports overriding using the plugins directory — thereby always giving you "full control".

So, the new commands are:

npm create hyas@latest my-custom-theme -- --template bootstrap-starter-recommended

npm create hyas@latest my-custom-theme -- --template default-starter-recommended

Or, use the interactive CLI:

npm create hyas@latest

What is the current approach to start a custom community theme?

You could start with bootstrap-starter for a Bootstrap-based site and with default-starter to add e.g. Tailwind CSS. Further instructions on how to go about this, will be available with the new documentation.