[Feature Request] Enabling light/dark theme toggle for the article-theme

[agahkarakuzu]

As @agoose77 explained, the theme automatically sets the page class based on system preferences. However, the article-theme doesn't provide an option for switching between modes, leaving the user stuck with the default setting.

Would it be possible to expose the light/dark theme switcher for the article-theme?

Thank you!

[rowanc1]

Thanks for the suggestion @agahkarakuzu, we would love the help maintaining the theme. If you are interested in opening a PR we can point you in the right direction.

[agahkarakuzu]

@rowanc1 sure, I'll give it a try. I also slightly modified the theme to connect a non-local content server by exposing an environment variable, should I add that to the PR as well?

[rowanc1]

Would love to see what you have added and if that makes sense to bring into main. That can for sure happen on a pull request! (or feel free to open an issue/discussion/discord thread in future if you want to ask a question)

The book theme uses a TopNav component, which has the theme button in it: https://github.com/executablebooks/myst-theme/blob/agoose77/fix-local-cookie-theme/packages/site/src/components/Navigation/TopNav.tsx#L137

The approach I would suggest is either (1) bring the top nav into the article theme; or (2) bring the <ThemeButton /> into some part of the existing article components. Pros/cons to each!

Thanks for the help. :)

[agahkarakuzu]

Perfect! Thank you for the pointers, I was onto TopNav :)

Another issue I am trying to figure out has to do with the page headers. I really like this design:

which disappears along with the authors list (the source doc has front-matter) when the content is served using a "project" structure :

I am not even sure if I am getting the directory organization and configs right, as the docs on that is a bit limited. I would appreciate if there's an example! I assume that the location of the ThemeButton will be conditional to single/multi page selection.

[rowanc1]

Not quite sure what you mean about the "project structure". The article theme looks to the myst project, not the article, to get the frontmatter and that isn't always the case for how book-theme projects are set up.

That is, if you are using the article theme, put your metadata on the myst.yml, not in the first article. This makes more sense for preprints/journal articles, which are organized around a single piece of work with authorship.

[agahkarakuzu]

Not quite sure what you mean about the "project structure".

Sorry for not being clear. I mean when I want to start a content server for multiple preprints (~/experiment/myst.yml):

version: 1
site:
  domains:
    - myst.neurolibre.org
  options:
    logo_text: experiment
  nav: []
  actions:
    - title: Learn More
      url: https://neurolibre.org
  projects:
    - path: content/t1book
      slug: t1book
    - path: content/parcellation
      slug: parcellation
    - path: content/mriscope
      slug: mriscope
  template: article-theme

where each preprint has its own myst.yml config in its respective location (e.g., (~/experiment/content/mriscope/myst.yml) andmyst.yml` has all the metadata.

[rowanc1]

Ah - we are in the process of deprecating that projects: []. myst.yml will eventually no longer support listing of multiple projects.

There was a bit of discussion about that here: https://github.com/jupyter-book/mystmd/issues/1103

[agahkarakuzu]

I can see why it makes sense not to have it in the scope of myst, but one would rather expect to have it in the scope of curvenote/curvenote. I'll definitely need this as we are hosting multiple preprints.

For now, I enabled article.frontmatter to have that pretty look even in the context of projects (BusyScope), but I'll not include this in the PR.

I added the toggle and it works:

fixed upper right:

Let me know if this is what you'd expect and I'll send a PR.

[agoose77]

@agahkarakuzu the deprecation of projects doesn't prevent you from serving multiple articles under a single domain.

I'm pretty sure it should be trivial to set up e.g. nginx to act as the content server, and the theme should just work.

[rowanc1]

Theme changes look great! Looking forward to a PR. :)

Curvenote does have this capability, but it isn't encoded in the yaml! That allows the infrastructure to work over versions, previews, and do a few other things. Can schedule a call some time to talk about this if you are interested. We are working towards an open source release of this in about a month.

[agahkarakuzu]

@agoose77 for static pages I have already set it and it works fine, but for serving content by exposing the port on which server is started, I don't know if there is an alternative to using "projects". Would love to know if there is!

@rowanc1 that sounds exciting, a call would be great! I wrote some endpoints to deal with such tasks, but it would be much tidier to use the ones coming with the next release.

[rowanc1]

🚀