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 to the website #2562

Merged
merged 5 commits into from
May 24, 2024
Merged

Add Dark mode to the website #2562

merged 5 commits into from
May 24, 2024

Conversation

pokonski
Copy link
Contributor

@pokonski pokonski commented May 23, 2024

Description

This PR adds necessary CSS changes to allow dark mode, including sponsor logos.

  • Some logos were pulled from sponsor's brand assets, some were tweaked manually to change the colors and some inverted with CSS filter property to avoid introducing new image files.
  • I also made sure the text is contrasting enough to avoid accessibility issues.
  • Replaced the Github star button with a newer one that supports dark mode and has the count properly showing (the old version seems broken)

Testing

Tested locally by running zola.

Screenshots

Click to view dark mode screenshots

Screenshot 2024-05-23 at 21-30-56 _ htmx - high power tools for html

Checklist

  • I have read the contribution guidelines
  • I have targeted this PR against the correct branch (master for website changes, dev for
    source changes)
  • This is either a bugfix, a documentation update, or a new feature that has been explicitly
    approved via an issue
  • I ran the test suite locally (npm run test) and verified that it succeeded

<div class="github-stars">
<iframe style="margin:auto;" src="https://ghbtns.com/github-btn.html?user=bigskysoftware&repo=htmx&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="Star htmx on GitHub"></iframe>
<div>
<div class="github-stars" hx-preserve="true" id="github-stars">
Copy link
Contributor Author

@pokonski pokonski May 23, 2024

Choose a reason for hiding this comment

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

Added hx-preserve to avoid flickering when the button is loaded during navigation

@1cg
Copy link
Contributor

1cg commented May 24, 2024

can you retarget against dev and we'll release this as part of htmx 2?

@pokonski pokonski changed the base branch from master to dev May 24, 2024 06:24
@pokonski
Copy link
Contributor Author

@1cg done!

@1cg 1cg merged commit eeecde2 into bigskysoftware:dev May 24, 2024
@pokonski pokonski deleted the dark-mode branch May 24, 2024 19:58
@gnat
Copy link
Contributor

gnat commented Jun 18, 2024

Well done! @pokonski

@pokonski pokonski mentioned this pull request Jun 18, 2024
4 tasks
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.

3 participants