Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MyST website toolbar should switch colors with the dark / light theme #13

Open
choldgraf opened this issue Jan 25, 2023 · 9 comments
Open

Comments

@choldgraf
Copy link
Contributor

I noticed some visual elements don't change their colors with dark / light mode. Just noting here for future reference:

Attribution icons

image

Social media and theme button itself

image

@rowanc1
Copy link
Member

rowanc1 commented Jan 25, 2023

Ah, perfect, thanks for catching these!!

I switched over to/created scienceicon system a few weeks ago:
https://www.npmjs.com/package/scienceicons

Must have missed a few dark mode flags!

rowanc1 referenced this issue in curvenote/theme-base Feb 2, 2023
See executablebooks/mystjs#155
@rowanc1
Copy link
Member

rowanc1 commented Feb 2, 2023

Fixed the license icons, the other ones need the nav to change in our custom theme (and have a dark-mode logo for myst!).

@rowanc1 rowanc1 changed the title A few icons don't switch colors with the dark / light theme MyST website toolbar should switch colors with the dark / light theme Feb 2, 2023
@eurunuela
Copy link

On a related note, is it possible to have two logos in the myst.yaml file? One for light mode, the other one for dark mode.

@rowanc1
Copy link
Member

rowanc1 commented Jun 20, 2023

Nice, I like it, it would be pretty easy to add I think!

  • We would add a logo_dark here
  • Access it here
  • And then do the actual logo switch here

There is an existing react code example of doing this here. Happy to help with the various PRs if you are up for it!

@choldgraf
Copy link
Contributor Author

For what it's worth, here's the configuration structure and behavior around logos and site titles in the pydata theme

https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/branding.html#different-logos-for-light-and-dark-mode

@eurunuela
Copy link

I just opened myst-theme PR executablebooks/mystmd#130.

I still haven't had the chance to test it but I believe it should work (or be very close to working).

@rowanc1
Copy link
Member

rowanc1 commented Jun 20, 2023

So cool! Thank you for the PR @eurunuela, it looks great and I will test it out soon -- and thanks @choldgraf for the links over to the pydata theme!

@rowanc1
Copy link
Member

rowanc1 commented Jun 21, 2023

Merged in your logo_dark work, it should be deployed in the next few days! Thanks again @eurunuela for your help with this. 🚀

I am excited that actually it was (I think) pretty easy to customize the themes. I think there needs to be easier ways to share various parts of the configuration between themes (right now I just copied the bit of YAML you wrote to the article theme). @fwkoch was giving some thoughts to this as well in sharing frontmatter (e.g. math macros) for projects, so hopefully we can align there as well. Before we get too much further we should probably circle back to more mature theme customizations like what @choldgraf shared to make sure we are moving towards supporting those types of options.

@choldgraf
Copy link
Contributor Author

choldgraf commented Mar 13, 2024

I'm gonna move this one over to mystmd.org since the remaining actions are needed in that theme-specific repo (and we can now transfer since the repo is in executablebooks!)

@choldgraf choldgraf transferred this issue from jupyter-book/mystmd Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants