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

Support color scheme dark #4896

Merged
merged 1 commit into from
Aug 25, 2022

Conversation

greggman
Copy link
Contributor

Requirements

  • Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.
  • All new code requires tests to ensure against regressions.

Description of the Change

Adds CSS to support prefers-color-scheme: dark as well as a small bit of JavaScript for the progress indicator.

Alternate Designs

Change the progress indicator to use SVG which can by styled by CSS. But one change at a time suggests that should be a separate change.

Why should this be in core?

Because bright screens can be annoying in certain situation. The motivation for adding a dark mode was I was working on a flight. All the window shades are pulled down. All the terminals and editors I run were in dark mode but then when I went to run the tests, BOOM!, I'm lighting up all the seats around me.

Benefits

People who like dark mode, which is becoming fairly popular, can get mocha in dark mode.

Possible Drawbacks

Browsers that don't support CSS var will have issues. Basically IE

Applicable issues

#4895

@linux-foundation-easycla
Copy link

linux-foundation-easycla bot commented Jun 23, 2022

CLA Signed

The committers listed above are authorized under a signed CLA.

  • ✅ login: greggman / name: Greggman (2233984)

@greggman greggman force-pushed the support-color-scheme-dark branch 2 times, most recently from 2233984 to 4217396 Compare June 23, 2022 04:23
Adds CSS for prefers-color-scheme: dark
Copy link
Contributor

@outsideris outsideris left a comment

Choose a reason for hiding this comment

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

LGTM

@outsideris
Copy link
Contributor

I will merge this in a few days.

@outsideris outsideris merged commit 41567df into mochajs:master Aug 25, 2022
@juergba
Copy link
Contributor

juergba commented Aug 28, 2022

@outsideris please set the according labels, milestones and close the relevant issues. It's unfair - if you merge PR's - to leave the cleaning to others. Thank you.

@outsideris
Copy link
Contributor

Sorry, I missed them.

@outsideris outsideris added the area: website involving mochajs.org, but not necessarily involving docs label Aug 28, 2022
@outsideris outsideris added this to the next milestone Aug 28, 2022
@juergba
Copy link
Contributor

juergba commented Aug 28, 2022

@outsideris have you tested anything of this before merging?

image

How do you set the dark mode, how to overwrite the settings? Any docs?

@outsideris
Copy link
Contributor

@juergba Sure. It follows the system theme on OS. I tested it on my macOS.

@outsideris
Copy link
Contributor

The percentage color in the circle is different from mine. Are you using windows?

CleanShot 2022-08-28 at 23 51 02@2x

@juergba
Copy link
Contributor

juergba commented Sep 13, 2022

Yes, Windows and Chrome. I have to refresh then the circle gets filled.

@juergba juergba added the semver-minor implementation requires increase of "minor" version number; "features" label Oct 15, 2022
mocha.css Show resolved Hide resolved
This was referenced Aug 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: website involving mochajs.org, but not necessarily involving docs semver-minor implementation requires increase of "minor" version number; "features"
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants