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

Dark mode edits #66

Merged
merged 19 commits into from
Jun 4, 2024
Merged

Dark mode edits #66

merged 19 commits into from
Jun 4, 2024

Conversation

jukent
Copy link
Contributor

@jukent jukent commented May 31, 2024

Changing paragraph text back to black in dark mode. Also changing various highlighting in dark mode for better contrast.

Closes #63

@jukent jukent requested review from dcamron and r-ford May 31, 2024 17:48
Copy link
Member

@r-ford r-ford left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like your edit was reversed by the CI

@jukent
Copy link
Contributor Author

jukent commented Jun 3, 2024

It passes pre-commit locally, I don't like that our pre-commit.ci is being so aggressive.

@jukent jukent requested a review from r-ford June 3, 2024 17:39
@jukent jukent requested a review from r-ford June 4, 2024 01:46
@jukent
Copy link
Contributor Author

jukent commented Jun 4, 2024

Okay I think I caught all of the various dark mode classes for python syntax highlighting. If you catch one let me know.

There is still some weirdness with table coloring. (If I make the tables on https://sphinx-pythia-theme--66.org.readthedocs.build/en/66/reference/special-theme-elements.html look okay, the table on https://sphinx-pythia-theme--66.org.readthedocs.build/en/66/reference/notebooks.html looks bad, I need to figure out what class is the difference between them)

This affects the following CSS:

html[data-theme="dark"] table thead tr {
  background-color: white;
}

html[data-theme="dark"] table tbody tr:nth-child(2n) {
  background-color: white;
}

html[data-theme="dark"] th.head p {
  color: black;
}

@jukent
Copy link
Contributor Author

jukent commented Jun 4, 2024

Fixed the tables! This is gtg!

@brian-rose
Copy link
Member

Hi @jukent, is there a good way to preview this on some of our sites? I don't know much at all about CSS so can't review the code effectively, but I'd be happy to test-drive the updated theme.

@jukent
Copy link
Contributor Author

jukent commented Jun 4, 2024

Thanks @brian-rose from the ReadtheDocs build, you have to toggle the dark mode sun/moon icon and then click around. Whatever mode was toggled will have affects on the rest of the pages too.

(This is different than when selecting dark-mode in the inspect which will inherent from a default browser theme, which I also accounted for)

https://sphinx-pythia-theme--66.org.readthedocs.build/en/66/about.html

Compare it to the old dark theme here - https://sphinx-pythia-theme.readthedocs.io/en/latest/about.html

Copy link
Member

@brian-rose brian-rose left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a huge improvement in readability in dark mode, especially for code cells! Nice work @jukent .

Not reviewing the code here, just the functionality. But it looks good to me.

@jukent
Copy link
Contributor Author

jukent commented Jun 4, 2024

Thanks @brian-rose if we encounter any dark-theme use cases that weren't covered here I can quickly fix them. This covers all the test cases included on the theme website though.

@jukent jukent merged commit a7eec15 into main Jun 4, 2024
3 checks passed
@brian-rose brian-rose deleted the darkmode branch June 6, 2024 02:17
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

Successfully merging this pull request may close these issues.

Dark Mode theme bugs
3 participants