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

Add dark mode #7266

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Conversation

janfaracik
Copy link
Contributor

@janfaracik janfaracik commented Apr 22, 2024

Fixes #6222

This MR adds a dark theme for the site, following the user's system preference. I've widened our usage of CSS variables throughout the codebase so that colours should automatically adapt, I may have missed some so do let me know if you spot something that looks off.

image image image image image image image

I've went through the majority of pages and they're looking correct, I've highlighted current issues below:

Potential issues

  • Logos on the homepage are hard to read in dark mode Had to recreate the OSL logo by hand as I couldn't find an available SVG online - happy to contact them to see if they have one however
  • Cloud providers cards are a little low contrast in dark mode

@janfaracik janfaracik requested a review from a team as a code owner April 22, 2024 21:38
@probot-autolabeler probot-autolabeler bot added the roadmap The change is related to the public roadmap. https://jenkins.io/project/roadmap/ label Apr 22, 2024
@zbynek
Copy link
Contributor

zbynek commented Apr 22, 2024

Fixes #6222

Some testing needed for all the sites that reuse jenkins.io styles (accounts, plugins, updates, stories)

Copy link
Contributor

@kmartens27 kmartens27 left a comment

Choose a reason for hiding this comment

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

dark mode looks really good on jenkins.io and appears to be consistent through the site.

@janfaracik
Copy link
Contributor Author

Raised jenkins-infra/jenkins-io-components#146 to look into how we can share CSS vars across the various Jenkins sites - open to any ideas.

@zbynek
Copy link
Contributor

zbynek commented Apr 27, 2024

  • Accounts app will need to load styles.css to benefit from this, currently only uses jenkins.css
  • Stories have minor issues (see navigation and heading in https://stories.jenkins.io/user-story/to-improve-railway-signaling-solutions, the image on the front page should have transparent background with outline).
  • Updates site, plugins looks OK in general, one thing that I'm not sure about is the color of inline code: usually this shade of red indicates error.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
roadmap The change is related to the public roadmap. https://jenkins.io/project/roadmap/
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add dark theme
4 participants