search

OpenCilk / www.opencilk.org

OpenCilk's new website in development
https://www.opencilk.org
MIT License
5 stars 5 forks source link

multiple improvements to dark mode #206

Closed behoppe closed 1 year ago

behoppe commented 1 year ago

restyled code boxes, header/title colors, text contrast, link colors, footer links, and sidebar spacing.

netlify[bot] commented 1 year ago

Deploy Preview for sage-licorice-6da44d ready!

Name Link
Latest commit 0471d92453bba570d9181a531d4d6d28b26d900f
Latest deploy log https://app.netlify.com/sites/sage-licorice-6da44d/deploys/641c9c394bb0540008dc8336
Deploy Preview https://deploy-preview-206--sage-licorice-6da44d.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

behoppe commented 1 year ago

@ailiop I am curious how you like these dark mode improvements, which include pretty much all of your comments except for the search bar and images. I will have to research if how to restyle the Algolia search bar. As for the images, the darkening effect is deliberately built into pydata-sphinx, so I wanted to note that and then we can disable that "feature" if we want to.

ailiop commented 1 year ago

@behoppe That looks so much better! I have two additional comments on color:

  1. (Dark mode only) I think it'd be better if the various rectangle outlines (e.g., around code blocks, the vertical line-number seperator, etc) were a darker gray instead of white. See the screenshots below for an example. The page with the white code-block outlines looks a bit too busy to me.

    White outline Gray outline
    white-boundaries gray-boundaries

  2. (Both light and dark mode) I noticed that the syntax highlighting colors for strings and functions are almost the same, at least to my eyes. I think it'd be nice if they were more easily distinguishable.

Regarding the image-darkening feature, so far I'm actually finding it OK. It looks "too dark" if I'm doing cross-comparisons with light mode, but if I browse around solely in dark mode for a while, then it looks just fine (maybe better, even).

behoppe commented 1 year ago

Thanks @ailiop. I changed per your excellent feedback. The trickiest part was choosing a color for the prismjs string-tokens. I opted for a color that is a bit like number-tokens, and hence very different than the color of function names. Hope you like it!

ailiop commented 1 year ago

@behoppe Thank you, this looks good to me!