Reinstate dark mode framework (with dark mode disabled)

holly-cummins commented 2 months ago

https://github.com/quarkusio/quarkusio.github.io/pull/1951 reverted #1908, to resolve https://github.com/quarkusio/quarkusio.github.io/issues/1950 (which affected light mode), and also to solve some issues with dark mode.

search icons are not showing
in some guides, images with a transparent background do not render well

However, it's desirable to have the #1908 changes in the code base. One reason is that we want to fix these minor issues and have dark mode, because people ask for it. Doing these fixes will be easier, and lower risk, if there's not a major merge to bring back #1908. Another reason is that #1908 removes some hardcoded colours and introduces more semantically-meaningful variable names, which is a good thing even if we never do dark mode.

This PR reintroduces #1908, but with the code background colour corrected, and with dark mode always-off.

We should do a thorough visual review of the preview to make sure there are no other light mode regressions (doing this kind of colour-to-variable refactoring can be error-prone, which is why we want to only do it once!)

cc @insectengine

github-actions[bot] commented 2 months ago

🎊 PR Preview d790114fe0187bcbd9461b009540e3c97495694c has been successfully built and deployed to https://quarkus-site-pr-1954-preview.surge.sh

Images of blog posts older than 3 months are not available.
Newsletters older than 3 months are not available.

github-actions[bot] commented 2 months ago

😭 Deploy PR Preview failed.

holly-cummins commented 2 months ago

Next steps after this merges:

Add a toggle for dark mode (possibly hidden, at first)
Fix search icon rendering in dark mode
Adjust 'extensible' content such as guides and blogs to put in a light-coloured background on all images. This ensures all images are legible (we could eventually also introduce a naming convention to allow an override for images which are declared to work in both modes and want a transparent background)
Carefully review dark mode for other visual problems

holly-cummins commented 2 months ago

Oh, and the other next step is to replicate the toggle mode to http://quarkus.io/extensions, which is at the moment using system settings, and should be switched to light mode (while waiting for the toggle)

maxandersen commented 2 months ago

examples of pages having "bad" darkmode:

http://0.0.0.0:4000/blog/quarkus-kiota/ - code block with darkgrey on grey http://0.0.0.0:4000/blog/monitoring-quarkus-jvm-mode-with-cryostat/

http://0.0.0.0:4000/blog/quarkus-saas-backend-time-tracking-app-case-study/ - transparent logo unreadable

gsmet commented 2 months ago

@maxandersen your comment above is not about this PR, right, it's when you enabled dev mode yourself? We can merge it?

holly-cummins commented 2 months ago

@maxandersen your comment above is not about this PR, right, it's when you enabled dev mode yourself? We can merge it?

Answering for @maxandersen, we don't have a good place to record the task list for dark mode, so he's put it on this work item for now. All of the problems he mentioned are technically in this changeset, but could never be seen by a user. But I will let @maxandersen also answer for himself!

maxandersen commented 2 months ago

Correct - it was just when i enabled dark mode. I added it here as way to collect the info.

For the actual PR I'm all +1 - code reads, looks and behaves fine.

quarkusio / quarkusio.github.io

Reinstate dark mode framework (with dark mode disabled) #1954