Skip to content

feat: add dark mode to servo.org site - #341

Open
MunishMummadi wants to merge 8 commits into
servo:mainfrom
MunishMummadi:feat/servo.org-206
Open

MunishMummadi wants to merge 8 commits into
servo:mainfrom
MunishMummadi:feat/servo.org-206

Conversation

@MunishMummadi

Copy link
Copy Markdown

Description:

  • Adding dark mode for servo.org. Mostly css changes with toggle and pull mode for localStorage.
  • We might have to update an png of wiki-servo in dark mode. I am leaving it out for now.

Note: Apologies for the sizing of the images.

Fixes: #206
Screenshot 2026-09-01 at 22 28 00
Screenshot 2026-09-01 at 22 28 13
Screenshot 2026-09-01 at 22 28 22

Signed-off-by: Munish Mummadi <moneymindedmunish1@gmail.com>
Signed-off-by: Munish Mummadi <moneymindedmunish1@gmail.com>
cleanup

feat: dedicated inverse text tokens for rendering text

Signed-off-by: Munish Mummadi <moneymindedmunish1@gmail.com>
@mrego
mrego requested a review from ststimac September 8, 2026 09:02
@mrego

mrego commented Sep 8, 2026

Copy link
Copy Markdown
Member

Thanks for the patch.

From the screenshots, I think we need a better solution for the sponsors, maybe having a white background anyway in that section is the simplest one. Other than that I'll defer to @ststimac to review this.

@MunishMummadi

Copy link
Copy Markdown
Author

@mrego updated things. Apologies for the delay. Stuck with work!

Sponsers

image

Header

image

@ststimac ststimac left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

A few inline comments about color updates for accessibility purposes.

Additionally, please check

  • WPT Pass Rate page (table rows)
  • Made with Servo page (check project thumbnail hovers)
  • Sponsorship page (table columns)

As there are some elements that need to be adjusted because the text isn't legible (light text on light background)

Comment thread assets/css/style.css.liquid Outdated
--color-primary-hover: #5eead4;
--color-accent: #14b8a6;

--bg-page: #0f141c;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Let's change this to a darker teal color hex #002a29

Comment thread assets/css/style.css.liquid Resolved
Comment thread assets/css/style.css.liquid Resolved
@ststimac

Copy link
Copy Markdown
Collaborator

@MunishMummadi I've added some comments and few other pages that need some styles in dark mode. Sorry this took so long to review.

@MunishMummadi

Copy link
Copy Markdown
Author

@ststimac Mind throwing one more look at it? I believe I addressed most/all issues raised!

@ststimac

ststimac commented Oct 8, 2026

Copy link
Copy Markdown
Collaborator

Just a few more comments left. Thanks!

@MunishMummadi

Copy link
Copy Markdown
Author

@ststimac Can I get a fresh pair of eyes?

This branch has not been deployed

No deployments
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.

Add dark mode

3 participants