Adding multiple themes and making it compatible with the light/dark switch

[Gabri110]

I have been trying to create a new file in _sass/theme/ and importing it in assets/css/main.scss, but I can't make it work. The only workaround that I have found is to directly modify the colours in the _default.scss and _dark.scss files directly. I think that it would be great to be able to have multiple different themes without the need of overwriting the default ones. So, do you know if there is another way around this?

In particlar, what changes should I implement to make it easier to add new light and dark themes to the website?

I have forked the last (0.8.4) release.

[rjzupkoii]

The usual request for light and dark is based upon the assumption that there are just the two themes involved hence the JavaScript switching between the two. However, as noted in the Wiki, the themes were setup with the assumption that someone would just have one theme set via the site_theme setting in _config.yml.

Realistically I think that the themes will need to be updated to have a light and dark mode version preset in the file that is in _sass/theme but the tricky part there is dealing with how Jekyll handles the build so it's not just a matter of only including the relevant theme. The progenitor of Academic Pages, Minimal Mistakes, doesn't seem to support switching between modes, and al-folio only has the light and dark mode option.

It would require a bit of coding, but the idea that I currently have in mind is to update the naming convention for the themes so something like NAME_light and NAME_dark with site_theme being supplied the NAME as the setting. The big challenge there is going to be making sure the relevant files get included as part of the SCSS during the build though.

[Gabri110]

And how about adding two new settings, site_theme_light and site_theme_dark? Would that be feasible?

I will think a bit about it and might implement it myself!

[rjzupkoii]

It's feasible but from a user experience perspective having one setting is better than two, plus if the names of the files are standardized it's just a matter of string concatenation to get all of the file names. Then you can do something like this in assets/css/main.scss:

"theme/{{ site.site_theme | default: 'default' | append: '_light' }}",
"theme/{{ site.site_theme | default: 'default' | append: '_dark' }}",

If that syntax is correct then it should be a fairly straightforward matter of renaming the existing theme and then creating the two SCSS files for the new theme and adding them to _scsss/theme.

[Gabri110]

I see. Thanks!

[Gabri110]

I just created the PR#3236 with the objective of solving this issue.